HTML5 input widgets for creating forms, data binding and data validation-H5 Tutorial-php.cn

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

高洛峰

Release： 2016-11-18 11:15:29

Original

1624 people have browsed it

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

　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

Copy after login

　The function of the 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>

Copy after login

This small example implements setting the output value to 888;