HTML5 Combat Digest Chapter II HTML5 data binding and data validation for the input widgets used to create forms

Source: Internet
Author: User

The HTML5 form adds some handy features on top of the original form features, allowing us to implement some common form widgets, input types, and input validation that are no longer so much of a hassle. The previous article mentioned several new input types implemented by HTML5, and now we have a more detailed understanding of the new features and functions of HTML5 forms.

1. Input type and Input properties

The Novice tutorial gives the HTML5 a new input type, which can be used to try different types of look, basically can meet the needs of daily development. What are the intrinsic differences between types? There are three main points, first of all, the browser will be based on the input type of basic data validation, such as type= "email", if the user input content does not include the @ symbol, then this is an illegal input, the browser will give the corresponding prompt. The 2nd effect of different types is on the mobile side, when browsing the page in the browser, if the input type is different, the virtual keyboard given by the device will be different depending on the type, for example, if type= "email", the keyboard type given on the Apple phone when typing adds the @ symbol. The 3rd is the convenience, you enter the value if it is a color type, then the browser will give you a color selection of the panel, so as to choose or enter the appropriate color, if a separate implementation of this color selector convenient user input, it seems a little trouble;

The input attribute controls some special content and introduces three input properties:

PLACEHOLDER: I believe that the most commonly used is this attribute, 126 mailbox account and password are used this placeholder,placeholder is actually the text placeholder, when the user entered the content placeholder automatically disappear, played a hint of the role.

Autofocus: see example, it is used to define the input element that should get focus when the page loads.

Required: Setting this property indicates that the input must be filled in, if the user does not fill in the content to submit the form, the browser will give a corresponding prompt.

2. Min Max data-* input Properties <output>

The Max Min property defines the maximum and minimum values for number, range input.

The role of data-* is to bind the data to some elements on the key value. Obtained by the DataSet object of the DOM element:

<input type= "number" data-price= ">"
JS Code:
= document.getElementById (' testid '= Element.dataset.price

The function of the <output> element is to display the results to the user:

<body>    <output id= ' test ' >122</output></body><script type= "Text/javascript" > = document.getElementById (' Test ')    = 888;      </script>

This small example is achieved by setting the value of output to 888;

3. Use the binding API to check form input data

HTML5 Combat Digest Chapter II HTML5 data binding and data validation for the input widgets used to create forms

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.