Explain the new input types provided by HTML5.

1.	Explain the new input types provided by HTML5.
Answer» There are many new INPUT types introduced in HTML5. These are in addition to the one we have seen in Question 25. So, the new types are - <input type=“color”> - The input element with type=“color”, let the user select a color from a color palette. The different browser shows a different color palette. <input type=“date”> - The input element with type=“date”, let the user select a date from a calendar pop-up or input it himself. The different browser shows a different date pop-up. <input type=“datetime-local”> - The input element with type=“datetime-local”, let the user select both date and time from a pop-up and he can also input it in the text box. <input type=“email”> - The input element with type=“email”, let the user enter his email. The input entered is automatically validated to contain a valid email. <input type=“month”> - The input element with type=“month”, let the user enter a month and a year. The value entered is in the format YYYY-MM. <input type=“time”> - The input element with type=“time”, let the user enter time in an hour, minutes and seconds. <input type=“url”> - The input element with type=“url”, let the user enter a URL. The input entered is automatically validated to contain a valid URL. <input type=“number”> - The input element with type=“number”, let the user enter number. He/She can enter the number in the text-box or also can increase/decrease it with the PROVIDED counter. <input type=“range”> - The input element with type=“range”, let the user specify a numeric value with a graphical slider. <input type=“search”> - The input element with type=“search”, is a SPECIALLY designed text field. It allows the user to enter the search term into it. <input type=“tel”> - The input element with type=“tel”, let the user enter a telephone number. Unlike <input type=“email”> the input is not automatically validated and we have to use pattern. We will use all the above to create our example. <!DOCTYPE html> <html> <head> <meta CHARSET="utf-8" /> <title>Input types</title> <style> h1{ text-align: center; } form{ display: grid; place-content: center; grid-gap: 10px; border: 1px solid black; } form > * { display: grid; grid-template-columns: 150px 1fr; place-content: center; } label { font-family: "Fira Sans", sans-serif; } </style> </head> <body> <h1>HTML5 Input Types Demo</h1> <form> <div id="search_eg"> <label for="site-search">Search the site:</label> <input type="search" id="site-search" name="q" aria-label="Search through site content"> </div> <div id="time_eg"> <label for="appt">Choose a time:</label> <input type="time" id="appt" name="appt" min="9:00" max="18:00" required> </div> <div id="url_eg"> <label for="url">Enter an URL:</label> <input type="url" name="url" id="url" placeholder="https://example.com" pattern="https://.*" size="30" required> </div> <div id="phone_eg"> <label for="phone">Enter your phone:</label> <input type="tel" id="phone" name="phone" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required> </div> <div id="month_eg"> <label for="month">Enter a month:</label> <input type="month" id="month" name="month" min="2018-03" value="2019-05"> </div> <div id="email_eg"> <label for="email">Enter your email:</label> <input type="email" id="email" pattern=".+@gmail.com" size="30" required> </div> <div id="number_eg"> <label for="tentacles">Enter a number:</label> <input type="number" id="tentacles" name="tentacles" min="10" max="100"> </div> <div id="range_eg"> <label for="volume">Choose a Range:</label> <input type="range" id="START" name="volume" min="0" max="11"> </div> <div id="color_eg"> <label for="favorite">Choose a color:</label> <input type="color" id="favorite" name="favorite" value="#e66465"> </div> <div id="date_eg"> <label for="date">Select a date:</label> <input type="date" id="date" name="date-start" value="2019-04-22" min="2018-01-01" max="2025-12-31"> </div> <div id="datetime_eg"> <label for="appointment-time">Choose a time:</label> <input type="datetime-local" id="appointment-time" name="appointment-time" value="2019-04-12T19:30" min="2019-04-07T00:00" max="2025-06-14T00:00"> </div> </form> </body> </html>

Answer»

There are many new INPUT types introduced in HTML5. These are in addition to the one we have seen in Question 25.

So, the new types are -

<input type=“color”> - The input element with type=“color”, let the user select a color from a color palette. The different browser shows a different color palette.
<input type=“date”> - The input element with type=“date”, let the user select a date from a calendar pop-up or input it himself. The different browser shows a different date pop-up.
<input type=“datetime-local”> - The input element with type=“datetime-local”, let the user select both date and time from a pop-up and he can also input it in the text box.
<input type=“email”> - The input element with type=“email”, let the user enter his email. The input entered is automatically validated to contain a valid email.
<input type=“month”> - The input element with type=“month”, let the user enter a month and a year. The value entered is in the format YYYY-MM.
<input type=“time”> - The input element with type=“time”, let the user enter time in an hour, minutes and seconds.
<input type=“url”> - The input element with type=“url”, let the user enter a URL. The input entered is automatically validated to contain a valid URL.
<input type=“number”> - The input element with type=“number”, let the user enter number. He/She can enter the number in the text-box or also can increase/decrease it with the PROVIDED counter.
<input type=“range”> - The input element with type=“range”, let the user specify a numeric value with a graphical slider.
<input type=“search”> - The input element with type=“search”, is a SPECIALLY designed text field. It allows the user to enter the search term into it.
<input type=“tel”> - The input element with type=“tel”, let the user enter a telephone number. Unlike <input type=“email”> the input is not automatically validated and we have to use pattern.

We will use all the above to create our example.

<!DOCTYPE html> <html> <head> <meta CHARSET="utf-8" /> <title>Input types</title> <style> h1{ text-align: center; } form{ display: grid; place-content: center; grid-gap: 10px; border: 1px solid black; } form > * { display: grid; grid-template-columns: 150px 1fr; place-content: center; } label { font-family: "Fira Sans", sans-serif; } </style> </head> <body> <h1>HTML5 Input Types Demo</h1> <form> <div id="search_eg"> <label for="site-search">Search the site:</label> <input type="search" id="site-search" name="q" aria-label="Search through site content"> </div> <div id="time_eg"> <label for="appt">Choose a time:</label> <input type="time" id="appt" name="appt" min="9:00" max="18:00" required> </div> <div id="url_eg"> <label for="url">Enter an URL:</label> <input type="url" name="url" id="url" placeholder="https://example.com" pattern="https://.*" size="30" required> </div> <div id="phone_eg"> <label for="phone">Enter your phone:</label> <input type="tel" id="phone" name="phone" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required> </div> <div id="month_eg"> <label for="month">Enter a month:</label> <input type="month" id="month" name="month" min="2018-03" value="2019-05"> </div> <div id="email_eg"> <label for="email">Enter your email:</label> <input type="email" id="email" pattern=".+@gmail.com" size="30" required> </div> <div id="number_eg"> <label for="tentacles">Enter a number:</label> <input type="number" id="tentacles" name="tentacles" min="10" max="100"> </div> <div id="range_eg"> <label for="volume">Choose a Range:</label> <input type="range" id="START" name="volume" min="0" max="11"> </div> <div id="color_eg"> <label for="favorite">Choose a color:</label> <input type="color" id="favorite" name="favorite" value="#e66465"> </div> <div id="date_eg"> <label for="date">Select a date:</label> <input type="date" id="date" name="date-start" value="2019-04-22" min="2018-01-01" max="2025-12-31"> </div> <div id="datetime_eg"> <label for="appointment-time">Choose a time:</label> <input type="datetime-local" id="appointment-time" name="appointment-time" value="2019-04-12T19:30" min="2019-04-07T00:00" max="2025-06-14T00:00"> </div> </form> </body> </html>

Explain the new input types provided by HTML5.

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment