共计 2892 个字符，预计需要花费 8 分钟才能阅读完成。
这一篇介绍 html5 新增的表单元素和表单属性。
首先先说一个 html5 中表单新增的一个性能，在咱们之前的 html 中，表单元素必须放在 form 元素所蕴含的外面，在 html5 中，能够把他们写在页面上的任何一个中央，而后给该元素减少一个 form 属性，form 属性的值为 form 表单的 id，如下：
<form method="get" id="test">
<input type="text" name="name"/>
<input type="password" name="password"/>
<input type="submit" value="提交">
</form>
<input type="text" name="confirm" form="test"> 在 form 元素外面的表单元素能够不必增加 form 属性，如果你想利用 form 获取所有表单元素的值，那么在 form 元素里面的表单元素就必须增加 form 属性，input、select、textarea 等元素都满足该性能。
接下来开始介绍 html5 新增的表单元素，所有例子均用谷歌浏览器展现。
新增表单元素
email： 提交表单的时候验证输出值是否满足 email 的格局
<input type=”email” name=”email”/>
url： 提交表单的时候验证输出值是否满足 url 的格局
<input type=”url” name=”url”/>
number： 依据你的设置提供抉择数字的性能，其中 min 为最小值，max 为最大值，value 为默认值，step 为点击箭头时数字的变动量，max、min、step、value 均可不写，目前某些浏览器还不反对。
<input type=”number” name=”number” min=2 max=100 step=5 value=”15″/>
range： 会以一个滑块的模式体现蕴含肯定范畴内数字值的输出域，max 为最大值，min 为最小值，value 为默认值，如果没有设置 max 和 min，默认值是 1 -100
<input type=”range” name=”range” min=20 max=200 value=”60″/>
日期和工夫类型
date： 选取日、月、年
<input type=”date” name=”date”/>
month： 选取月、年
<input type=”month” name=”month”/>
week： 选取周、年
<input type=”week” name=”week”/>
time： 选取小时、分钟
<input type=”time” name=”time”/>
datetime： 选取工夫、日、月、年 (UTC 工夫)（我这里浏览器显示不出成果）
<input type=”datetime” name=”datetime”/>
datetime-local： 选取工夫、日、月、年 (本地工夫)
<input type=”datetime-local” name=”datetime-local”/>
search： 用于搜寻域，若加上 result=”s” 属性，则会在搜寻框后面加一个搜寻图标（我这里浏览器显示不出成果）
<input type=”search” name=”search” result=”s”/>
tel： 验证输出的是否是电话号码的格局（我这里浏览器显示不出成果）
<input type=”tel” name=”tel” />
color：color 类型会提供色彩拾取器，供用户抉择色彩，并将用户抉择的色彩填充到此元素中
<input type=”color” name=”color”/>
新增 input 属性 (局部容易了解的就不进行代码演示了)，前面为反对该属性的元素
autofocus： 在关上页面时使元素主动获取焦点 //input,button,select,textarea
placeholder: 在用户输出时进行提醒 // input,textarea
form： 这篇文章的结尾就有这个属性，它用于表明元素属于哪个表单，无论元素的地位在哪里，所属表单都能获取该元素的值 //input,output,button,select,textarea,fieldset
required： 表明该元素是必填项，当提交表单的时候会主动验证该元素的内容是否不为空 //input,textarea
max/min/step： 限度值的输出范畴，以及值的变动水平。下面的新增 number 元素有介绍。//input
autocomplete： 使 form 元素或者 input 元素领有主动实现性能，既记录用户之前输出的值，敞开为 off，默认为 on。//form,input
表单重写属性： //input
formaction: 重写表单的 action 属性
formenctype: 重写表单的 enctype 属性。
enctype 属性治理的是表单的 MIME 编码，MIME 就是一种电子邮件传输的互联网规范，表明传递的信息类型和编码，共有三个值可选：
1，application/x-www-form-urlencoded（默认），设置表单传输的编码。
2，multipart/form-data，指定传输数据的非凡类型，次要就是上传的非文本内容，比方文件、图片。
3，text/plain，纯文本传输。
formmethod: 重写表单的 method 属性
formnovalidate: 重写表单的 novalidate 属性
formtarget：重写表单的 target 属性。
比方:
<form action="test.html" method="get" autocomplete="on">
姓名: <input type="text" name="name" /><br />
明码: <input type="password" name="pwd" /><br />
<input type="submit" formnovalidate="true" value="提交未经验证"/>
</form>multiple: 规定输出字段可抉择多个值 //input,select
list：list 属性的值为 datalist 元素的 id，datalist 元素相似于抉择框，在文本框取得焦点的时候以提醒输出的形式显示。如下：
姓名：<input type="text" name="name" list="name"/>
<datalist id="name" >
<option value="zhangsan"> 张三 </option>
<option value="lisi"> 李四 </option>
<option value-"wanger"> 王二 </option>
</datalist>
pattern: 验证 input 输出域的格局，即正则表达式。
<input type=”text” name=”name” pattern=”[A-z0-9]{8}”/>
