New input types in HTML5

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

email input type

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

url input type

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 value 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">
 

Ebook Download
View all
Learn
View all