注册页面代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
</head>

<body>
    <h3>青春不常在,抓紧谈恋爱</h3>
    <table width="600">
        <tr>
            <!--第一行性别-->
            <td>性别:</td>
            <td><input type="radio" name="sex" id="man" /><label for="man">男<img src="img/man.jpg" title="男" /></label>
                <input type="radio" name="sex" id="women" /><label for="women">女<img src="img/women.jpg" /></label>
            </td>
        </tr>
        <!--第二行生日-->
        <tr>
            <td>生日:</td>
            <td>
                <select>
                    <option selected="selected">--请选择年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                </select>
                <select>
                    <option selected="selected">--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
                <select>
                    <option selected="selected">--请选择日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </td>
        </tr>
        <!--第三行地区-->
        <tr>
            <td><label for="place">所在地区:</label></td>
            <td>
                <input type="text" value="北京思密达" id="place" name="diqu" />
            </td>
        </tr>
        <!--第四行婚姻状况-->
        <tr>
            <td>婚姻状况:</td>
            <td>
                <input type="radio" id="wh" name="marry" /><label for="wh">未婚 </label><input type="radio" id="yh"
                    name="marry" /><label for="yh"> 已婚 </label><input type="radio" id="lh" name="marry" /><label
                    for="lh"> 离婚 </label>
            </td>
        </tr>
        <!--学历-->
        <tr>
            <td><label for="xl">学历:</label></td>
            <td><input type="text" / name="xl" id="xl" value="博士后"></td>
        </tr>
        <!--喜欢的类型-->
        <tr>
            <td>喜欢的类型:</td>
            <td>
                <input type="checkbox" name="hoblike" /> 妩媚的
                <input type="checkbox" name="hoblike" /> 可爱的
                <input type="checkbox" name="hoblike" /> 小鲜肉
                <input type="checkbox" name="hoblike" /> 老腊肉
                <input type="checkbox" name="hoblike" checked="checked" /> 都喜欢
            </td>
        </tr>
        <!--第七行个人介绍-->
        <tr>
            <td>
                <label for="intr">个人介绍:</label>
            </td>
            <td><textarea>个人介绍</textarea></td>
        </tr>
        <!--免费注册-->
        <tr>
            <td></td>
            <td><input type="submit" value="免费注册" /></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked" />我同意注册条款和会员加入标准
            </td>
        </tr>
        <tr>
            <td></td>
            <td><a href="#">我是会员,直接登录</a></td>
        </tr>
        <tr>
      
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
  
    </table>

</body>

</html>

关于写注册页面所注意的事项

  1. 为了排版更好看且整齐,我们把这些内容当做是一个表格,用table标签来写
  2. 性别和后面的单选框分别对应两个列
  3. 在我们使用input表单的时候,可以给每个input命名一个name属性,方便我们日后查看,且同一类型的表单设置name属性值一样
  4. 为了实现单选框多选一,需要把name属性设置为一样的
  5. 本次所写只是一个静态页面,无需向服务器提交数据,所以没有用到form表单域

最后修改:2022 年 03 月 19 日
如果觉得我的文章对你有用,请随意赞赏