制作注册页面（HTML）

名之以父

已于 2023-03-09 17:18:19 修改

阅读量9.4k

点赞数 15

分类专栏： HTML 文章标签： html 前端 java vscode html5

于 2022-10-23 18:18:43 首次发布

本文链接：https://blog.csdn.net/wujianrenn/article/details/127477883

版权

HTML 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、项目成品

二、案例说明

本项目考察的是对于表格、列表（无序）、表单标签的综合运用，

首先我们要写把这个整体看做是一个大表格，每行两列，分很多行

我们的所有步骤都是基于一个表格每行两列的情况下，开始的

所以我们可以先写出整个大框架，一个大表格，之后再往里面细填东西

性别栏：

因为是单选，所以我们在使用radio作为type的同时，还需要添加name属性，绑定“男”和“女”具有相同的name属性，这样因为属性相同所以只能二选一
添加label标签的原因是为了扩大点击的范围，原本我们是只有点击小圆圈才能有效，再添加label属性后，我们点击“男”这个字，同样能达到点中小圆圈的作用

生日栏：

需要用到select标签和下属的option标签

地区栏：

type为“text”时为文本框，使用value属性是代表一个默认值

婚姻栏：

情况与性别栏类似；只是多了个checked属性，表示为默认选中项

下面情况类似：

使用button属性为提交键，但需要与JavaScript配合使用，

若是只是使用html的话，更推荐sumbit标签和reset标签

最后便是无序列表了

使用方法为：

    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>
            <p>123</p>
        </li>
    </ul>

有序列表为：

    <ol>
        <li> 10000</li>
        <li> 1000</li>
        <li>1</li>
    </ol>

三、项目代码

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table width="600" >
        <!-- 第一行 -->
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg" > 男 </label>  
                <input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg" > 女</label> 
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日:</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                </select>
                <select>
                        <option>--请选择月份--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                </select>
                <select>
                        <option>--请选择日--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                </select>
        
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京思密达"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况:</td>
            <td>
                    <input type="radio" name="marry" checked="checked">未婚  <input type="radio" name="marry">  已婚  <input type="radio" name="marry"> 离婚
            </td>
        </tr>
         <!-- 第五行 -->
         <tr>
             <td>学历:</td>
             <td><input type="text" value="博士后"></td>
         </tr>
          <!-- 第六行 -->
        <tr>
            <td>喜欢的类型:</td>
            <td>
                <input type="checkbox" name="love" > 妩媚的 
                <input type="checkbox" name="love" > 可爱的 
                <input type="checkbox" name="love" > 小鲜肉 
                <input type="checkbox" name="love" > 老腊肉 
                <input type="checkbox" name="love"  checked="checked"> 都喜欢 
            </td>
        </tr>
         <!-- 第七行 -->
        <tr>
            <td>个人介绍</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>

名之以父

关注

15
点赞
踩
55

收藏

觉得还不错? 一键收藏
打赏
1
评论
制作注册页面（HTML）

本项目考察的是对于表格、列表（无序）、表单标签的综合运用，首先我们要写把这个整体看做是一个大表格，每行两列，分很多行我们的所有步骤都是基于一个表格每行两列的情况下，开始的所以我们可以先写出整个大框架，一个大表格，之后再往里面细填东西。
复制链接

扫一扫