New Form Features of HTML5_01 and new html5_01

New Form Features of HTML5_01 and new html5_01

1. WebStorm shortcut:
Ctrl + Alt + (downward arrow key): quickly copy the current row
Alt + (up/down direction key): Move the current row
Ctrl + D: Delete the current row
Ctrl +/: fast (cancel) comment the current row
Ctrl + Alt + L: format the current document
2. Nine new HTML5 features:
① New form features, ② video and audio, ③ Canvas drawing, ④ SVG drawing, ⑤ geographic positioning, ⑥ drag-and-drop API, 7webworker, javaswebstorage, and javaswebsocket
3. Form Input type:
① Existing type:
Text (text box), password (password box), radio (single choice button), checkbox (check box), button (normal button), reset (reset), submit (submit), image (image), file (file selection), and hidden (hidden domain );
② Type added to HTML5:
Number: number input box, corresponding attributes: min (minimum), max (maximum), and step (Equal Difference );
Email: the email input box. The default verification rule is the '@' symbol in the middle. Each character must contain at least one character;
Url: the URL address input box. The default verification rule is colon ':', and any character exists before it;
Tel: Phone number input box. No format verification is required. A digital keyboard is displayed in the mobile browser;
Search: search input box. In the Chrome search box under the PC, the delete symbol 'X' is displayed. In the pop-up dialog box on the mobile phone, 'search' is displayed in the lower right corner of the keyboard ';
Range: select the slider for the range. attributes include min (minimum value), max (maximum value), value (default value), and step (equal difference value );
Color: color Selection window. The browser calls the color selection window provided by the operating system and submits the color value;
Date: The date selection window. The style cannot be customized. Corresponding attribute: min (minimum date, value: "xxxx/xx ");
Month: Specifies the month selector;
Week: week/week selector;
4. form elements:
① Existing form elements-interaction with users and submission: input (various forms of interaction form), select (option) (drop-down selection), textarea (text input field), button (Common button );
② HTML5 new form element -- interaction/submission is not allowed, and only information is displayed:
Datalist: Data list, which provides input suggestions for the input box. For example:
<Datalist id = "xx">
<Option> xxxxx </option>
<Option> xxxxx </option>
...
</Datalist>
<Input list = "xx">
SS: progress bar; example:
<Progress value = ""> </progress>
Meter: the dial, which uses different colors to identify the data range. For example:
<Meter min = "0" low = "25" value = "0" high = "75" optimum = "50" max = "100"> </meter>
Output: the output value, used to represent the computing result and semantic tag of the data. For example:
<Output for = "xx"> </output>
5. form Element attributes:
① Common attributes of existing form tags: name, value, readonly, disabled, checked, and;
② HTML5 adds the form tag attribute:
Placeholder: The placeholder message, which is different from the value. It can only be prompted and cannot be submitted. For example:
<Input placeholder = "prompt text">
Autofocus: automatically obtains the focus;
Multiple: multiple items, used in email and file input boxes. multiple values can be entered and separated by commas (,). For example:
Autocomplete: Automatic completion. The value is on/off. It specifies whether the input field records the Input submitted last time. A prompt is displayed next time;
Form: Specifies the ID of the form to which the current input field belongs. You can place the input box declared as form outside the form element and submit it together. For example:
<Form id = "formID">... </form>
...
<Input form = "formID">
Required: required. It is verified when submitted. It cannot be submitted if not entered;
Min: Minimum value. If the input value is smaller than this value, it cannot be submitted;
Max: maximum value. If the input value is greater than this value, it cannot be submitted;
Minlength: minimum length. If the length of the input string is smaller than this value, it cannot be submitted (non-HTML5 standard attribute, not supported by FireFox, and supported by Chrome );
Maxlength: Maximum length. If the length of the input string is greater than this value, it cannot be submitted;
Pattern: regular expression style. If the input string does not conform to the specified regular expression, it cannot be submitted. For example:
<Input pattern = "^ 1 [3578] \ d {9} $">
6. custom form error message:
Added the form field attribute validity (validity) in HTML5 );
ValidityState {
Valid: true;
BadInput: false -- invalid input, number;
CustomError: false -- custom error. If the setCustomValidity ('') parameter string contains content, customError is changed to true. If the parameter value is an empty string, customError is changed to false;
PatternMismatch: false -- style mismatch, pattern;
RangeOverflow: false -- overflow in the range, max;
RangeUnderflow: false -- overflow in the range, min;
StepMismatch: false -- step size mismatch, step;
TooLong: false -- the string is too long, maxlength;
TooShort: false -- the string is too short, minlength;
TypeMismatch: false -- Type mismatch, email/url;
ValueMissing: false -- missing value, required;
}