应用HTML表单标签制作简单的注册页面,如下例为简易的世纪佳缘注册页面。
代码及注释如下:
<!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 属性align:对齐方式 border:边框
cellpadding:文字与单元格边框距离 cellspacing:单元格间空隙 -->
<table>
<!-- 第一行 -->
<!-- <tr>表示行,<td>表示行内单元格 合并单元格:rowspan="" 跨行合并 colspan="" 跨列合并-->
<tr>
<td>性别:</td>
<!-- <input type=" "/>表单控件,单标签
radio:单选按钮 name:表单元素名字,实现单选 checked:默认选中
<label>标签:用于绑定表单元素,效果为点击选项文字也可选中按钮
for属性和id属性搭配使用 -->
<td><label for="nan"><input type="radio" name="sex" id="nan" /><img src="../images/man.jpg" /> 男</label>
<label for="nv"><input type="radio" name="sex" id="nv" checked="checked"/><img src="../images/woman.jpg" /> 女</label></td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日:</td>
<td>
<!-- <select>下拉表单元素 <option>选项 selected 默认选中 -->
<select>
<option>--请选择年--</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
</select>
<select>
<option>--请选择月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select>
<option>--请选择日--</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select></td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地区:</td>
<!-- text 文本框 value="" 规定元素的值 -->
<td><input type="text" value="火星未命名区域"/></td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻状况:</td>
<td><label for="weihun"><input type="radio" name="marry" id="weihun" checked="checked"/> 未婚</label>
<label for="liyi"><input type="radio" name="marry" id="liyi" /> 离异</label>
<label for="sangou"><input type="radio" name="marry" id="sangou"/> 丧偶</label></td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历:</td>
<td><input type="text" value="幼儿园"/></td>
</tr>
<!-- 第六行 -->
<tr>
<td>喜欢的类型:</td>
<!-- checkbox 复选框 相同的name值-->
<td><label for="wumei"><input type="checkbox" name="love" id="wumei"/> 妩媚的</label>
<label for="cute"><input type="checkbox" name="love" id="cute"/> 可爱的</label>
<label for="small"><input type="checkbox" name="love" id="small"/> 小鲜肉</label>
<label for="big"><input type="checkbox" name="love" id="big"/> 老腊肉</label>
<label for="like"><input type="checkbox" name="love" id="like" checked="checked"/> 都喜欢</label></td>
</tr>
<!-- 第七行 -->
<tr>
<td>自我介绍:</td>
<!-- textarea 文本域,可以多行,rows 行数 cols 每行字数 -->
<td><textarea> 自我介绍</textarea></td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<!-- submit 提交按钮 提交表单元素到服务器 -->
<td><input type="submit" value="免费注册" /></td>
</tr>
<!-- 第九行 -->
<tr>
<td></td>
<td><label for="agree"><input type="checkbox" id="agree" checked="checked"/>我同意注册条款和会员加入标准</label></td>
</tr>
<!-- 第十行 -->
<tr>
<td></td>
<!-- <a href="#"> </a> 空链接-->
<td><a href="#">我是会员 , 立即登录</a></td>
</tr>
<!-- 第十一行 -->
<tr>
<td></td>
<td>
<h5>我承诺</h5>
<!-- <ul>列表标签,用于布局 -->
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
实现效果图: