search

Home >Web Front-end >H5 Tutorial >HTML5 input widgets for creating forms, data binding and data validation

HTML5 input widgets for creating forms, data binding and data validation

高洛峰
高洛峰Original
2016-11-18 11:15:291657browse

1. Input types and input attributes

　The new input type of HTML5 is given in the novice tutorial. You can try different types on it, which can basically meet your daily development needs. What are the internal differences caused by 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 user input does not include the @ symbol, then this is an illegal input, and the browser will give a corresponding tips. The second impact of different types is that on the mobile terminal, when browsing the page on the browser, if the input item type is different, the virtual keyboard given by the device will be different according to the type. For example, if type="email" , the @ symbol is added to the keyboard type given on the Apple phone when inputting. The third point is the convenience it brings. If the value you input is a color type, then the browser will give you a color selection panel to select or enter the corresponding color. If you implement such a color selector separately, it will be convenient for users. It seems a bit troublesome to enter;.

　Input attributes control some special content. Here are three input attributes:

　placeholder: I believe this attribute is most commonly used by everyone. The accounts and passwords of 126 mailboxes all use this placeholder. Placeholder is actually a text placeholder. When the user enters content, the placeholder automatically disappears and serves as a prompt.

　autofocus: You can understand it by looking at the example. It is used to define the input element that should get focus when the page is loaded.

　Required: Setting this attribute indicates that the input is required. If the user submits the form without filling in the content, the browser will give a corresponding prompt.

2. min max data-*input attribute be6d67dae90cc1ad6469079e163d0939

　The max min attribute defines the maximum and minimum values ​​of number and range input.

　The function of data-* is to bind key-value pairs to some elements. Obtained through the dataset object of the dom element: 

<input type="number" data-price="21" >
js代码：
let element = document.getElementById(&#39;testid&#39;);
let price = element.dataset.price

　The function of the be6d67dae90cc1ad6469079e163d0939 element is to display the results to the user: 

<body>
    <output id=&#39;test&#39;>122</output>
</body>
<script type="text/javascript">
    let ss = document.getElementById(&#39;test&#39;)
    ss.value = 888;
</script>

This small example implements setting the output value to 888;

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：10 Inspiring HTML5/CSS3 AppsNext article：10 Inspiring HTML5/CSS3 Apps

Related articles

See more