HTML5 (common form controls)

Common form controls for HTML5:

Input Type: Color

The color type used in the input field is primarily used to select a color, as follows:

To select a color from the color picker:

Choose the color you like: <input type= "Color" name= "Favcolor" >input type: Email

The email type is used for input fields that should contain e-mail addresses.

When you submit a form, it automatically verifies that the value of the email domain is valid:

E-mail: <input type= "email" name= "email" >input Type: Number

The number type is used for input fields that should contain numeric values.

You can also set a limit on the number of accepted numbers:

Define a numeric input field (qualified):

Quantity (1 to 5): <input type= "number" name= "Quantity" min= "1" max= "5" >

Use the following properties to define the qualification for numeric types:

• Max-the maximum allowable value
• Min-Specifies the minimum allowable value
• Step-Specify a valid number interval (if step= "3", the number of legal is -3,0,3,6, etc.)
• Value-Specify default value

Input Type: Range

The range type is used for input fields that should contain numeric values in a range.

The range type is displayed as a slider bar.

Define a value that does not need to be very precise (similar to slider control):

<input type= "range" name= "points" min= "1" max= "ten" >

The <datalist> element specifies a list of options for the input field.

The <datalist> attribute specifies that the form or input field should have auto-complete functionality. When the user starts typing in the AutoComplete field, the browser should display the fill-in options in that field:

Use the <input> element's List property to bind to the <datalist> element. If the data is tied back in the background, you can do fuzzy query.

<input> elements use <datalist> predefined values:

<input list= "Browsers" >
<datalist id= "Browsers" >
<option value= "Internet Explorer" >
<option value= "Firefox" >
<option value= "Chrome" >
<option value= "Opera" >
<option value= "Safari" >
</datalist>

HTML5 (common form controls)