表单实例

2019-01-08  本文已影响0人  逐梦余生

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>表单</title>

    <!-- 表单的主要目的就是为了收集用户信息,在我们的网页中,我们也需要和用户进行交互,收集用户资料,这时候需要表单。在html当中通常由表单控件,提示信息和表单域三个部分构成 -->

</head>

<body>

    <form action="">

    <!-- input控件:<input/> 标签是一个单标签,type是最基本的一个属性-->

    <table width="600" border="0" cellpadding="0" cellspacing="0" align="center">

        <caption><h4>青春不常在,抓紧谈恋爱</h4></caption>

        <tr>

            <td>性别</td>

            <td>

                <!-- 给两个input标签的name属性设置一个相同的值,就可以实现单选 -->

                <!-- checked="checked"设置默认选择项 -->

                男<input type="radio" name="sex" checked="checked"/>

                女<input type="radio" name="sex"/>

            </td>

        </tr>

        <tr>

            <td>生日</td>

            <td>

                <!-- select:下拉菜单 -->

                <select name="" id="">

                <!-- option:选择项 -->

                <option value="">请选择年</option>

                <option value="">2018</option>

                <option value="">2017</option>

                <option value="">2016</option>

                </select>

                <!-- select:下拉菜单 -->

                <select name="" id="">

                <!-- option:选择项 -->

                <option value="">请选择月</option>

                <option value="">9</option>

                <option value="">10</option>

                <option value="">11</option>

                </select>

                <!-- select:下拉菜单 -->

                <select name="" id="">

                <!-- option:选择项 -->

                <option value="">请选择日</option>

                <option value="">6</option>

                <option value="">16</option>

                <option value="">26</option>

                </select>

            </td>

        </tr>

        <tr>

            <td>所在地区</td>

            <td>

                <input type="text" value="北京">

            </td>

        </tr>

        <tr>

            <td>婚姻状况</td>

            <td>

                未婚<input type="radio" name="status" checked="checked"/>

                离婚<input type="radio" name="status"/>

                丧偶<input type="radio" name="status"/>

            </td>

        </tr>

        <tr>

            <td>学历</td>

            <td>

                <input type="text" value="小学">

            </td>

        </tr>

        <tr>

            <td>月薪</td>

            <td>

                <input type="text" value="5000-10000">

            </td>

        </tr>

        <tr>

            <td>手机号</td>

            <td>

                <input type="text" maxlength="11">

            </td>

        </tr>

        <tr>

            <td>密码</td>

            <td>

                <input type="password" maxlength="8">

            </td>

        </tr>

        <tr>

            <td>昵称</td>

            <td>

                <input type="text" size="20">

            </td>

        </tr>

        <tr>

            <td>上传图片</td>

            <td>

                <input type="file" value="上传图像">

            </td>

        </tr>

        <tr>

            <td>喜欢的类型</td>

            <td>

                妩媚<input type="checkbox">

                柔美<input type="checkbox">

                可爱<input type="checkbox">

                小鲜肉<input type="checkbox">

                型男<input type="checkbox">

                气质<input type="checkbox">

            </td>

        </tr>

        <tr>

            <td>自我介绍</td>

            <td>

                <!-- 文本域 :cos:设置可以写多少列。rows:设置可以写多少行-->

                <textarea cols="30" rows="10">

                </textarea>

            </td>

        </tr>

        <tr>

            <td></td>

            <td>

                <input type="image" src="../素材/btn.png">

            </td>

        </tr>

        <tr>

            <td></td>

            <td>

                <input type="checkbox" >我同意注册条款和会员加入标准

            </td>

        </tr>

        <tr>

            <td></td>

            <td>

                <a href="#">我是会员,立即登录</a>

            </td>

        </tr>

    </table>

    </form>

</body>

</html>

上一篇下一篇

猜你喜欢

热点阅读