HTML5 form learning notes and html5 learning notes

HTML5 form learning notes and html5 learning notes

Forms play an important role in web design. HTML5 also adds various forms, including adding input types, input attributes, form elements, and form attributes, it solves our previous headaches or tedious functions.

New input type

1. emailInput type:This type is a text input box specifically used to enter the E-mail address. When submitting a form, it automatically verifies the value of the email input box. If the value is invalid, the browser cannot submit it, an error message is displayed.

<input type="email" name="user_email" />

2. number Type:The input field that contains values. You can also set the number limit, that is, the maximum and minimum allowed values and valid digit intervals. If the number is not in the range, an error message is displayed.

<input type="number" name="number1" ><input type="number" name="number1" min="1" max="20" step="4">

3. url type:The text field requires that the URL address in the correct format be entered.

<input type="url" name="user_url" />

4. range type:This type displays a slide bar that can be dragged, And you can limit the drag range by setting the max/min/step value. A value is fed back when you drag the bar.

<input type="range" name="range1" min="1" max="30" />

5. Date and Time input types:Input date, which is a cool type, completely solves the cumbersome JS calendar control.

<Input type = "date" name = "date1"/> <! -- Select day, month, and year --> <input type = "month" name = "month1"/> <! -- Select month, year --> <input type = "week" name = "week1"/> <! -- Select week, year --> <input type = "time" name = "time1"/> <! -- Select the time (hours and minutes) --> <input type = "time" name = "time1" step = "5" value = "09:00"> <input type = "datetime" name = "datetime1"/> <! -- Select time, day, month, year (UTC time) --> <input type = "datetime-local" name = "datetime-local1"/> <! -- Select time, day, month, and year (local time) -->

6. search type:This type indicates that a search keyword is entered, and a small search icon is displayed through results = s.

<input type="search" name="search1" />

7. tel type:This type requires a phone number, but in fact it does not have a special verification, there is no difference with the text type.

<input type="tel" name="tel1" />

8. color type:Used for color selection fields. A color selection box is displayed.

<input type="color" name="color1" />

Add attribute

1. autocomplete attributes:This attribute provides the Automatic completion function for the form. if this attribute is enabled, it can be automatically completed. in general, this property must enable the browser's Automatic completion function. autocomplete applies to <form> labels and <input> labels of the following types: text, search, url, telephone, email, password, datepickers, range, and color.

<Form action = "/formexample. asp "method =" get "autocomplete =" on "> name: <input type =" text "name =" name1 "/> <br/> occupation: <input type = "text" name = "career1"/> <br/> email address: <input type = "email" name = "email1" autocomplete = "off"/> <! -- Use off to set this line separately. When the user submits a form and accesses it again, the name input box will prompt you for the value you have entered, while the email will not prompt. --> <Br/> <input type = "submit" value = "submit information"/> </form> <form autocompelete = "on"> <! -- When the attribute is set to on, you can use the newly added datalist and list attributes in HTML5 to provide a data list for users to choose from --> enter your favorite city name: <input type = "text" id = "city" list = "cityList" "> <datalist id =" cityList "style =" display: none; "> <option value =" BeiJing "> BeiJing </option> <option value =" QingDao "> QingDao </option> <option value =" QingZhou "> QingZhou </option> <option value = "QingHai"> QingHai </option> </datalist> </form>

 

2. autofocus attributes:Specifies that the domain automatically obtains the focus when the page is loaded. Applicable to All <input> label types.

<Input type = "submit" value = "agree" autofocus = "on"> <! -- If the property value is on, this button gets the focus -->

3. form attributes:Specifies one or more forms to which the input field belongs. Applicable to All <input> label types. The form attribute must reference the form id.

<Form action = "" method = "get" id = "form1"> enter the name: <input type = "text" name = "name1" autofocus/> <input type = "submit" value = "submit"/> </form> <p> the input box in except the form element, however, because of the specified form attribute and the value is the form id, the input box is still part of the form. </P> enter the address: <input type = "text" name = "address1" form = "form1"/>

4. Form rewriting attributes:Used to override certain attribute settings of the form element.

• Formaction-override the action attribute of the form
• Formenctype-override the form's enctype attribute
• Formmethod-override the method attribute of the form
• Formnovalidate-override the novalidate attribute of the form
• Formtarget-override the target attribute of a form

Note that the form rewriting attribute only applies to submit and image.

<form id="user_form">　　<input type="email" name="userid" />　　<input type="submit" value="Submit" />　　<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />　　<input type="submit" formnovalidate="true" value="Submit without validation" /></form>

5. required attributes:Form Verification attribute. If the input value is null for the require type, the request is rejected and a prompt is displayed.

<Form action = "demo. asp "method =" get "> enter the name: <input type = "text" name = "usr_name" required = "required"/> <input type = "submit" value = "submit"/>

6. placeholder attributes:Provides a prompt. Applicable to the following types of <input> labels: text, search, url, telephone, email, and password.

Enter the zip code: <input type = "text" name = "m" placeholder = "Enter the zip code"/> <input type = "submit" value = "submit"/>

7. pattern attributes:Specifies whether the content of the input field matches the custom regular expression. It is applicable to the following types of <input> labels: text, search, url, telephone, email, and password.

Enter the zip code: <input type = "text" name = "zip_code" pattern = "[0-9] {6}" placeholder = "enter a 6-digit ZIP code"/> <input type = "submit" value = "submit"/>

8. multiple attributes:Specify multiple values in the input field. Applicable to email and file.

Select multiple files to upload: <input type = "file" name = "file1" multiple = "multiple"/> <input type = "submit" value = "submit"/>

9. max/min/step attributes:The input range of the restricted value and the progressive degree of the value input

Enter a value: <input type = "number" name = number1 "min =" 0 "max =" 12 "step =" 4 "/> <input type =" submit "value =" submit" />

10. list attributes:This attribute must be shared with the datalist attribute. datalist is the memory of the Selection box, and the list attribute can be the content of the custom memory of the Selection box.

Enter the URL: <input type = "url" list = "url_list" name = "weblink"/> <datalist id = "url_list"> <option label = "Sina" value = "http://www.sina.com.cn "/> <option label = "Sohu" value = "http://www.sohu.com"/> <option label = "Netease" value = "http://www.163.com"/> </datalist>

11. novalidate attributes:It is required that form or input fields should not be verified when a form is submitted. Applicable to <form> and the following <input> labels: text, search, url, telephone, email, password, date pickers, range, and color.

<form novalidate="true">　　<input type="email" name="user_email" />　　<input type="submit" /></form>

Add Element

1. datalist element:Specifies the option List of the input fields. The list is created by the option element in datalist. To bind datalist to the input field, use the list attribute of the input field to reference the id of datalist.

For example, see list attributes.

2. keygen elements:Provides a reliable method for user verification. The keygen element is the key-pair generator ). When a form is submitted, two keys are generated. One is the private key and the other is the public key. The private key is stored on the client, and the public key is sent to the server. The public key can be used to verify the user's client certificate (client certificate ).

Enter the User name: <input type = "text" name = "usr_name"/> <br> select the encryption strength: <keygen name = "security"/>

3. output element:Used for different types of output, such as computing or Script output

<Html>