H5’s new forms features fall into two broad categories:

(1) Input type value

attribute describe
email Mail input field
url Address input field
number Digital input field
tel Phone number input field
search Search the input field
range Range selection control
color Color selection control
date / month / week Time selection control
  • Email: indicates the mail input field

Provide simple mailbox format validation at form submission and pop up a prompt window.

<input type="email"></input> 
Copy the code
  • Url: address input field

Provide simple URL address format validation at form submission and pop up a prompt window.

<input type="url" ></input> 
Copy the code
  • Number: indicates the number input field

You can set min, Max, and step values to limit the drag range

<input type="number"></input> 
Copy the code
  • Tel: phone number input field

This type requires a phone number, but it has no special validation, just like the text type.

<input type="tel"></input> 
Copy the code
  • Search: Searches the input field

Results =s displays a small search icon

<input type="search"></input> 
Copy the code
  • Range: range selection control
<input type="range"></input> 
Copy the code
  • Color: color selection control

The user selects a color value through the color picker and feeds it back into value

<input type="color"></input>
Copy the code
  • Date/Time/month/week: time selection control
<input type="date"></input> 
<input type="time"></input> 
<input type="month"></input> 
<input type="week"></input> 
Copy the code

(2) New attributes of h5 form elements

attribute describe
autocomplete Automatic completion
placeholder A placeholder
autofocus Automatically get input focus
multiple Property specifies that an input field can select multiple values
form Value is the ID of a form. If set, the input field can be placed outside the form
min Sets the minimum value of an input number
max Sets the maximum value of an input number
step Specifies the step size of the input number. used with min
required When the form is submitted, it validates if there is input, and pops up a prompt message if there is no input
pattern Specify a regular expression that validates the input (the default regular expression is preceded by ^$)
  • Autocomplete attribute

This property provides auto-complete functionality for the form

<input type="text" autocomplete="on">
Copy the code
  • Placeholder attribute

Used to display suggestive text in an input field. Unlike value, cannot be submitted

 <input type="text" placeholder=""></input>
Copy the code
  • Autofocus attribute

Default focus property that focuses to a form control when the page loads

<input type="text" autofocus="true"></input>
Copy the code
  • Multiple attribute

Whether to allow multiple input values. If this property is declared, multiple comma separated values are allowed in the input field

<input multiple="multiple"></input>
Copy the code
  • The form properties

Value is the ID of a form. If set, the input field can be placed outside the form

<input type="text"  form="nameform" /></input>
Copy the code
  • Max/min/step attributes

Limit the input range of a value, and how asymptotically the value is input

<input type="range" max="100" min="1" step="20">
Copy the code
  • The required attribute

When the form is submitted, it validates if there is input, and pops up a prompt message if there is no input

<input type="text" required="required"></input>
Copy the code
  • The pattern attribute

Specify a regular expression that validates the input (the default regular expression is preceded by ^$)

<input type="text" pattern="^[1-9]\d{5}$"></input>
Copy the code