您的位置：首页 > Web前端 > HTML

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

2017-05-30 17:27 316 查看
做一个注册页面：

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



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

注册行居中，加下划线；

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

右边：

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

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

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

第八行：同前三行

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

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

十一行：下划线加文字

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


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

成果图(去掉表格线)：


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航