HTML5中的表单元素标签

所有要求输入的表单控件验证：

<input type="text" required> //必须填写一个值

<input type="number" min="10" max="100"> //限定在某一个范围内

<input type="text" placeholder="请输入区号+座机" required pattern="^[\d]{2,4}\-[\d]{6,8}$"> //使用正则表达式

<form action="http://li.cc" novalidate> //禁止表单验证

一、form的几个属性：

action：表示表单提交的页面

method：表示表单的请求方式，有 POST 和 GET 两种，默认 GET

accept-charset：规定服务器可处理的表单数据字符集。这个在IE上不支持，在IE上要用onsubmit="document.charset=‘utf-8‘;"表示：

<form method="post" action="" accept-charset="utf-8" onsubmit="document.charset=‘utf-8‘;"></form>

enctype：表示浏览器对发送给服务器的数据所采用的编码格式。 有三种：application/x-www-form-urlencoded(默认编码，不能将文件上传到服务器)、multipart/form-data(用 于上传文件到服务器)、text/plain(未规范的编码，不 建议使用，不同浏览器理解不同)

name：设置表单名称，以便程序调用

target：设置提交时的目标位置：_blank、_parent、_self、_top

autocomplete：设置浏览器记住用户输入的数据，实现自动完成表单。有“on”和“off”两个值，默认为on。

novalidate：设置是否执行客户端数据有效性检查。

二、input的几个属性：

name：定义 input 元素的名称，以便接收到相应的值

value：该input的默认值。

type：input 元素的类型

autofocus：单属性，让光标聚焦在某个input 元素上，让用户直接输入

disabled：单属性，禁用 input 元素

autocomplete：单独设置 input 元素的自动完成功能

form：让表单外的元素和指定的表单挂钩提交

<form method="get"> ... </form>  
<input name="email" form="register">

inputmode：定义在移动设备中获取焦点时的虚拟键盘样式

none     ：不使用虚拟键盘，这个时候页面需要使用自定义的键盘代替
text     ：默认值，会显示标准输入键盘
decimal  ：小数表示键盘，除了数字之外可能会有小数点 . 或者千分符逗号 ,。
numeric  ：显示0-9的数字键盘。
tel      ：手机数字键盘，会有星号 * 或者井号 # 键。
search   ：提交按钮会显示 'search' 或者 ‘搜索’。
email    ：键盘上会有 @ 符号键。
url      ：键盘上会有斜杠 / 符号键

enterkeyhint：定义在移动设备上按下回车键的操作

done      ： 完成并关闭输入法编辑器
enter     ： 换行
go        ： 输入完并继续下一个表单
search    ： 输入后搜索内容
send      ： 发送消息
next      ： 将把用户带到下一个接受文本的字段
previous  ： 将用户带到将接受文本的上一个字段

三、select：下拉列表：

name：设定提交时的名称

disabled：将下拉列表禁用

form：将表单外的下拉列表与某个表单挂钩

size：设置下拉列表的高度，多少行

selected：单属性，设置初始化时默认选择

multiple：单属性，设置是否可以多选

autofocus：获取焦点

required：单属性，选择验证，设置后必须选择才能通过

<select name="fruit">

<option value="1">苹果</option>

<option value="2">橘子</option>

</select>

select的子标签：

option：提供具体的选项。

optgroup：对下拉列表中的option进行分组

<optgroup label="水果类">

<option value="1">苹果</option>

<option value="3" label="香蕉" selected>香蕉</option>

</optgroup>

label为分组的名字，默认为粗体斜体显示。

四、textarea：多行文本框：

name：设定提交时的名称

form：将表单外的多行文本框与某个表单挂钩

readonly：设置多行文本框只读

disabled：将多行文本框禁用

maxlength：设置最大可输入的字符长度

autofocus：获取焦点

placeholder：设置输入时的提示信息

rows：设置行数

cols：设置列数

wrap：设置是否插入换行符，有soft(默认)和hard两种，前者不会提交输入框中的换行，后者会把换行转换成换行符进行提交。

required：单属性，设置必须输入值，否则无法通过验证

五：label：表单空间的说明标签。可以关联input，让用户体验更好，且更加容易设置 CSS 样式。

两种用法：

<label for="user">用户名：</label><input name="user">

<label>用户名：<input name="user"></label>

作用是点击“用户名”三个字光标直接移到该input控件内进而可以进行输入。

六、fieldset：对表单进行分组。该标签会把包含的表单元素用一个有边框的方块包起来。

<fieldset><input>....</fieldset>

属性为：

name：给分组定义一个名称

form：让表单外的分组与表单挂钩

disabled：禁用分组内的表单

七、legend：添加分组说明标签，给分组加上一个标题

<fieldset> <legend>注册表单</legend></fieldset>
显示效果为fieldset的上访边框中间显示，即用legend的文字内容代替一部分边框。

八、button：添加按钮 标签对之间的文字为按钮上显示的文字内容按钮显示内容。

submit：表示按钮的作用是提交表单，默认

reset：表示按钮的作用是重置表单，表单内容会重置为value的默认值。

button：表示按钮为一般性按钮，没有任何作用

如果button元素的属性type值为submit时，还会提供额外的属性：

form：指定按钮关联的表单

formaction：覆盖form元素的action属性

formenctype：覆盖form元素的enctype属性

formmethod：覆盖form元素的method属性

formtarget：覆盖form元素的target属性

formnovalidate：覆盖form元素的novalidate属性

九、output：计算结果：

<form oninput="res.value = num1.valueAsNumber * num2.valueAsNumber">

<input type="number"> x <input type="number">

<output for="num1 num2" name="res">

</form>

for属性写出所有参与计算的id，form中oninput中的res为output的name值。

十、datalist元素规定输入域的选项列表(可以修改内容的下拉列表)。

列表是通过datalist内的option元素创建的。用输入域(input)的list属性引用datalist的id把 datalist绑定到输入域

<input type="url" list="url_list" name="link" />

<datalist>

<option label="W3School" value="http://www.W3School.com.cn" />

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>