标签：datalist Enctype 文字 pes efault 服务器 快速 document complete
表单内容可以放在表单标签之外，这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下，只要指定元素适用于哪个表单即可，如下：
1 <form id="test" action="test.php" method="get"> 2 <input form="test" type="text" name="name"/> 3 </form> 4 <input form="test" type="submit" value="确定"/>
在HTML5之前，一个表单只能填写一个action及一个method，在HTML5中每个提交按钮都可以指定自己的action及method，如下：
1 <!-- HTML5以前的表单写法 --> 2 <form action="test.php" method="get"> 3 <input type="text" name="name"/> 4 <input type="submit" value="确定"/> 5 </form> 6 <!-- HTML5的表单写法 --> 7 <form> 8 <input type="text" name="name"/> 9 <input type="submit" value="确定POST" formaction="test1.php" formmethod="post"/> 10 <input type="submit" value="确定GET" formaction="test2.php" formmethod="get"/> 11 </form>
enctype属性规定在发送到服务器之前应该如何对表单数据进行编码。
同上，enctype也可以针对每个提交按钮进行指定，使用formenctype即可。
类似于<a>标签的target属性，form标签的target属性控制提交数据之后，action指向的地址的打开方式，其可填写的值于<a>标签的值意义和写法完全一致，默认为_self。
同上，每个提交按钮也可以配置自己的target，使用formtarget即可。
使用该属性，可以在页面打开时将焦点自动设定到设置了该属性的组件上。
<input type="text" name="name" autofocus/>
指示输入字段的值是必需的，如果不填值就提交会出现提示并且也不会有提交的动作发出。
<input type="text" name="name" required/>
在我们使用单选框或复选框时，一般这个后面都会跟上一段文字，但是我们点击这段文字时却是无效的，label可以用来将文字和指定的单选框、复选框或者任意的控件进行绑定，我们可以点击文字就如同点击到对应的控件一般：
1 <!-- 直接包含写法 --> 2 <form> 3 <label> 4 <input type="checkbox" value="value"> 5 请选择这个复选框 6 </label> 7 </form> 8 <!-- 通过for进行指定 --> 9 <form> 10 <input type="checkbox" value="value" id="cb"> 11 <label for="cb">请选择这个复选框</label> 12 </form>
标签的control属性指定了标签包含或指向的控制对象，可以通过获取该属性来拿到对应的控件，如果标签包含了多个控件，则该属性表示第一个控件。
1 <script> 2 function setDefault() { 3 var label = document.getElementById("label"); 4 var input = label.control; 5 input.value = "123456"; 6 } 7 </script> 8 <form> 9 <label id="label"> 10 <input type="text"> 11 </label> 12 <input type="button" value="点击设定默认值" onclick="setDefault()"> 13 </form>
输入框指定了该属性后，会作为一个提示文字在输入框没有输入时显示。
<input type="text" placeholder="请输入手机号">
在HTML5中可以通过datdlist来定义一个带有下拉提示的输入框，如下：
1 <form> 2 <input type="text" list="dl"> 3 <datalist id="dl"> 4 <option value="HTML5">HTML5学习</option> 5 <option value="Android">Android学习</option> 6 <option value="IOS">IOS学习</option> 7 </datalist> 8 </form>
除了可以输入预订的信息外，还可以输入任意的信息。
在使用了autocomplete标记的输入框进行过一次提交之后，下一次再次输入会出现上次输入的文本，可以实现快速补齐的功能。
1 <form action="test.php" method="get" autocomplete="on"> 2 <input type="text"> 3 <input type="submit"> 4 </form>
pattern属性可以设定为一个正则表达式，为输入框设定了pattern属性之后，在提交时会对输入的文本进行检查，当发现不能匹配时会进行提示：
1 <form action="test.php" method="get"> 2 <input type="text" pattern="[A-Z]{3}" name="part"> 3 <input type="submit"> 4 </form>
上面的示例，只有在输入3个大写字母之后才能进行正确提交。
在HTML5中，对input元素的种类进行了增加，用url类型来作为说明，使用了url类型，则在提交时，会验证填写的内容是否为url地址，实际上是方便了开发者，免去了常用的验证代码的编写。
新增种类如下：http://www.w3school.com.cn/html5/html_5_form_input_types.asp
有个不好的地方是，每个浏览器对新类型的外观设计都是不一样的，所以为了追求统一性，在大网站上，还是需要使用风格统一的类型，比如日期选择器等，个人感觉在编写快速小应用时可以使用到这些新增的类型。
标签：datalist Enctype 文字 pes efault 服务器 快速 document complete
原文地址：http://www.cnblogs.com/hammerc/p/6368504.html
