Home > Developer > Web Develop
New input controls for form:
| Name | Description | Legend |
| e-mail text box, showing no difference from normal | ||
| Tel | Phone number ,pc side will not have obvious changes, but the mobile side will automatically switch the keyboard, input error does not prevent the default submission | |
| Url | Web page URL | |
| Search | search engine, chrome under the input text, will be more than a closed x | |
| Range | Value selectors in a specific range, Min, max, step (steps) | |
| Number | You can only include numbers in the input box, there is a keyboard listener, you cannot enter other characters. | |
| Color | Color Picker | |
| Datetime | Show full Date | Direct use seems impossible. |
| Datetime-local | Full date is displayed, no time zone included | |
| Time | Display time, without time zone | |
| Date | Display date, Time control | |
| Week | Show week | |
| Month | Show month |
Form new forms features and functions
PLACEHOLDER: input box prompt information.
AutoComplete: Whether to save user input values. The default is on, turn off the prompt to select off.
Autofocus: Specifies that the form gets the input focus.
List and DataList: Constructs a selection list for the input box.
The list value is the ID of the DataList tag.
Required: This entry is required and cannot be empty. (can be directly cracked)
FormAction defines the submission address in the submit and overrides the form's action property.
Form form Validation
Invalid event: Otext.addeventlistener ("invalid", fn1,false);
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "UTF-8">5 <title></title>6 </Head>7 <Body>8 <formAction= "Http://www.baidu.com"Method= "POST"ID= "MyForm">9 <inputtype= "text"ID= "username"name= "username"Required= "Required"/>Ten <inputtype= "Submit"value= "Submit"/> One </form> A </Body> - </HTML> - <Scripttype= "Text/javascript"> the window.onload= function(){ - varOinput=document.getElementById ("username"); - //If you do not add a listener function, username does not fill in, the browser will default block form submission, and give a hint: Please fill in this field. - //If there is an addition, the validation failure executes the function first, and the value of This.validity.valid is false. + //if Ev.preventdefault () is not added to the function, the browser will also give a hint: Please fill in this field. Adding means blocking the default prompt. - Oinput.addeventlistener ("Invalid",function(EV) { + Console.log ( This. validity. valid); A //Ev.preventdefault (); at },false); - } - </Script>Typemismatch: The control value does not match the expected type.
Toolong: Maximum limit exceeded maxlength.
Rangeoverflow: The range maximum value verified
Stepmismatch: Verifies that the current value of range conforms to the rules for Min, Max, and step.
Setcustomvalidity (); Custom validation.
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "UTF-8">5 <title></title>6 </Head>7 <Body>8 <formname= "MyForm"Action=""Method= "POST">9 <inputtype= "text"name=""ID= "MyNumber"value=""Required= "Required"/>Ten <inputtype= "Submit"name=""ID=""value= "Submit" /> One </form A </body> - - </HTML> the <Scripttype= "Text/javascript"> - window.onload= function(){ - varOnumber=document.getElementById ("MyNumber"); - onumber.setcustomvalidity ("Required fields, please enter! "); + } - </Script>New features of HTML5 's form
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
