本文内容
HTML 5表单的组织方式
HTML 5表单的新增特性
访问表单控件及响应表单控件事件
HTML 5表单的组织方式
★ 将表单字段及其标签关联起来
<label>标签为input元素定义标注（标记）
label元素添加一个for属性，将其与某输入控件关联起来，这种方式已被普遍使用。
- <!--绑定方式 1-->
<label for="fName">请输入</label><input type="text" id="fName"><!--label元素的for属性值，应该与相关联的input元素id属性值一致-->
<!--绑定方式 1-->
<label>请输入<input="text"></label>
值得注意的是，不要为类型“hidden”的表单字段关联label元素，因为这是无意义的。
★ 按逻辑组织表单字段
使用fieldset将表单中的各控件进行分组，每组可以加一个legend元素用做分组的标题。
<h2>按逻辑组织表单字段</h2><hr/><p>使用fieldset将表单中的各控件进行分组，每组可以加一个legend元素用作分组的标题</p><form><fieldset><legend>Movie Rating</legend><inputtype="radio"id="Rating1"name="Rating">Excellent<br/><inputtype="radio"id="Rating2"name="Rating">Good<br/><inputtype="radio"id="Rating3"name="Rating"><labelfor="Rating3">Fair</label><br/><label><inputtype="radio"id="Rating4"name="Rating">Poor</label></fieldset></form>
拓展：
fieldset元素是可以嵌套。因此， 关于这方面的示例，我写了几个都没有实现理想的效果，作为大牛的你，分享下吧！）
HTML 5表单的新增特性
HTML 5新增的表单方法 HTML 5新增表单的伪类（pseudo-classes）
名称 | 名称 | |
select |
| :valid |
selectionStart |
| :invalid |
selectionEnd |
| :required |
setSelectionRange(start,end) |
|
|
注意：此处，valid为有效的，合法的，invalid为无效的，非法的；
HTML 5中新增的表单属性
autofocus | 当页面装载时，此元素应该拥有焦点 |
autocomplete | 此元素应该“记住”以前输入的值，同时能够自动提示 |
pattern | 指定用户输入的值，必须满足指定的正则表达式 |
placeholder | 显示于输入控件中的“灰色提示信息” |
novalidate，formnovalidate | 通知浏览器不要验证指定的元素或窗体的数据有效性 |
required | 此空间中必须有值 |
autocomplete
鼠标左键双击输入控件将会自动显示上次输入的文本；当输入时，输入内容和之前相 符合将会显示之前的输入文本；
<formmethod="get"action=""><label>Field: <inputtype="text"autocomplete="on"placeholder="支持自动完成"name="name"></label><!--注意为text类型的input添加name属性或id属性，可以更便捷的获取text的值，完成文本自动提示--><inputtype="submit"value="Submit"></form>
pattern
使用正则表达式完成对输入内容的验证
<formmethod="get"action=""><inputtype="text"name="patternTest"placeholder="请输入5为有效数字"title="请输入5为有效数字"pattern="^[0-9]{5}$"><inputtype="submit"></form>
novalidate 或 formvalidate
在整个窗体或控件范围内禁用数据验证功能。这一功能使用的典型场景是允许用户“暂存”当前状态（如邮箱保存到草稿箱），直到正式提交时再开始数据验证功能。
◇ 在 form标签中添加novalidate属性实现禁用数据验证
<formmethod="get"action=""novalidate><!--在form标签中添加novalidate属性，表示对该form中的输入内容不作验证--><inputtype="text"name="patternTest"placeholder="请输入5为有效数字"title="请输入5为有效数字"pattern="^[0-9]{5}$"><inputtype="submit"></form>
◇ 在 submit提交按键中添加formnovalidate实现禁用数据验证
<formmethod="get"action=""><inputtype="text"name="patternTest"placeholder="请输入5为有效数字"title="请输入5为有效数字"pattern="^[0-9]{5}$"><inputtype="submit"formnovalidate><!--在submit控件中添加formnovalidate属性，
1. 表示对该form中的输入内容不作验证-->
</form>
◇ 文本选择
使用selectionStart，selectionEnd和setSelectionRange方法可以很方便地选择文本控件中的文本。
<inputtype="text"id="textBox"size="40"value="I Love China!I Love China!I Love China!I Love China!">起始<inputtype="text"id="start"value="0"size="3">结束<inputtype="text"id="end"value="15"size="3"><!--size属性，定义input控件的宽度，单位为px--><buttononclick="selectBE()">以起始与结束位置方法确定选择选中内容</button><buttononclick="selectRange()">以Range方法确定选中内容</button><buttononclick="displaySelected()">显示选中信息</button> <script>function selectBE(){var input = document.getElementById("textBox"); input.selectionStart = parseInt(document.getElementById("start").value); input.selectionEnd = parseInt(document.getElementById("end").value);}function selectRange(){var input = document.getElementById("textBox");var start = parseInt(document.getElementById("start").value);var end = parseInt(document.getElementById("end").value); input.setSelectionRange(start, end);}function displaySelected(){var input = document.getElementById("textBox"); alert("Start:"+ input.selectionStart +"\n"+"End:"+ input.selectionEnd);}</script>
search
当前，各个版本的桌面浏览器都把它作为普通文本框处理。搜索字段的外观与常规的文本字段无异！
<inputtype="search"placeholder="这是一个搜索框！">
Web前端的一切事物都是因“机”而已！对于移动设备，会显示“搜索”输入面板供用户输入。
在桌面浏览器中，当用户输入无效的邮件地址时，部分浏览器会有提示：
另外，在手机等移动终端设备上，则会显示相应的输入面板
datalist
通过指定一个列表，可以在输入时给与用户相应，类似于提示“自动完成”功能。
示例
<inputtype="text"list="suggestions"><!--此处list的属性值应该与datalist id的属性值一致--><datalistid="suggestions"><option>my 1</option><option>my 2</option><option>my 3</option><option>others</option></datalist>
注意
在HTML中与datalist效果相近的另一个标签是select。
区别在于，select标签是只能在指定的选项中选择，而datalist可直接填入，也可以在给定的选项中选择。
progress
<progressvalue="50.0"max="200.0">1/4</progress><!--progress标签没有min属性-->
提示： IE 11也能够较好的支持progress属性。
meter
注释： Internet Explorer 不支持 meter 标签。
示例
<metervalue="20.0"min="0"max="100.0"low="20.0"high="90.0"optimum="60.0"> 1/5 </meter>
output
<output> 标签作为计算结果输出显示(比如执行脚本的输出)。
示例
<formoninput="z.value=parseInt(x.value)+parseInt(y.value)">0<inputtype="range"min="0"max="100.0"id="x">100 +<inputtype="number"id="y"value="50"> =<outputname="z"for="x y"></output></form><!--其中控件使用name属性或id属性作为标识都是可以的--><!--规范的标识应该是output控件使用name属性做标识，input控件使用id属性做标识-->
提示：IE对onput，number控件的支持并不好。
访问表单控件及响应表单控件事件
使用代码访问表单控件
document的forms属性包容页面上的所有表单
为form元素指定其name属性，之后就可以通过name访问它。
document.forms.formName //formName是form自定义的name属性值
另外，放在表单中的所有控件，也可以通过名字访问它。
document.form.formName.elementName
响应表单事件
对元素获得或失去焦点的动作进行控制。可以利用表单事件来改变获得或失去焦点的元素样式，这里所指的元素可以是同一类型，也可以是多个不同类型的元素，
在开发中，经常需要处理以下两种类型的事件：
1.控件获得与失去焦点事件；
2.表单提交与重置事件；
onfocus事件
获得焦点事件（onfocus）是当某个元素获得焦点时触发事件处理程序；
同时使用的。
示例
<script>function txtFocus(txtColor){ txtColor.style.backgroundColor ="#ff00ff";}function txtBlur(txtColor){ txtColor.style.backgroundColor ="#ffffff";}</script><formmethod="get"action=""> Username:<inputtype="text"onblur="txtBlur(this)"onfocus="txtFocus(this)"> Password:<inputtype="text"onblur="txtBlur(this)"onfocus="txtFocus(this)"></form>
onchange事件
失去焦点修改事件（onchange）是当前元素失去焦点并且元素的内容发生改变时触发事件处理程序。该事件一般在下拉文本框中使用。
<formname="form1"><inputtype="text"value="通过表单事件响应事件更改样式"name="txtField"size="50"><selectonchange="turnColors(this.value)"><optionvalue="red">turn red</option><optionvalue="green">turn green</option><optionvalue="blue">turn blue</option></select></form><script>function turnColors(color){/*form1.txtField.style.color = color; //简写对form1的访问*/ document.forms.form1.txtField.style.color = color;//全写对form1的访问}</script>
提交与重置事件
提交submit
表单提交事件（onsubmit）是在用户提交表单时（通常使用“提交”按钮，也就是将按钮的type属性设为submit），在 表单提交之前被触发 。
该事件的处理程序通过 返回false值来阻止 表单的提交。该事件可以用来验证表单输入项的正确性。
重置onreset
表单重置事件（onreset）与表单提交事件的处理过程相同，该事件只是将表单中的各元素的值设置为原始值。一般用于清空表单中的文本框信息。
示例
<script>function checkData(f){if(f.txtField.value ==""){//注意此处是判断txtField的值是否为空，因此应该用‘==’符号 alert("商品名称不能为空");returnfalse;}else{returntrue}}</script><formmethod="post"action=""onsubmit="checkData(this)"><inputname="txtField"type="text"placeholder="请输入商品名称"><inputtype="submit"></form>
