使⽤HTML写⼀个注册界⾯（简单）
界⾯效果：
编写过程：
中间没有使⽤css，只有⼀个注册界⾯的结构
为了使看起来整齐，⾸先使⽤了<table>表格标签将页⾯作为没有线条的两列表格（见上⽅右图）
标题使⽤<h4>标签即可，⽽左边⼀列的较为简单直接<td>即可，只⽤看右边
1. 第⼀⾏ 使⽤input标签中的radio属性实现单选过程，图⽚则使⽤img标签即可，要达到点击图⽚和⽂字直接选中的效果则需要图⽚⽂
字放在label标签中，要达到单选的效果，⼀定要在选项中使⽤name属性将他们标为同类
2. 第⼆⾏ 使⽤select标签，下拉选项放在option中
3. 第三⾏ 直接input标签中的text⽂本即可
4. 第四⾏ 和第⼀⾏类似
5. 第五⾏ 和第三⾏类似
6. 第六⾏ 达到多选效果，使⽤input中的checkbox属性即可
7. 第七⾏ 使⽤textarea可以实现多⾏⽂本的输⼊
8. 第⼋⾏ 使⽤input中的submit属性，要更改按钮的值使⽤value属性
9. 第九⾏ 虽然是单选，可以使⽤input中的checkbox属性，标签⾥⾯使⽤checked可以在页⾯初始的时候直接勾选成功
10. 第⼗⾏ 锚点标签a,herf指向点击后⽬标⽹页，target实现新开页⾯⽽不是覆盖页⾯
11. 第⼗⼀⾏ ⽆序标签，ul中嵌套li，但是要注意只有li标签中能嵌套其他标签，ul不可
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="zn-CN">
自我介绍html网页模板<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册页⾯</title>
</head>
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
<form action="#">
<table width="500" border="1">
<!-- 第⼀⾏ -->
<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>2000</option>
<option>2001</option>
<option>2002</option>
</select>
<select>
<option>--请选择⽉--</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<select>
<option>--请选择⽇--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<!-- 第三⾏ -->
<tr>
<td>所在地区</td>
<td>
<input type="text">
</td>
</tr>
<!-- 第四⾏ -->
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marry" id="weihun"><label for="weihun">未婚</label>
<input type="radio" name="marry" id="yihun"><label for="yihun">已婚</label>
<input type="radio" name="marry" id="lihun"><label for="lihun">离婚</label>
</td>
</tr>
<!-- 第五⾏ -->
<tr>
<td>学历</td>
<td>
<input type="text">
</td>
</tr>
<!-- 第六⾏ -->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" id="妩媚"><label for="妩媚">妩媚的</label>
<input type="checkbox" id="可爱"><label for="可爱">可爱的</label>
<input type="checkbox" id="⼩鲜"><label for="⼩鲜">⼩鲜⾁</label>
<input type="checkbox" id="⽼腊"><label for="⽼腊">⽼腊⾁</label>
</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>我同意注册条款和会员加⼊标准
</td>
</tr>
<!-- 第⼗⾏ -->
<tr>
<td></td>
<td>
<a href="www.baidu" target="_blank">我是会员，⽴即登录</a>                </td>
</tr>
<!-- 第⼗⼀⾏ -->
<tr>
<td></td>
<td>
<ul>
<li><h3>我承诺</h3></li>
<li>年满⼗⼋，单⾝</li>
<li>抱着严肃的态度</li>
<li>寻另⼀半</li>
</ul>
</td>
</tr>
</table>
</form>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。