HTML5表单新增属性

Input标签新增加的特有属性

1)autofocus属性

              demo:<input type="text" autofocus="autofocus"/>  此属性可以设置当前页面中input标签加载完毕后获得焦点。

2)max,min,step这些上面都介绍过了,都是跟数字相关。

3)placeholder:提示信息属性,上面有demo。

4)multiple:用于文件上传控件,设置此属性后,允许上传多个文件。

5)校验属性:设置了required 属性后预示着当前文本框在提交前必须有数据输入,而这一切都是由浏览器自动完成。

             这跟使用Jq Validate的时候一样的爽。而且还添加了:pattern正则表达式的校验。

             demo:input type="text" autofocus="autofocus" required pattern="\d+" />

6)另外一个比较大的改进就是增加了form属性,也就是说,任何一个标签都可以指定它所属于一个表单,而不是必须在<form></form>进行包裹了。

且看demo:<input type="text" form="demoForm" name="demo"/>

Form表单标签新增加属性

1)novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

           demo:<form action="" method="POST" novalidate="true"></form>

2)autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

<body>
<!--
placeholder:用于在文本框未输入时提示作用
autofocus:用于控件自动获取焦点
-->
<input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true">
<input type="button" name="" value="搜索">
<br>
<!--
novalidate:在控件中加入了required、emial、url等验证后,如果想让这些验证失效,可以在表单中将novalidate设置为tyue
-->
<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
    <!--
required:必填
autocomplete:在网页的文本框中输入部分内容或者双节时,经常会看到在下面显示输入过的内容,
这就是html5的新特性:自动完成,如果不想使用此功能,将其设置为off即可
-->
    <input type="text" name="UserName" value="" required autocomplete="off">
    <br>
    <!--
multiple:在选择文件时,默认只能单选,加上这个属性后,则可以使用鼠标选中多个文件进行上传
   -->
    选择文件
    <input type="file" name="upload" value="" multiple="multiple">
    <br>
    <!--
list:这个属性要和datalist元素一起使用,指定此文本框的可选择项,另外其相较于select的优点在于还可以输入
   -->
    区号:
    <input type="text" name="age" value="" list="list1">
    <br>
    <datalist id="list1">
        <option value="0312">保定</option>
        <option value="0311">石家庄</option>
        <option value="010">北京</option>
        <option value="0313">唐山</option>
    </datalist>
    <!--
formaction:可以更改点击此按钮式提交到服务器的处理程序
formmethod:可以更改向服务器提交数据的方式
   -->
    <input type="submit" name="subsave" value="提交">
    <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
</form>
</body>


继续学习
||
<body> <!-- placeholder:用于在文本框未输入时提示作用 autofocus:用于控件自动获取焦点 --> <input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true"> <input type="button" name="" value="搜索"> <br> <!-- novalidate:在控件中加入了required、emial、url等验证后,如果想让这些验证失效,可以在表单中将novalidate设置为tyue --> <form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true"> <!-- required:必填 autocomplete:在网页的文本框中输入部分内容或者双节时,经常会看到在下面显示输入过的内容, 这就是html5的新特性:自动完成,如果不想使用此功能,将其设置为off即可 --> <input type="text" name="UserName" value="" required autocomplete="off"> <br> <!-- multiple:在选择文件时,默认只能单选,加上这个属性后,则可以使用鼠标选中多个文件进行上传 --> 选择文件 <input type="file" name="upload" value="" multiple="multiple"> <br> <!-- list:这个属性要和datalist元素一起使用,指定此文本框的可选择项,另外其相较于select的优点在于还可以输入 --> 区号: <input type="text" name="age" value="" list="list1"> <br> <datalist id="list1"> <option value="0312">保定</option> <option value="0311">石家庄</option> <option value="010">北京</option> <option value="0313">唐山</option> </datalist> <!-- formaction:可以更改点击此按钮式提交到服务器的处理程序 formmethod:可以更改向服务器提交数据的方式 --> <input type="submit" name="subsave" value="提交"> <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get"> </form> </body>
提交重置代码