fastread homefastrread library fastread menu

HTML5 : Understanding new input types

Tutorial by:Franklin Dessi      Date: 2016-08-26 00:14:50

❰ Previous Next ❱

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

html5 search

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, xyz@abc.com. 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="abcxyzpqr@email.com">
<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>

SEARCH

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

HTML5 DATEPICKER

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

HTML5 WEEK

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

HTML5 MONTH

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

HTML5 DATETIME

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

 HTML5 COLOR PICKER

 

❰ Previous Next ❱


HTML5

Submit Your Thought, Tutorial, Articls etc.

Submit Your Information India's Number one online promotion website