通俗的讲，表单就是一个将用户信息组织起来的容器。将需要用户填写的内容放置在表单容器中，当用户点击“提交”按钮时，表单会将数据统一发送给服务器。
典型的应用场景：登录注册、网上订单信息填写、调查问卷、搜索。
HTML 表单标签：
| 标签 | 描述 |
|---|---|
| <form> | 定义供用户输入的表单 |
| <input> | 定义输入域 |
| <textarea> | 定义文本域 (一个多行的输入控件) |
| <label> | 定义了 <input> 元素的标签，一般为输入标题 |
| <fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
| <legend> | 定义了 <fieldset> 元素的标题 |
| <select> | 定义了下拉选项列表 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
| <button> | 定义一个点击按钮 |
| <datalist>New | 指定一个预先定义的输入控件选项列表 |
| <keygen>New | 定义了表单的密钥对生成器字段 |
| <output>New | 定义一个计算结果 |
常见的表单元素：
表单基本结构--<form>标签
语法：
<form action="表单提交地址" method="提交方法">
文本框、按钮等表单元素…
</form>
注意：
action属性： 如果为空则代表向当前页面提交
method属性：可选值 post、get
get方法提交参数在地址栏可见
post方法一般用于多数据、保密数据提交
post方法一般用于多数据、保密数据提交
表单基本元素-<input>标签
多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。
语法：
<input name="表单元素名称" type="类型" value="值" size="显示宽度" maxlength=“最大长度" checked="是否选中" />
注意 :
type属性：可选值 text （默认）、password、button、checkbox、radio等
checked属性：仅与<input type="checkbox"> 或<input type="radio"> 配合使用，选中值为checked
HTML 表单 - 输入元素：
| type | 功能 | 例子 |
| text | 单行文本输入 | <input type="text" name="username" /> |
| password | 密码 | <input type="password" name="password" /> |
| radio | 单选 |
<input type="radio" name="gender" value="male" />男
<input type="radio" name=" gender" value="female" />女
|
| checkbox | 多选 |
<input type="checkbox" name="hobby" value="reading" /> 阅读
<input type="checkbox" name="hobby" value="drawing" />绘画
|
| button | 普通按钮 | <input type="button" value="播放音乐" /> |
| reset | 重置表单数据 | <input type="reset" value="重置" /> |
| submit | 提交表单数据 | <input type="submit" value="提交" /> |
| file | 文件上传 | <input type="file" name="files" /> |
| hidden | 隐藏域（数据隐藏提交） | <input type="hidden" name="name" value="1" /> |
PS：
HTML <input> value 属性：
value 属性规定 <input> 元素的值。
value 属性对于不同 input 类型，用法也不同：
- 对于 "button"、"reset"、"submit" 类型 - 定义按钮上的文本
- 对于 "text"、"password"、"hidden" 类型 - 定义输入字段的初始（默认）值
- 对于 "checkbox"、"radio"、"image" 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。
注意：value 属性不适用于 <input type="file">。
在后台如果你想得到复选框的内容 就是value 来取。
当你在接收表单数据的页面中获取数据时，得到的就是value的值。
name-value：
- name是控件的名称（多个控件可以取同一个名称），value是控件的值
- 并不是所有控件的 value 都会显示出来，比如 checkbox, radio, hidden
- 定义控件的 name 和 value 就可以在服务器上获取这个控件和它的值
- 没看到 submit 的 name，并不表示浏览器忽略了它的 name，在提交之前它也被浏览器定义了 name，在服务器上一样可以得到它的 name 和 value
- 控件不定义 name / value 也可以显示，只是为了方便在服务器接收和区别，才定义它的 name/value，当然按钮的 value 不光是存放它的值，也用来显示
列表框
<select name="指定列表名称" size="显示的行数">
<option value="选项值" selected="selected">…</option>
<option value="选项值" >…</option>
</select>
文本域
<textarea name="... " cols="列宽" rows="行宽">
文本内容
</textarea>
表单的高级用法2-1
关联表单元素（表单元素的标注）
语法：
<label for="关联元素ID"> </label>
示例_点击 label 标签鼠标聚焦文本框中：
<label for="username">姓名: </label>
<input name="name" id="username" size="20"/>
或
<label >姓名:<input name="name" size="20"/> </label>
表单的高级用法2-2
只读属性
readonly：希望某个框内的内容只允许用户看，不能修改
禁用属性
disabled：因没达到使用的条件，限制用户使用
示例：
用户须知：
<textarea readonly="readonly">
用户需遵循以下协定： xxxxx
</textarea>
<input type="submit" name="register" value="注册" disabled="disabled"/>
1.普通表单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="" method="post">
<!--文本框、密码框-->
<p>用户名：<input name="name" type="text" value="Fatli" /></p>
<p>密 码：<input name="password" type="password" /></p>
<!--单选按钮、复选框-->
<p>
性别：
<input name="gender" type="radio" value="man" />男
<input name="gender" type="radio" value="woman" />女
<!--对表单元素进行标注（增强鼠标的可用性）-->
<input name="gender" type="radio" value="anthor" id="anthor" />
<label for="anthor">其他</label>
</p>
<p>
爱好：
<input name="insterest" type="checkbox" value="sports" checked="checked"/>运动
<input name="insterest" type="checkbox" value="it" />IT
<input name="insterest" type="checkbox" value="it" />音乐
</p>
<!--列表框-->
<p>
出生日期：
<input name="birthYear" size="2" maxlength="4" />年
<select name="birthMonth">
<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>
<option value="10">十月</option>
<option value="11">十一月</option>
<option value="12">十二月</option>
</select>月
<input name="birthDay" size="2" maxlength="4" />日
</p>
<!--按钮-->
<p>
<input type="button" name="butButton" value="button按钮"
onClick="alert(this.value)">
<input type="submit" name="butSubmit" value="submit按钮">
<input type="reset" name="butReset" value="reset按钮">
</p>
</form>
</body>
</html>
2.多行文本域
<!--多行文本域-->
<form action="" method="post">
<p>
自我评价：<br />
<textarea name="textarea" cols="10" rows="2"></textarea>
</p>
</form>
3.文件域
<!--文件域-->
<!--提交包含文件域的表单时，由于提交的表单数据包括普通的表单数据、文件数据等多部分内容，所以必须设置表单的 "enctype" 编码属性为 "multipart/form-data"，表示将表单数据分为多部分提交-->
<form action="" method="post" enctype="multipart/form-data">
<p>
<input type="file" name="files" /><br />
<input type="submit" name="upload" value="上传" />
</p>
</form>
4.隐藏域（表单数据隐藏提交，用 method="get" 提交可以在地址栏看到提交的参数）
<!--隐藏域-->
<form action="" method="get">
<!--文本框、密码框-->
<p>用户名：<input name="name2" type="text" /></p>
<p>密 码：<input name="password2" type="password" /></p>
<p><input type="submit" value="提交" /></p>
//将隐藏域的 name 属性命名为 userid，而 value 属性的值就对应为用户的 userid
<p><input type="hidden" name="userid" value="666" /></p>
</form>
5.表单的只读与禁用
<!--表单的只读（eg协议）与禁用（eg先同意协议再注册）设置-->
<form action="" method="get">
<p>用户名：<input type="text" name="name3" value="Xenia(只读)" readonly /></p>
<p>
用户须知：<br />
<textarea cols="20" rows="10" readonly>
用户需遵循以下协定（Fatli CO.,LTD.保留最终解释权）：
一、xxxxx
二、xxxxx
</textarea>
</p>
<p><input type="submit" name="register" value="注册" disabled="disabled"></p>
</form>
6.语义化的表单
<!--语义化的表单:页面结构更合理、见名知义、更符合Web标准-SEO优化-->
<!--未使用语义化的标签-->
<table>
学生信息表<br />
<tr>
<td>姓名</td>
<td>职务</td>
</tr>
<tr>
<td >张三</td>
<td >班长</td>
</tr>
</table>
<!--使用语义化的标签-->
<table width="270">
<caption>学生信息表</caption>
<thead>
<tr>
<th>姓名</th>
<th>职务</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">张三</td>
<td align="center">班长 </td>
</tr>
</tbody>
</table>
<br />
<!--未语义化的表单-->
<form>
用户信息：<br />
姓名：<input type="text" />
年龄：<input type="text" /><br />
手机：<input type="text" />
邮箱：<input type="text" />
</form>
<br />
<!--语义化的表单-->
<form>
<fieldset>
<legend>用户信息：</legend>
姓名：<input type="text" />
年龄：<input type="text" /><br />
手机：<input type="text" />
邮箱：<input type="text" />
</fieldset>
</form>
======================================================优雅的分割线=================================
——END
扫一扫
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
