JavaScript encounters some form attributes of HTML5_javascript skills

input attribute:
placeholder: The default value of the input box, showing descriptive text or prompt information to the user

autocomplete: Values ​​are on and off. . "on" means that when the field is filled in and submitted and then returned to the page, the previously entered information will be displayed when entering again. off means closed, including the security of user input data. Default is on
autofocus: Set an input to automatically gain focus when the page loads. Note that the page can only set this attribute for one input. Setting multiple inputs is equivalent to no setting.
List feature and datalist: Add a drop-down list to an input box through list. . It is equivalent to the "auto-complete" function implemented in js, but it cannot perform fuzzy queries
If there are two values ​​in the datalist: "a34343" and "24234", the user expects that both values ​​will appear after entering 3, but in fact none of them will appear.
It requires a complete match. For example, if you enter a, the drop-down a34343 will appear, and then if you enter 4, the drop-down value will disappear.

required: This element must be filled in before the form is submitted, that is, it cannot be empty. Not recommended because of the prompt message 'Please fill in this field' unless there is an attribute that can replace the prompt message.
Pattern: A place to write regular patterns in the input tag. . The input control whose type is email or url has built-in related regular expressions. If the value does not match its regular expression, the form will fail the verification and cannot be submitted. .
It is not recommended to use it for elements whose type is email or url, because the prompt information is fixed and the regular pattern is fixed. . It is better to rewrite directly in js.

Some input settings:
rangeUnderflow limits the minimum value of the numerical control. Set min, input type="number" min="0" value="20"
rangeOverflow limits the maximum value of the numerical control. Set max, input type="number" max="100" value="20"
stepMismatch ensures that the input value conforms to the settings of min, max, and step. Set max min step, input type="number" min="0" max="100" step="10" value="20"
bc5574f69a0cba105bc93bd3dc13c4ec

The following is a small function used by input=number:

function inputV(inpFields,tips){//input值范围判断。。0-100.正正数
/**
* input值范围判断。。0-100.正正数
* range 范围：使用<input type="number" min="0" max="100"/>
* if(inputV(v3,msgABC.t4)==false){return false;}
* **/
var km=inpFields[0].validity,v3=inpFields.val();
console.log('不是数字：',km.badInput,'超出范围：',km.rangeOverflow,'小于最小值：',km.rangeUnderflow);
if(km.badInput||km.rangeOverflow||km.rangeUnderflow){//a返回true 22返回true -1 返回 true
alert(tips);
return false;
}
if(isNaN(parseInt(v3))){
console.log('NaN 不判断.因为值为空');
return true;
}
else if(!!isNaN(v3)||parseInt(v3)!=parseFloat(v3)){//不是数字!!isNaN('v3')
alert(tips);
return false;
}
return true;
}

list properties and datalist:

<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

<form action="http://localhost/test.php" method="post" id="register"></form>
url：<input type="url" name="url" form="register" required/><br />
user：<input type="text" name="user" value="" form="register"/><br />
pwd：<input type="password" name="pwd" value="" form="register" /><br />
<select name="year" form="register">
<option value="1970">1970</option> 
<option value="1980">1980</option> 
<option value="1990">1990</option> 
</select>
<input type="submit" value="注册" form="register"/>

Regular: 77c360f9c68e2e9a94541bb951f65f9a

Email:2efc3ba83166a1ae94774c81c998b15fc76a1367b221c5587c8fa473533fe7a6
Address:f7c79162c0e524d73d44db095b6a86f8
DATE:e535f83b2d4da9572ad682811dbb96c4df250b2156c434f3390392d09b1c9563
TIME:ecce8baac87750407bd361850fbeb05a
MONTH:12424f4308ab1ded8100fa3a813cca1e
Week:e8ce2c6addb6f4614fb6d38713f2dfca
Number: c91b025bc073179e52c284ef5e2f4ed5df250b2156c434f3390392d09b1c9563
Slider798d4ae7d9d52b50caa3abb416a13610
Search:e0eb08276351b89f6680adeb0e4142b6
Color:9f9cb6021db7cc3e125dff1cb7e8877cdf250b2156c434f3390392d09b1c9563
0e9f73baf0273021f27a708f9b53d388

Autofill form076402276aae5dbec7f672f8f4e5cc81

<input type="text" name="auto" value="" list="movie" />
<datalist id="movie">
<option>11111111</option>
<option>243234234</option>
<option>3324234</option>
</datalist>

Output form output

<form action="" method="post" oninput="result.value=parseInt(no1.value*no2.value)">
<input type="number" name="no1" value=""/>
<input type="number" name="no2" value=""/>
<output name="result" ></output>
</form>

The above is the entire content of this article, I hope you all like it.