这篇博客展示了如何使用HTML表单元素创建一个简单的世纪佳缘注册页面，包括性别选择（单选按钮）、生日选择（三个下拉框）、所在地区（文本输入）、婚姻状况（单选按钮）、学历（文本输入）、喜欢的类型（复选框）、自我介绍（文本域）、同意注册条款（复选框）以及登录选项。页面设计注重用户体验，提供多种选择项供用户填写个人资料。
应用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>
实现效果图：
1355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
