Explain the form new input types in HTML5 ?
Last Updated :
30 Jul, 2024
In this article, we will discuss the functionality of the newer form input types provided by HTML5. Sometimes, while filling the registration form or any online form, it would require to follow the proper format to fill the particular data. Now it's easy to use the webform to fill up the common data like date, email, url etc. There are almost 13 new input types introduced in HTML5 form. We will see all the input types & understand them one by one.
Input Type attributes:
- color: This input type allows the user to select a color from a color picker.
- date: This input type allows the user to select a date from a drop-down calendar.
- time: This input type allows the user to enter a time.
- datetime: This input type allows the user to select date and time along with timezone.
- datetime-local: This input type allows the user to select both local date and time.
- week: This input type allows the user to select week and year from the drop-down calendar.
- email: This input type allows the user to enter an e-mail address.
- month: This input type allows the user to select a month and year from a drop-down calendar.
- number: This input type allows the user to enter a numerical value.
- range: This input type allows the user to enter a numerical value within a specified range.
- search: This input type allows the user to enter a search string within the input field.
- tel: This input type allows the user to enter a telephone number.
- url: This input type allows the user to enter the URL.
We will use the above attributes & understand their usage through the example.
Example 1: In this example, you will get to know about color, date and time input type.
Date Syntax:
<input type="date">
Time Syntax:
<input type="time">
Color Syntax:
<input type="color">
Note: date and time are not supported by the Internet Explorer and Safari browsers.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
text-align: center;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome To GeeksforGeeks</h1>
<form>
<label for="color">Select Color : </label>
<input type="color" />
</form>
<br />
<form>
<label for="date">Select Date : </label>
<input type="date" />
</form>
<br />
<form>
<label for="time">Select Time :</label>
<input type="time" />
</form>
</body>
</html>
Output:
Example 2: In this example, you will get to know about datetime, datetime-local and week input type.
Datetime Syntax:
<input type="datetime">
Datetime-local Syntax:
<input type="datetime-local">
Week Syntax:
<input type="week">
Note: datetime-local and week are not supported by Firefox, Safari, and Internet Explorer browsers.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
text-align: center;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome To GeeksforGeeks</h1>
<form>
<label for="date">Enter Date-Time : </label>
<input type="datetime" />
</form>
<br />
<form>
<label for="date">Select Date-Time Local : </label>
<input type="datetime-local" />
</form>
<br />
<form>
<label for="time">Select Week : </label>
<input type="week" />
</form>
</body>
</html>
Output:
Example 3: In this example, you will get to know about email, month, number and range input type.
Email Syntax:
<input type="email">
Month Syntax:
<input type="month">
Note: month is not supported by Firefox, Safari and Internet Explorer browsers.Â
Number Syntax:
<input type="number">
Range Syntax:
<input type="range">
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
text-align: center;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome To GeeksforGeeks</h1>
<form>
<label for="mail">Enter Email : </label>
<input type="email" />
</form>
<br />
<form>
<label for="date">Select Month : </label>
<input type="month" />
</form>
<br />
<form>
<label for="number">Select Number : </label>
<input type="number" />
</form>
<br />
<form>
<label for="number">Select Number in Range : </label>
<input type="range" min="1" max="10" step="1" />
</form>
</body>
</html>
Output:
Example 4: In this example, you will get to know about search, tel and url input types.
Search Syntax:
<input type="search">
Tel Syntax:
<input type="tel">
Note: Â Currently tel is not supported by any browser.
Url Syntax:
<input type="url">
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
text-align: center;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome To GeeksforGeeks</h1>
<form>
<label for="search">Enter Search string : </label>
<input type="search" placeholder="search ..." />
</form>
<br />
<form>
<label for="number">Enter Telephone No. : </label>
<input type="tel" placeholder="xxx-xxx-xxxx" />
</form>
<br />
<form>
<label for="url">Enter Url : </label>
<input type="url" placeholder="https://www..." />
</form>
</body>
</html>
Output:
Similar Reads
How to set float input type in HTML5 ?
HTML5 is the latest version of Hypertext Markup Language (HTML), the standard language for creating web pages and web applications. With HTML5, new input types were introduced to make web form creation easier and more accessible. These input types include text, password, checkbox, radio, submit, res
3 min read
Difference Between Input Type number and tel in HTML
In HTML5, form inputs have been significantly enhanced to facilitate more specific data types and improve user experience across various devices. Among these enhancements, the number and tel input types are notable for their specific purposes. Understanding the distinction between these two types is
3 min read
HTML DOM Input Tel type Property
The DOM Input tel type property in HTML DOM is used to return the type of form element of the input tel field. It always returns the "tel" for an Input tel field. Syntax: telObject.typeReturn Values: It returns a string value that represents the type of form element of the tel field. The below progr
1 min read
How to define keyboard input in HTML5 ?
The phrase tag is used to define the keyboard input. The text enclosed by <kbd> tag is typically displayed in the browser’s default monospace font. In this article, we define the keyboard input by using various types of tags like <kbd>, <code>, <em>, <var>, and <samp
1 min read
HTML DOM Input Text type Property
The Input Text type Property in HTML DOM is used to return the type of form element of the text field. It always returns the text for an Input text field. Syntax:Â textObject.typeReturn Value: It returns a string value that represents the type of form element the input text field is. Below program i
1 min read
How do we take password input in HTML forms ?
In this article, we learn how to create a password input field in HTML. This can be done by using the <input> tag with type attribute which is set to the value "password". It involves sensitive information about the data of the user. The text in the input password field will be changed into bu
1 min read
HTML | DOM Input Date type Property
The Input Date type property is used for returning the type of form element the date field is. The Input Date type property returns a string that represents the type of form element the date field is. Syntax: inputdateObject.type Return Values: It returns a string value that represents the type of f
1 min read
Which input type is used to hide the input field to be displayed in HTML Form ?
The form tag is generally used to create forms for entering data. We can use different form tag attributes like text boxes, text area, checkboxes, radio buttons, buttons, dropdown list, etc. to collect data from the users. We need to use the HTML <input type=â€hiddenâ€> type for hiding the input
1 min read
Spectre Forms Input types
Spectre Forms Input types class is used to define the input types of the input field of a form. It can be implemented by pure HTML. Forms Input types Classes: There is no defined class for the HTML input type. Syntax: <input type="HTML input type attribute"> Example: HTML <!DOCTYPE html>
1 min read
How to Add Input Field inside Table Cell in HTML ?
In HTML, adding input fields inside the table cells can be done to make the application user interactive and useful in the scenarios of building forms, data entry systems, etc. Below are the approaches to add input field inside a Table Cell in HTML: Table of Content Using 'input' tagUsing data Attri
3 min read