HTML5基础教程(七)
讲解HTML的表单标签
表单(form)可以理解为web程序客户端与服务器的交互界面，表单负责数据采集功能。一个表单有三个基本组成部分： 表单标签、处理表单数据的程序以及数据提交到服务器的方法。
HTML5涉及到表单的元素有以下：
| 标签 | 含义 |
|---|---|
| form | 定义表单。 包括以下属性: name属性:表单的名字 action属性:处理表单的动作 method属性:表单的提交方法 |
| input | 表单控件 常见的type属性取值如下: type=text：文本控件 type=password：密码控件 type=radio：单选按钮，要保证单选name属性值必须一样 type=checkbox :复选框 type=date: 日历框 type=file: 文件选择器 type=submit:提交按钮 type=reset: 重载按钮 type=button: 普通按钮 type=img: 图片按钮 id属性：标识符属性 name属性: 名字属性 value属性：提交服务器的值 disabled属性：禁用属性 readonly属性:只读属性 hidden属性：隐藏域 size属性：可见字符宽度 maxlength属性：允许的最大字符数 |
| select | 定义下拉列表 |
| option | 下拉列表项 |
| textarea | 多行文本域 rows属性：行数 cols属性：列数 |
| datalist | 元素规定输入域的选项列表 |
| button | 标签定义一个按钮，元素内部，您可以放置内容，比如文本或图像。 |
以下是一个用户注册的表单案例,可以更好的理解以上标签。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<h1>用户注册</h1>
<hr>
<div>
<form name="regForm" action="regok.html" method="post">
<table>
<tr>
<td class="title">用户名：</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td class="title">密码：</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td class="title">确认密码：</td>
<td><input type="password" name="confirmpass"/></td>
</tr>
<tr>
<td class="title">电子邮箱：</td>
<td><input type="text" name="email" disabled="disabled"/></td>
</tr>
<tr>
<td class="title">薪水：</td>
<td><input type="text" name="salary" value="10000" hidden/></td>
</tr>
<tr>
<td class="title">性别：</td>
<td><input type="radio" value="M" name="gender" checked/>男<input type="radio" value="F" name="gender"/>女
</td>
</tr>
<tr>
<td class="title">学历：</td>
<td>
<select name="education">
<option value="-1" selected>-----请选择-----</option>
<option value="0">文盲</option>
<option value="1">小学</option>
<option value="2">初中</option>
<option value="3">高中</option>
<option value="4">大专</option>
<option value="5">本科</option>
<option value="6">硕士</option>
<option value="7">博士</option>
<option value="8">博士后</option>
<option value="9">圣斗士</option>
</select>
</td>
</tr>
<tr>
<td class="title">籍贯：</td>
<td>
<input list="province" value=""/>
<datalist id="province">
<option value="河北">
<option value="河南">
<option value="山东">
<option value="山西">
<option value="陕西">
</datalist>
</td>
</tr>
<tr>
<td class="title">出生日期：</td>
<td><input type="date" name="birthday" value=""/></td>
</tr>
<tr>
<td class="title">爱好：</td>
<td>
<!--复选框name名字必须一样-->
<input type="checkbox" name="favorites" value="read"/>读书
<input type="checkbox" name="favorites" value="music"/>音乐
<input type="checkbox" name="favorites" value="internet"/>上网
<input type="checkbox" name="favorites" value="nba"/>NBA
</td>
</tr>
<tr>
<td class="title">自我介绍：</td>
<td><textarea rows="10" cols="25"></textarea></td>
</tr>
<tr>
<td class="title">上传照片：</td>
<td><input type="file" name="pic"/></td>
</tr>
<tr>
<td class="title">是否接受条款：</td>
<td><input type="checkbox" name="accept"/>我无条件接受霸王条款</td>
</tr>
<tr>
<td colspan="2" align="center"><button type="button">普通按钮</button><input type="submit" value="注册"/><input type="reset" value="重置"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
运行效果：
