HTML学习实践之账号注册页面

最新推荐文章于 2022-02-24 21:37:53 发布

lijiehao123456

最新推荐文章于 2022-02-24 21:37:53 发布

阅读量742

点赞数 1

分类专栏： Web

本文链接：https://blog.csdn.net/lijiehao123456/article/details/72810727

版权

Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

做一个注册页面：

使用表格样式，预览要做的注册页面样式。

从图上可以看出来，要做的表格有11行，其中第一和第十，十一行都是跨2列，使用colspan="n"实现跨列，

注册行居中，加下划线；

左边表格注册内容全部左对齐，

右边：

前三行：表格使用type=”text”文本输入，<input>标签里定义输入内容、类型、最大输入长度为6。

第五行：单选项使用 type=”redio” ，<input>标签里定义输入内容、类型、最大输入长度为6。

六七行：下拉列表使用 <select><option> 列表内容</option></select>

第八行：同前三行

第九行：多选项使用 type=”checkbox”，加入 checked="checked" 表示默认打钩项。

第十行：设置一个提交按钮 type="submit" ,使用style设置按钮的高和宽。

十一行：下划线加文字

代码如下：

 <!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <title>LoveYing注册</title>
</head>
<body>
    <form>
        <table width="500" cellpadding="5">
            <tr>
                <td colspan="2" align="center">
                    <h1>注册账号<hr></h1>
                </td>
            </tr>
            <tr>
                <td align="right"><label for="name">呢称：</label></td>
                <td><input type="text" id="name" maxlength="6"></td>
            </tr>
            <tr>
                <td align="right"><label for="pwd">密码：</label></td>
                <td><input type="password" id="pwd" maxlength="12"></td>
            </tr>
            <tr>
                <td align="right"><label for="repwd">确认密码：</label></td>
                <td><input type="password" id="repwd" maxlength="12"></td>
            </tr>
            <tr>
                <td align="right">性别：</td>
                <td>
                    <input type="radio" name="sex" value="male" checked="checked">男
                    <input type="radio" name="sex" value="female">女
                </td>
            </tr>
            <tr>
                <td align="right">生日：</td>
                <td>
                    <select name="year">
                        <option value="1994">1994年</option>
                        <option value="1995">1995年</option>
                        <option value="1996">1996年</option>
                    </select>
                    <select name="month">
                        <option value="1">1月</option>
                        <option value="2">2月</option>
                        <option value="3">3月</option>
                    </select>
                    <select name="day">
                        <option value="1">1号</option>
                        <option value="2">2号</option>
                        <option value="3">3号</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">所在地：</td>
                <td>
                    <select name="right">
                        <option value="1">中国</option>
                        <option value="2">美国</option>
                        <option value="3">英国</option>
                    </select>
                    <select name="province">
                        <option value="1">广西</option>
                        <option value="2">上海</option>
                        <option value="3">北京</option>
                    </select>
                    <select name="ddistrict">
                        <option value="1">贺州</option>
                        <option value="2">桂林</option>
                        <option value="3">南宁</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right"><label for="phone">手机号码：</label></td>
                <td><input type="text" id="phone" maxlength="11"></td>
            </tr>
            <tr>
                <td ></td>
                <td>
                    <input type="checkbox" checked="checked">创建桌面快捷键<br/>
                    <input type="checkbox" checked="checked">我已阅读并同意相关服务条款<br/>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="确认注册" style="width: 200px;height: 50px">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <hr>爱影动漫室&copyLoveYing.com
                </td>
            </tr>
        </table>
    </form>
</body>
</html>



这样，一个简单的注册页面就做出来了，虽然代码看起来很烦，其实很简单，都只是HTML前面部分的简单内容相互嵌套形成的。
相对于我这初学者来说，这已经是一个蛮好的练习了，做出来，都说满满的成就感，再怎么简单但还是自己做的嘛。
成果图(去掉表格线)：