Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

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>


Weiter lernen
||
<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>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492837 spielt ab