注册页面代码
<!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>
关于写注册页面所注意的事项
- 为了排版更好看且整齐,我们把这些内容当做是一个表格,用table标签来写
- 性别和后面的单选框分别对应两个列
- 在我们使用input表单的时候,可以给每个input命名一个
name
属性,方便我们日后查看,且同一类型的表单设置name属性值一样 - 为了实现单选框多选一,需要把name属性设置为一样的
- 本次所写只是一个静态页面,无需向服务器提交数据,所以没有用到
form
表单域