HTML5 INPUT and html5input

HTML5 INPUT and html5input

Many new attributes are added to the HTML5 input tag, which is also a very exciting thing for everyone. A simple attribute is used to handle complicated JS verification in the past. These new attributes of input make the division of labor between html and js clearer and easy to use.
Let's take a look at the new attributes of input:
Add property 1: autoconmplete
Autoconmplete can be assigned an on or off value. When it is on, the browser can automatically store user input content. When the user returns to the page that has filled in the value, the browser can automatically fill in the value that has been written by the user in the corresponding input box.
Now many websites have implemented this function, but it is basically implemented using php. Using this attribute can undoubtedly reduce the communication volume and workload between the front-end and backend.
Add property 2: autofocus
Autofocus can be assigned an autofocus value, that is, the input tag is automatically focused when the page is loaded. The type = "hidden" cannot be used. This is also a common effect, so far the implementation method is to use js. When the page is loaded, the focus operation is executed, and now it is done by an attribute.
As you can imagine, there is only one input tag on a page that sets autofocus. Otherwise, the expected results will not be achieved. Because it is impossible for colleagues to focus on two inputs.
Add attribute 3: required
Input has a powerful new attribute, saving the trouble of verification. You can assign a value to required.
For example, the user name and password on the user registration page are required. You only need to set a required. In the past, JavaScript verification or background verification was required.
Note: here, the required attribute needs to be filled by the user, so the TYPE is button, submit, reset, image, and so on. This attribute cannot be used if you do not need to fill in the selected TYPE.
New attribute 4: placeholder
This new property is also very useful. It is used when type = text email and so on, and prompts the user to enter the format or content of the information. This effect was previously implemented by js. Is a common effect:

Name:

 

Address:

HTML5 INPUT new attribute
Add attribute 5: add the list Attribute-Lenovo box Effect
This property is similar to the Lenovo box effect in the baidu search box and is also a very practical property.
Note: The corresponding datalist tag is required. The datalist sub-tag option supports the value and lable attributes. The list attribute value must be consistent with the datalist id.
Example (supported by opera)