HTML and CSS Reference
In-Depth Information
email
,
url
,
tel
Ye s
Text box that restricts
the entered value to
match the format of
email
,
url
, or
tel
(telephone number)
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
browsers.
date
,
datetime
,
datetime-
local
time
,
week
,
month
Ye s
Date and/or time
picker
Different browsers may display these
controls in different fashions.
color
Ye s
Color picker
Different browsers may display the color
picker in different fashions.
number
,
range
Ye s
Up-down control,
range selector (slider)
You can specify minimum and
maximum values as well as a
step
value.
ile
Improved
Text box with a Browse
button
This control is used to upload files from
a client machine to the server.
hidden
No
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
,
image
No
Push button / image
button for submitting,
resetting the form, or
triggering a custom
action
These controls trigger an action. A
Submit button submits a form to the
server using a
POST
/
GET
request.
search
Ye s
Search box
A search box can have special features
that an ordinary text box doesn't have,
such as the ability to clear the entered
search criteria.
<select></select>
No
Drop-down list.
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
applications. Traditionally, developers used custom JavaScript code to perform checks such as these:
• Data entered is of correct format: for example, e-mail addresses, URLs, and
telephone numbers.
• 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.
Performing such validations through JavaScript is, no doubt, a good programming practice. However,
a more logical approach is to enable the data-entry controls to accept data of the required format or range.
This way, you need not write any JavaScript code to validate the user input. The new HTML5 input types
