HTML表单域

什么是表单

HTML 表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与Web服务器的交互。

表单是控件的容器，一个表单由form元素、表单控件和表单按钮三部分组成：

1） form元素：用来创建表单，并通过 action、method和enctype三个属性，来设置表单的提交路径、提交方式、编码类型。

主要属性

1）action ： 属性值是URL，规定当提交表单时应该思想何处提交数据，为空时表示在当前页面操作；

2）method ：表单数据的提交方式，规定用何种方式将表单数据提交到action属性指定的页面；
3）enctype ：表单数据的编码方式；
4）name ：表单名称

包括post和get两种，分别对应POST和GET两个函数

post和get区别在于：get数据量小于1024KB，且表单提交时会在地址域显示表单数据域的数值；而post不受数据量的限制，且不会在地址栏显示表单域数据，一般在开发中较多采用

2） 表单控件：主要用来收集用户数据，包括 label、input、textarea、select、datalist、keygen、progress、meter、output等，也包括对表单控件进行分组显示的 fieldset 和 legend 控件。根据功能的不同，input 控件又分为 text、password、radio、checkbod、file、submit、reset、search、tel、url、email、number、range、color、Date Pickers等类型。
如下图

3） 表单按钮：包括提交按钮、重置按钮和一般按钮。提交按钮和一般按钮可用于把表单数据发送到服务器，重置按钮用于重置表单，把整个表单恢复到初始状态。

任何HTML表单，都由 form 元素创建，即以 标签开始， 标签结束，在 和 之间，是表单所需要的控件和按钮。

每一个表单控件都有一个 name 属性，用于在提交表单时，对表单数据进行识别。访问者通过提交按钮提交表单，表单提交后，他们填写的数据就会发送到服务器端进行处理。如，用户登录的表单：

<form action="login.asp" method="post">
    <label>用户名: </label><input type="text" name="username" />
    <label>密码: </label><input type="password" name="password" />
    <input type="submit" value=" 登 录 " />
    <input type="reset" name="" id="" value="取消">
</form>

HTML5新增表单控件和表单属性
新的输入性表单控件:
写在input里
email：电子邮箱文本框,跟普通的没什么区别

 - 当输入不是邮箱的时候,验证不通过

 - 移动端的键盘会发生变化

tel：电话号码

url：网页的URL

search：搜索引擎

- chrome下输入文字后，会多出一个关闭的X

range：特定范围内的数值选择器

- min、max、step(步数)

- 例子： 用js来显示当前数值

number：只能包含数字的输入框

- 输入框末尾有两个箭头 上为加 下为减

color：颜色选择器

• 点击显示颜色版

datetime：显示完整日期

• 类似select选择样式

datetime-local：显示完整日期， 不包含时区

time：显示时间，不含时区

date：显示日期{年月日}

week：显示周{年月日周}

mouth：显示月{年月}

新的表单特性和函数

placeholder：输入框提示信息

- 例子：微博的密码框提示

autocomplete

- 默认为on，关闭提示选择off

autofocus：指定表单获取输入焦点

list和datalist：为输入框构造一个选择列表

- list值为datalist标签的id

required：此选项必填， 不能为空

Pattern：正则验证

- pattern=“\d{1,5}”

Formaction在submit里定义提交地址

<input type="text"
  placeholder="请输入4-16个字符" // 输入框内显示
  autocomplete="off" // 是否记录输入的值
  autofocus // 聚焦
  required // 输入框不能为空
  pattern="\d{1,5}" // 必须输入1到5个数字
 />
//  required 和 pattern 具有安全隐患 如果在控制台修改input的pattern和required 那么就可以破除校验

// 如果用户在某个页面输入相当多的数据，临时有事需要离开一段时间，此时数据应该保存至草稿箱，那么同一个form表单下，将会有两个不同地址的sumbit提交 ope浏览器已支持 其余浏览器可能不支持
<form action="https://www.baidu.com">
  <input type="text">
  <input type="submit" value="提交" />
  <input type="submit" value="保存至草稿箱" formaction="http://www.miaov.com"/>
</form>

label 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
label标签的 for 属性应当与相关元素的 id 属性相同。

select 元素可创建单选或多选菜单。

select 元素中的 option标签用于定义列表中的可用选项。

textarea 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。