Home > Developer > JavaScript
HTML5 practice summaries Chapter 2 HTML5 is used to create input widgets for form data binding and data verification,
HTML5 forms add some convenient features based on the original form features, so that we can implement some commonly used form widgets, input types, and input verification are no longer so costly. The previous article mentioned several new input types implemented by HTML5. Now we have a more detailed understanding of the new features and functions produced by HTML5 forms.
1. Input type and attribute
The new input type added to HTML5 is provided in the cainiao tutorial. You can try different types of input types above to meet the daily development requirements. What is the internal difference between different types? There are three main points: first, the browser will perform basic data verification based on the input type, such as type = "email". If the content entered by the user does not include the @ symbol, this is an invalid input. The browser will prompt you accordingly. The second influence of different types is on the mobile terminal. When you browse the page in a browser, if the input type is different, the virtual keyboard provided by the device varies depending on the type, for example, if type = "email", the @ symbol is added to the keyboard type given on the Apple mobile phone. The third point is the convenience. If you enter a value of the color type, the browser will give you a color selection panel to select or enter the corresponding color, if a single color selector is implemented to facilitate user input, it may be a little troublesome ;.
The INPUT attribute controls some special content and introduces three input attributes:
Placeholder: I believe this attribute is the most common one. This placeholder is used for accounts and passwords in 126 mailboxes, and placeholder is actually a text placeholder. When a user inputs a content placeholder, it will automatically disappear, it serves as a prompt.
Autofocus: Let's see the example. It defines the input elements that should get the focus when loading the page.
Required.
2. min max data-* INPUT attribute <output>
The max min attribute defines the maximum and minimum values entered by number and range.
Data-* binds key-value pairs to some elements. Obtained through the dataset object of the dom element:
<Input type = "number" data-price = "21">
Js Code:
Let element = document. getElementById ('testid'); let price = element. dataset. price
<Output> the element is used to display the result to the user:
<body> <output id='test'>122</output></body><script type="text/javascript"> let ss = document.getElementById('test') ss.value = 888;</script>
In this small example, the output value is set to 888;
3. Check Form input data using binding APIs
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
