HTML5 New Input Types

By | February 3, 2020

HTML5 is a new version of HTML. Many new elements have come in HTML5 and many elements have been removed, similarly there are many types of input that are new in HTML5. Let’s see. These new types have come to simplify the end uses for improving the web page. If a browser does not sport them, it will show them as a normal box.

Below are some examples of new inputs. Let’s understand them.


<input type="date">
<input type="email">
<input type="number">
<input type="color">
<input type="datetime-local">
<input type="month">
<input type="range">
<input type="search">
<input type="tel">
<input type="time">
<input type="url">
<input type="week">

Input type date:-

Input Type gives a calendar to the date it uses, allowing it to pick a date.

<form>
	<label>Select Date:</label>
	<input type="date" name="sdate">
</form>

Output:-

input

Input type email:-

Input Type allows email users to enter their email. When input type email, the browser knows that it is an email and it treats it as an email. If we look at its output, it looks like a normal input box to us.

<form>
	<label>Email Address:</label>
	<input type="email">
</form>

Output:-

email

Input type number:-

Input type number is used to enter numeric mind in the input box. You can also set this numeric value to minimum and maximum.


<form>
	<label>Enter Number:</label>
	<input type="number" min="1" max="15" />
</form>

Output:-

number

Input type color:-

Input Type allows color picks to be used and returns the color to you as hexadecimal.


<form>
	<label>Select Color:</label>
	<input type="color" />
</form>

Output:-

color

Input type datetime-local:-

The input type allows using datetime-local to select year end month as well as time and date.

<form>
	<label>Select date and time:</label>
	<input type="datetime-local" />
</form>

Input type month:-

Input Type allows the user to select the input message month.

<form>
	<label>Select Month:</label>
	<input type="month" />
</form>

Input type range:-

Using the input type range allows the user to select the number range.

<form>
	<label>Range:</label>
	<input type="range" />
</form>

Output:-

range

Input type search:-

Input Type provides a search box to the search user in which he can search anything by typing.

<form>
	<label>Search:</label>
	<input type="search" />
</form>

Input type tel:-

Input type tel is used to enter the telephone number.

<form>
	<label>Enter Telephone Number:</label>
	<input type="tel" />
</form>

Input type time:-

Input type time is used to enter time.

<form>
	<label>Time:</label>
	<input type="time" />
</form>

Input type url:-

Input type URL is used to enter any URL. Input type URL, the browser automatically understands that it contains the URL.


<form>
	<label>Enter URL:</label>
	<input type="url" />
</form>

Input type week:-

Input Type allows to select week using calendar messages in the week input box.

<form>
	<label>Enter Week:</label>
	<input type="week" />
</form>
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *