There are some new input types in HTML5. They are,
email Input Type: email type is used when
our form requires a valid input entry for email id by user. When user Click on
submit button, it checks for valid email id. Its syntax is given below,
<input type="email">
We create a form with email input type by writing below code
<!DOCTYPE
HTML>
<html>
<body>
<form
method="post">
email id: <input
type="email"/><br
/>
<input
type="submit"
/>
</form>
</body>
</html>
When we run this code, the output will look like below
url Input Type:
url type is used when our form requires a valid input entry for URL by user.
When user Click on submit button, it checks for valid URL. Its syntax is given
below,
<input type="url">
We create a form with email input type by writing below code
<!DOCTYPE
HTML>
<html>
<body>
<form
method="post">
URL: <input
type="url"/><br
/>
<input
type="submit"
/>
</form>
</body>
</html>
We run this code, the output will look like below
date Input Type: date type
is used for date entry in form. Its syntax is given below,
<input type="date">
number Input Type:
number type is used when our form requires a valid numeric character input entry by user.
Its syntax is given
below,
<input type="number">
We create a form with number input type by writing below code
<!DOCTYPE
HTML>
<html>
<body>
<form
method="post">
Number: <input
type="number"/><br
/>
<input
type="submit"
/>
</form>
</body>
</html>
range Input Type:
It is displayed as slider. range type is used
to select values from number by slider.
Its syntax is given
below,
<input type="range">
search Input Type: search input type is
used for searching. Its syntax is given below
<input type="search">
color Input Type:
color type is used when our form requires input
for color by user. By color picker a user can choose value for it. Its
syntax is given below,
<input type="color">
tel Input Type: tel type is used for
telephone number entry. Its syntax is given below,
<input type="tel">