HTML5--表单

HTML5新的Input类型

email 用于提交应该填写e-mail的输入框

E-mail:<input type="email" name="email">

提交表单时会自动验证输入的是否满足email格式。

url专门输入url的输入框

URL:<input type="url" name="url">

number应包含数值的输入框

number: <input type="number" name="number" min="1" max="10" />

它拥有四个属性
max:最大值
min:最小值
step:数字间隔
value:初始值

range包含一定范围内的数字

range: <input type="range" name="range" min="1" max="10" />

它也拥有四个属性，和number一样

Date Pickers
拥有多个可供选择的日期和时间类型
date:选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

<input type="date"><input type="week">

search
用于搜索域，比如站点搜索或者GOOGLE搜索。

search:<input type="search" name="search">

另外还有一个color，不过目前支持的浏览器太少。

新的表单元素

datalist元素
规定输入域的选项列表。
把datalist绑定到输入域，使用输入域的list属性已用datalist的ID：

Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list">    <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>

如果不写前面的输入域则看不到任何下拉，他们一般都是配合使用的。

output
定义不同的输出
属性
for : 定义输出域相关的一个或多个元素
form ： 定义输入字段所属的一个或多个表单
name : 就是name
看个栗子

<form action="" oninput="num.value = parseInt(num1.value) + parseInt(num2.value)">    <input type="number" name="num1"> +    <input type="number" name="num2"> =    <output name="num" for="num1 num2"></output></form>

num1 和 num2 分别输入不同的数值，然后通过 form表单的 oninput事件将值赋给num
outout的for 是表明和它相关的两个元素 num1和num2

keygen
目前浏览器对该元素的支持度太低，所以你们懂的。

HTML5表单新属性

autocomplete:规定form或者input是否拥有自动完成功能。
理解一下：其实这个功能就是你在输入填完一个值提交表单后，下此在操作此输出框时会不会自动提示之前你输入过的内容
还不理解，看图

就是 红色框中的东西。
两个值：true 和 false

只使用input的新属性

autofoucus:页面加载时，输入域自动地获得焦点。（同一个表单给多个input加autofocus只会第一个显示）
form
规定输入域所属的一个或多个表单。（默认属于当天form）
可以将input卸载form标签之外，通过form属性在指向相应的form表单。
form override attributes（重写表单属性）
formaction:重写标点的action
formenctype
formmethod
formnovalidate
formtarget

<form action="demo_form.asp" method="get" id="user_form">E-mail: <input type="email" name="userid" /><br /><input type="submit" value="Submit" /><br /><input type="submit" formaction="demo_admin.asp" value="Submit as admin" /><br /><input type="submit" formnovalidate="true" value="Submit without validation" /><br /></form>

上面代码在点击不同按钮是，修改了form不同的属性。
height和width

<input type="text" width="100px" height="100px">

list
list 是和 datalist连用的，因为单用datalist并没有任何效果，datalist必须要和一个输入框一起使用，list是连接他们的

Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list">    <option label="W3Schools" value="http://www.w3school.com.cn" />    <option label="Google" value="http://www.google.com" />    <option label="Microsoft" value="http://www.microsoft.com" /></datalist>

min、max、step
不解释了
multiple

<input type="file" multiple>

这样可以同时提交多个文件。
输入域中可以学着多个值
适合file，select 等 可以选择多个值。
pattern
理解为input域的验证规则

<input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />

placeholder
输入框的默认提示
非常常用不解释了
required
当前输入框不能为空。

Name: <input type="text" name="usr_name" required="required" />