Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are the new types introduced in HTML for input type?
There are a number of new HTML5 form input types, 13 to be exact, that make it much easier for web designers to create engaging and user-friendly web forms. In web browsers that support them, the new HTML5 input types provide data validation, date picker controls, colour picker controls, inline help text, and other features.
Input types provided by HTML5
In this article we will take a look at all of the new form input types and some examples to demonstrate their usage.
<input type=”color”>
The colour input type allows the user to choose a colour from a colour picker and returns the hexadecimal value (#rrggbb). If no value is specified, the default is #000000, which is black.
<input type=”date”>
With the date input type, the user can choose a date from a drop-down calendar. The time is not included in the date value, only the year, month, and day are present.
<input type=”datetime”>
This input type allows the user to enter a date, time, and time zone.
<input type=”datetime-local”>
The user can choose both the local date and time using the datetime-local input type, including the year, month, and day as well as the time in hours and minutes.
<input type=”email”>
The user can enter their email address using the email input type. It is very similar to a typical text input type, but when combined with the required attribute, the browser may check for patterns to ensure that an email address is entered in the correct format.
<input type=”month”>
With the month input type, the user can choose a month and year from a drop-down calendar. The value is a string in the format "YYYY-MM," where YYYY represents the four-digit year and MM represents the month number.
<input type=”number”>
The number input type allows a numerical value to be entered. We can also use the additional attributes min, max, and step to limit the user to only entering acceptable values.
<input type=”range”>
The range input type allows us to enter a numerical value that falls within a given range. It functions similarly to number input, but with a simpler control for entering a number.
<input type=”search”>
Search input fields can be created using the search input type. A search field typically behaves similarly to a regular text field, but in some browsers, such as Chrome and Safari, as soon as you begin typing in the search box, a small cross appears on the right side of the field, allowing you to quickly clear the search field.
<input type=”tel”>
The tel input type allows for the entry of phone numbers. Browsers do not natively support tel input validation. However, you can use the placeholder attribute to assist users in entering the correct format for a phone number, or you can use the pattern attribute to specify a regular expression to validate user input.
<input type=”time”>
A time can be entered using the time input type (hours and minutes). Based on the time setting on the local system, the browser can input times in 12- or 24-hour format.
<input type=”url”>
URLs or web addresses can be entered using the url input type. We can enter multiple URLs by using the multiple attribute. Furthermore, if the required attribute is specified, the browser will perform validation to ensure that only text that matches the standard URL format is entered into the input box.
<input type=”week”>
With the week input type, the user can choose a week and year from a drop-down calendar.
Example
In this example we will create a form and use the input elements: color, date, datetime and datetime local inside it.
<!DOCTYPE html>
<html>
<head>
<title> HTML 5 form input types</title>
<style>
form{
width:400px;
background-color:mistyrose;
padding:10px;
}
input{
margin:10px;
}
</style>
</head>
<body>
<form>
<label for="color">Choose a Color : </label>
<input type="color"><br>
<label for="date">Choose a Date : </label>
<input type="date"><br>
<label for="time">Select the Time :</label>
<input type="time"><br>
<label for="datetime">Enter the DateTime :</label>
<input type="datetime"><br>
<label for="datetime-local">Choose the DateTime-local :</label>
<input type="datetime-local">
</form>
</body>
</html>
Example
The following example demonstrates the usage of month, week, number and range input types in HTML5.
<!DOCTYPE html>
<html>
<head>
<title> HTML 5 form input types</title>
<style>
form{
width:350px;
background-color:lightgoldenrodyellow;
padding:10px;
}
input{
margin:10px;
}
</style>
</head>
<body>
<form>
<label for="month">Select a month : </label>
<input type="month"><br>
<label for="week">Select the week : </label>
<input type="week"><br>
<label for="number">Choose a number :</label>
<input type="number"><br>
<label for="range">Range :</label>
<input type="range" min="1" max="5" step="2"><br>
</form>
</body>
</html>
Example
In this example we will use the search, email, tel and url input types inside the form tag of HTML.
<!DOCTYPE html>
<html>
<head>
<title> HTML 5 form input types</title>
<style>
form{
width:350px;
background-color:lightpink;
padding:10px;
}
input{
margin:10px;
}
</style>
</head>
<body>
<form>
<label for="search">Enter the search string: </label>
<input type="search"><br>
<label for="email">Enter Email ID : </label>
<input type="email"><br>
<label for="tel">Enter Phone Number :</label>
<input type="tel"><br>
<label for="url">Type the URL : </label>
<input type="url"><br>
</form>
</body>
</html>
64 Views
