New features of html5_01 form

1, Webstorm Shortcut key:
ctrl+alt+ (down arrow key): fast copy when moving forward
ALT + (up/down Arrow key): move forward
Ctrl+d: Delete When moving forward
Ctrl+/: Quick (cancel) Comment when moving forward
Ctrl+alt+l: formatting the current document
2, HTML5 Nine Xin Features:
① form new features, ② video audio, ③canvas drawing, ④svg drawing, ⑤ geolocation, ⑥ drag-and-drop api, ⑦webworker, ⑧webstorage, ⑨websocket
3. Form Input Type:
① already has type:
Text (textbox), password (password box), radio (radio button), checkbox (check box), button (normal button), reset, submit (submit), image (image), file (document selection), Hidden (hidden field);
②HTML5 new Add Type:
number: numeric input box, corresponding attributes: min (minimum), max (max), step (linear value);
Email: Mail input box, default authentication rule--middle ' @ ' symbol, at least one character before and after each;
Url:url address input box, default validation Rule--colon ': ', with any character in front of it;
Tel: phone number input box, no format verification, mobile browser pop-up numeric keypad;
Search: searches the input box, the PC under the Chrome search box has the deletion symbol ' x ', the mobile phone pops up the keyboard to display ' search ' in the lower right corner;
Range: selection slider, corresponding properties: min (minimum), max (max), value (default), step (linear);
Color: colors Selection window, The browser will invoke the operating system provides a color selection window, submitted by the color value;
Date: selection window, cannot customize style, corresponding property: min (minimum date, value "xxxx/xx/xx");
Month: Monthly selector;
Week: Week/week selector;
4. Form Elements:
① already has table Element--can interact with user and submit: input (various forms interactive form), Select (drop-down selection), textarea (text input field), button (normal button);
②HTML5 new Table Element--cannot interact/submit, only for informational display:
Datalist: a list of data, input suggestions for input boxes;
<datalist id= "xx" >
<option>xxxxx</option>
<option>xxxxx</option>
...
</datalist>
<input list= "xx" >
Progress: An example of a progress bar;
<progress value= "" ></progress>
Meter: Weights and measures, scale, using different colors to identify the area of the data;
<meter min= "0" low= "high=" value= "0" optimum= "" "" max= "," "" "></meter>
Output: outputs a value that represents the computed result of the data, and the semantic tag, for example:
<output for= "xx" ></output>
5. Form Element Properties:
① already have form tags common properties: name, value, readonly, disabled (disabled), checked (selected), for;
②HTML5 new Form Label Properties:
Placeholder: placeholder message, different from value, can only be prompted, cannot be submitted;
<input placeholder= "suggestive text" >
Autofocus: automatically get focus;
Multiple: multiple items, for email and file input boxes, allowing multiple values to be entered, separated by commas;
Autocomplete: Automatic completion, The value on/off, Specify whether the input field records the last commit input, the next input to give hints;
Form: a form that specifies the ID of the form that the current input field belongs to, which can be placed outside the form element, and can still be submitted together, for example:
<form id= "formID" >...</form>
...
<input form= "formID" >
Required: required, Verification when submitted, if no input can not be submitted;
Min: minimum value, If the input value is less than the value can not be submitted;
Max: Maximum value, If the input value is greater than this value can not be submitted;
Minlength: minimum length, If the input string length is less than the value can not be submitted (non-HTML5 standard properties, Firefox does not support, Chrome support);
Maxlength: Maximum length, If the input string length is greater than this value can not be submitted;
Pattern: Regular Expression style, which cannot be submitted if the input string does not conform to the specified regular expression;
<input pattern= "^1[3578]\d{9}$" >
6. Custom Form Error message:
HTML5 added form input field properties: validity (validity);
validitystate{
valid:true;
Badinput:false--invalid input, number;
Customerror:false--custom error, setcustomvalidity (') parameter string has content, Customerror becomes true; The parameter value is an empty string, customerror becomes false;
Patternmismatch:false--pattern mismatch, pattern;
Overflow on rangeoverflow:false--range, max;
Overflow under rangeunderflow:false--range, min;
Stepmismatch:false--step does not match, step;
Toolong:false--string is too long, maxlength;
Tooshort:false--string is too short, minlength;
Typemismatch:false--type mismatch, email/url;
Valuemissing:false--value missing, required;
}

New features of html5_01 form