Home > Developer > Web Develop
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
