javascript encounters some of the form properties of html5

input attributes:
placeholder: The default value of the input field to display descriptive text or prompt messages to the user

autocomplete: Values are on and off. on represents that when the field is filled in and submitted, the page is returned, and the previous input is displayed when the field is entered. off is off and contains the security of user input data. The default is on
autofocus: Set an input to get focus automatically when the page loads. Note that this property can only be set for 1 input on the page. Setting more than one is equivalent to no setting.
list features and datalist: Adds a drop-down list to an input box via list. This is equivalent to the "auto complete" functionality implemented by js, but it does not allow for fuzzy queries
If there are two values in datalist: "a34343" and "and 24234", the user expects both values to appear after entering 3, but none of them actually appear.
It requires a perfect match, so if you type a, then the drop-down a34343 appears, and then you type 4, then the drop-down value is gone.

required: This element must be filled in before the form is submitted and cannot be empty. It is not recommended because the prompt 'please fill in this field' unless there is an attribute to replace the prompt.
pattern: Give the input tag where to write the regular. type is an input control for email or url with an associated regular expression built in. If value does not match its regular expression, the form will fail validation and cannot be submitted.
It is not recommended to use type for email or url elements because the prompt message is fixed and the regular message is fixed. js might as well just rewrite it.

1 Some input Settings:
rangeUnderflow Limit the minimum value of the numerical control min, input type="number" min="0" value="20"
The maximum value of rangeOverflow limit value control is set to max, input type="number" max="100" value="20"
stepMismatch =" min "min step, input type="number" min="0" max="100" step="10" value="20"
< /pre >

Here is a small function of input=number:

function inputV(inpFields,tips){//input Value range judgment. 0-100. Is a positive number 
/**
* input Value range judgment. 0-100. Is a positive number 
* range  Scope: Use <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(' Not Numbers: ',km.badInput,' Beyond scope: ',km.rangeOverflow,' Less than minimum: ',km.rangeUnderflow);
if(km.badInput||km.rangeOverflow||km.rangeUnderflow){//a return true 22 return true -1  return  true
alert(tips);
return false;
}
if(isNaN(parseInt(v3))){
console.log('NaN  Don't judge . Because the value is empty ');
return true;
}
else if(!!isNaN(v3)||parseInt(v3)!=parseFloat(v3)){// Not Numbers !!isNaN('v3')
alert(tips);
return false;
}
return true;
}

list features 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=" registered " form="register"/>

Regular: < input type="text" name="tt" pattern="\d{3}" value="" form="register"/ >

Email address: < input type="email" name="youxinag" value=" placeholder=" This is the default value "autofocus="autofocus" form="register" required="required" / > < br / >
Address: < input type="url" name="url" form="register" form="register"/ >
DATE: < input type="date" name="riqi" value="" form="register"/ > < br / >
TIME: < input type="time" name="shijian" value=""/ >
MONTH: < input type="month" name="yue" value="" / >
Weeks: < input type="week" name="zhou" value="" / >
The Numbers: < input type="number" name="suzhi" value="" form="register" / > < br / >
slider < input type="range" name="suzhi" value="" form="register" max="10" step="2"/ >
Search: < input type="search" name="huadong" value="" form="register" results="n"/ >
Color: < input type="color" name="huadong" form="register"/ > < br / >
< input type="file" id="a33" / >

Auto-fill form < br/ >

<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>

This is the end of this article, I hope you enjoy it.