文章目录
二HTML5表单
1.输入类型
<input type="email" name="user_email" />
故名思议这个类型是验证email的输入格式，文本中必带“@.”要不然验证便不能通过。
url
<input type="url" name="user_url" />
url类型用于包含URL地址的输入域，比如XXXXX.com.
number
<input type="number" name="points" min="1" max="10" />
number类型用于需要填入数值的的输入域。
range
<input type="range" name="points" min="1" max="10" />
range类型用于需要填入一点数值的输入域，显示的时候为滑动条。（本人十分高兴不用写javascript验证啦
）
此表适用于number类型和range类型。
| 属性 | 值 | 描述 |
|---|---|---|
| max | number | 规定允许的最大值 |
| min | number | 规定允许的最小值 |
| step | number | 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） |
| value | number | 规定默认值 |
Date Pickers
<input type="date" name="user_date" />
就像一个时间控件一样好用，type类型可选month,week(显示为第几周),time,datetime,datetime-local。
浏览器支持
| Input type | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| No | 4.0 | 9.0 | 10.0 | No | |
| url | No | 4.0 | 9.0 | 10.0 | No |
| number | No | No | 9.0 | 7.0 | No |
| range | No | No | 9.0 | 4.0 | 4.0 |
| Date pickers | No | No | 9.0 | 10.0 | No |
| search | No | 4.0 | 11.0 | 10.0 | No |
| color | No | No | 11.0 | No | No |
对于浏览器支持我表示十分蛋疼，为了测试效果本人已拥有几大浏览器，兼容性始终是ＨＴＭＬ５的大敌。
2表单元素
datelist
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>
datelist元素规定输入域的选项列表（PS:本小程觉得还不如select来的有用，勿喷），其中option的value值必填。
keygen
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
output
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function resCalc()
{
numA=document.getElementById("num_a").value;
numB=document.getElementById("num_b").value;
document.getElementById("result").value=Number(numA)+Number(numB);
}
</script>
</head>
<body>
<p>使用 output 元素的简易计算器：</p>
<form onsubmit="return false">
<input id="num_a" /> +
<input id="num_b" /> =
<output id="result" onforminput="resCalc()"></output>
</form>
</body>
</html>
output用于接收显示各种类型。
浏览器支持
| Input type | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| datalist | No | No | 9.5 | No | No |
| keygen | No | No | 10.5 | 3.0 | No |
| output | No | No | 9.5 | No | No |
3表单属性
form元素属性
autocomplete（规定form域拥有自动完成功能）
novalidate
input元素属性
atutocomplete(规定input域拥有自动完成功能)
atutofocus（页面加载是自动获得焦点）
form（规定该输入域属于一个或多个表单）
form override(formaction,forenctype,formmethod,fromnovalidate,formtarget)（表单重写属性，允许您重写form元素的某些属性设定）
height和width
list（list属性规定输入域的datelist，datelist是输入域的选项列表）
min（用于包含数字或日期的input类型，允许最小值）
max（用于包含数字或日期的input类型，允许最大值）
step（用于包含数字或日期的input类型，规定合法的数值间隔）
multiple（multiple属性规定输入域中可选择多个值）
pattern(regexp)（规定用于验证input域的模式）
placeholder（提供一种提示（hint），描述输入域所期待的值）
required（提供一种非空验证）
浏览器支持
| Input type | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| autocomplete | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| autofocus | No | No | 10.0 | 3.0 | 4.0 |
| form | No | No | 9.5 | No | No |
| form overrides | No | No | 10.5 | No | No |
| height and width | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| list | No | No | 9.5 | No | No |
| min, max and step | No | No | 9.5 | 3.0 | No |
| multiple | No | 3.5 | No | 3.0 | 4.0 |
| novalidate | No | No | No | No | No |
| pattern | No | No | 9.5 | 3.0 | No |
| placeholder | No | No | No | 3.0 | 3.0 |
| required | No | No | 9.5 | 3.0 | No |
（ps:至今为止写过最长的东西，除了工作中的文档，累，求勿喷
）
）