HTML and CSS Reference
email , url , tel
Text box that restricts
the entered value to
match the format of
email , url , or tel
These controls validate data entered in
them and display an error message if
data doesn't meet the expected format.
The type tel isn't implemented in all
date , datetime , datetime-
time , week , month
Date and/or time
Different browsers may display these
controls in different fashions.
Different browsers may display the color
picker in different fashions.
number , range
range selector (slider)
You can specify minimum and
maximum values as well as a step value.
Text box with a Browse
This control is used to upload files from
a client machine to the server.
Hidden form field (not
displayed on the form)
This control isn't displayed on the web
page but can be accessed
programmatically. It's typically used to
pass processed or hidden data between
client and server.
submit , reset , button ,
Push button / image
button for submitting,
resetting the form, or
triggering a custom
These controls trigger an action. A
Submit button submits a form to the
server using a POST / GET request.
A search box can have special features
that an ordinary text box doesn't have,
such as the ability to clear the entered
This control displays a list box or drop-
down list. You can specify list items
using <option> elements.
The next section discusses the new input types introduced by HTML5.
Using HTML5-Specific Input Types
Ensuring that data entered by a user meets the expected format is a common task in all data-driven web
• Data entered is of correct format: for example, e-mail addresses, URLs, and
• Data entered falls within certain range between minimum and maximum values: for
example, age group and yearly income.
• Dates are entered in a common format, and values are valid dates.
a more logical approach is to enable the data-entry controls to accept data of the required format or range.