HTML5 form, html5 form example

HTML5 form, html5 form example
Abstract:

HTML5 adds many new form input types, not just text input boxes. It makes the form more colorful. Below is a form sample table.

It can be seen that the form style is more diverse, and verification is supported to implement functions that can only be completed through js.

Browser:

Email:

This field is used for input fields that should contain the e-mail address. When submitting a form, the value of the email field is automatically verified.

<label>E-mail: </label><input type="email" name="user_email" />

Url:

Used for the input field that should contain the URL address. When a form is submitted, the value of the url field is automatically verified.

<label>Url: </label><input type="url" name="user_url" />

Number:

Used in the input field that should contain values.

<label>Points: </label><input type="number" name="points" min="1" max="10" />

Attribute	Value	Description
Max	Number	Maximum allowed
Min	Number	Minimum value allowed
Step	Number	Specify a valid number interval (if step = "3", the valid number is-3, 0, 3, 6, etc)
Value	Number	Default Value

Range:

Used in the input field that should contain a certain range of numeric values.

<label>Range: </label><input type="range" name="points" min="1" max="10" />

Attribute	Value	Description
Max	Number	Maximum allowed
Min	Number	Minimum value allowed
Step	Number	Specify a valid number interval (if step = "3", the valid number is-3, 0, 3, 6, etc)
Value	Number	Default Value

Date Picker:

• Date: Select day, month, and year
• Month-select month and year
• Week-select week and year
• Time-Select time (hours and minutes)
• Datetime-select the time, day, month, and year (UTC time)
• Datetime-local-Select time, day, month, and year (local time)

<label>Date: </label><input type="date" name="user_date" />

Search:

Used to search for domains, such as site searches.

<label>Search: </label><input type="search" name="search" />

Color:

Used for color selection fields. A color selection box is displayed.

<label>Color: </label><input type="color" name="color" />

 

Datalist:

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.

<label>Webpage: </label><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>

Keygen:

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

<label>Encryption: </label><keygen name="security" />

Output:

Used for different types of output, such as computing or Script output

<label>Output</label><output id="result" onforminput="resCalc()">alert(111);</output>

Autocomplete attributes:

It is required that form or input fields have the 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 autocomplete="on">
        　　<input type="email" name="email" autocomplete="off" />
    </form>

Autofocus attributes:

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

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

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="demo_form.asp" method="get" id="user_form">
    </form>
    <input type="text" name="name" form="user_form" />

Form overrides:

You can override certain attribute settings of the form element.

Form rewriting attributes include:

• 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

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

Multiple attributes:

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

<input type="file" name="img" multiple="multiple" />

Novalidate attribute:

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>

Pattern attributes:

Specifies the mode used to verify the input field. It is applicable to the following types of <input> labels: text, search, url, telephone, email, and password.

<input type="text" name="country_code" pattern="[A-z]{3}" />

Placeholder attributes:

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

<Input type = "text" name = "country_code" placeholder = "enter"/>

Required attributes:

It is required that you enter a field before submission. The <input> labels are applicable to the following types: text, search, url, telephone, email, password, date pickers, number, checkbox, radio, and file.

<input type="text" name="usr_name" required="required" />

Spellcheck attributes:

Specifies whether to spell the element content. You can check the spelling of the following text: the value in the input element of the text type (non-password), the value in the textarea element, and the value in the Editable element.

<input type="text" name="usr_name" spellcheck="true" />

 

Appendix:

 

Input type	IE	Firefox	Opera	Chrome	Safari
Autocomplete	8.0	3.5	9.5	3.0	4.0
Autofocus	10	No	10.0	3.0	4.0
Form	No	No	9.5	No	No
Form overrides	No	No	10.5	No	No
Height and width	8.0	3.5	9.5	3.0	4.0
List	No	No	9.5	No	No
Min, max, and step	No	No	9.5	3.0	No
Multiple	No	3.5	No	3.0	4.0
Novalidate	No	No	No	No	No
Pattern	No	No	9.5	3.0	No
Placeholder	10	No	No	3.0	3.0
Required	No	No	9.5	3.0	No