New attributes for HTML5 forms

Newly added unique attributes of the Input tag

1)autofocus attribute

Demo: <input type ="text" autofocus="autofocus"/> This attribute can set the input tag in the current page to gain focus after it is loaded.

2) max, min, step These have been introduced above, and they are all related to numbers.

3) placeholder:Prompt information attribute, with demo on it.

4) multiple: Used for file upload control. After setting this property, multiple files are allowed to be uploaded.

5)Validation attribute: Setting the required attribute indicates that the current text box must have data input before submission, and all this is automatically completed by the browser.

This is as cool as when using Jq Validate. And also added: pattern regular expression verification.

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

6) Another big improvement is the addition of the form attribute, which is That is to say, any tag can specify that it belongs to a form, rather than having to be wrapped in <form></form>.

Let’s take a look at the demo: <input type="text" form="demoForm" name="demo"/>

Form form tag newly added attributes

1) The novalidate attribute specifies that the form or input field should not be validated when submitting the form.

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

2)autocomplete Attributes specify form Or the input field should have autocomplete functionality.

<body>
<!--
placeholder:用于在文本框未輸入時(shí)提示作用
autofocus:用于控件自動獲取焦點(diǎn)
-->
<input type="search" name="key" value="" results="s" placeholder="君樂寶" autofocus="true">
<input type="button" name="" value="搜索">
<br>
<!--
novalidate:在控件中加入了required、emial、url等驗(yàn)證后，如果想讓這些驗(yàn)證失效，可以在表單中將novalidate設(shè)置為tyue
-->
<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
    <!--
required:必填
autocomplete:在網(wǎng)頁的文本框中輸入部分內(nèi)容或者雙節(jié)時(shí)，經(jīng)常會看到在下面顯示輸入過的內(nèi)容，
這就是html5的新特性：自動完成，如果不想使用此功能，將其設(shè)置為off即可
-->
    <input type="text" name="UserName" value="" required autocomplete="off">
    <br>
    <!--
multiple:在選擇文件時(shí)，默認(rèn)只能單選，加上這個(gè)屬性后，則可以使用鼠標(biāo)選中多個(gè)文件進(jìn)行上傳
   -->
    選擇文件
    <input type="file" name="upload" value="" multiple="multiple">
    <br>
    <!--
list：這個(gè)屬性要和datalist元素一起使用，指定此文本框的可選擇項(xiàng)，另外其相較于select的優(yōu)點(diǎn)在于還可以輸入
   -->
    區(qū)號：
    <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:可以更改點(diǎn)擊此按鈕式提交到服務(wù)器的處理程序
formmethod:可以更改向服務(wù)器提交數(shù)據(jù)的方式
   -->
    <input type="submit" name="subsave" value="提交">
    <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
</form>
</body>

Continuing Learning