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:用于在文本框未输入时提示作用
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>

Continuing Learning

new file

submit Reset Code

Automatic operation

New attributes for HTML5 forms

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]