Understanding new input types
We will look at the new input types in HTML5. The following input types mentioned are explained along with their respective code.
search
After the success of Google as a search engine, we can see a search box facility almost everywhere on the web. The search box is used on almost all the websites to find information on that site or the web in general. In HTML5, we can create a search box using the input type as search. The search box looks like a normal textbox but is used for search purposes.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title> Search Input type </title>
<h1> Search Input type </h1>
</head>
<p> Enter the search string in the textbox below and click on Go
</p>
<div>
<label for="searchid"> <em> Tutorial Search : </em> </label>
<input id="searchid" type="search" placeholder="Enter Search Item here">
<input type="submit" value="Go">
</div>
</html>
OUTPUT
In the screenshot, we have entered Hey as the search string. If we click on the blue cross at the right hand side of the search box, the string will disappear and we can enter a new search string in its place.
The search box is a crucial aspect of any website as it assists the user in finding content on the web or that web page depending on the way it is developed.
email and url
The email and url input types are the latest additions made specifically for the purpose of e-mail and web addresses. The e-mail address has to be written with the domain name between an @ sign and a dot (.), for example, [email protected]. It accepts the current standard format in which e-mail addresses are written.
If we do not write the e-mail address in a proper format, then it prompts the user to enter a valid e-mail address.
Most of the URLs are in the format http://www.xyzzzz.com. The URL has to be entered in this standard format along with the http or https protocols. If we do not follow the standardized format, then it prompts the user to enter a valid URL.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Input types: Email and URL </title>
</head>
<body>
<form>
<p> Enter your email address in the textbox below and click
<strong>Go</strong> </p>
<input type="email" placeholder="[email protected]">
<input type="submit" value="Go">
<br>
<hr>
<p> Enter the web address (URL) of the website in the textbox below and click <strong>Go </strong> </p>
<input id="website" type="url">
<input type="submit" value="Go">
</form>
</body>
</html>
In the example, the URL entered is not in a standard format. Hence, it prompts for a standard URL. If we enter an invalid e-mail address, it would prompt for a valid e-mail address.
Hence, the structure of e-mail addresses and URLs have been defined to make it easy for the web designer to write cleaner code in a more systematic manner.
date
Prior to the date feature in HTML5, we had to use JavaScript to develop a datepicker. However, with the advent of HTML5, it is much easier to create one. HTML5 has a lot of date options like datetime, week, time, and month other than the date feature. We will learn more about it in this chapter.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title> Date Input type </title>
<h2> Input type : Date </h2>
<p> Select an appropriate date from the datepicker below </p>
</head>
<body>
<label for="fstrd"> Select Date </label>
<input id="fstrd" type="date" value="2013-01-25">
</body>
</html>
OUTPUT
Hence, we do not have to invoke any JavaScript for creating a datepicker. We will now look at features like week, month, and time which are similar to the date feature.
week
We can enter a week and click on the dropdown to see the dates in the week for
a speciic year.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title> Week </title>
<h2> Input type : Week </h2>
</head>
<body>
<label for="fstrd"> Select Week </label>
<input id="fstrd" type="week">
</body>
</html>
OUTPUT
month
We can view and select a month for a particular year. Let's look at the following code to understand it better:
<!DOCTYPE html>
<html>
<head>
<title> Month </title>
<h2> Input type: Month </h2>
</head>
<body>
<label for="fstrd"> Select Month </label>
<input id="fstrd" type="month">
</body>
</html>
OUTPUT
Similarly we can select the date and time using the datetime attribute. We need to use the following code snippet for the same:
<label for="fstrd"> Date-Time </label>
<input id="fstrd" type="datetime">
OUTPUT
color
Earlier, we had to write a complex JavaScript code for creating a color palette. We can now create a color palette using HTML5.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title> Color input type in HTML5 </title>
<h2> Input Type: Color </h2>
</head>
<div>
<label for="color-ref"> Select a color of your choice :
</label>
<input id="color-ref" type="color">
<input type="submit" value="Go">
</div>
</html>
OUTPUT
