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
How to add a Time picker in Form using HTML5?
Incorporating time pickers into web forms is a common requirement for many web developers. While you might think that adding time pickers might be a complicated task and you might have to use JavaScript libraries. But to your surprise, this is a relatively easy task using tags provided by HTML. This can significantly reduce the amount of code and time required to implement date and time pickers in your web application.
To create the time control using HTML, we have <input type=” time”> tag, where time value can be used in TYPE attribute of <input> tag. Let’s dive into the article to learn more about adding a time picker in form.
HTML <input type=”time”>
A web form's time input field is created using the HTML <input type="time"> element. It enables users to enter a particular time value in a predefined format. When you need users to submit time-related data, such as appointment times, event schedules, or deadlines, this input type is especially helpful.
Depending on the browser and device being used, the <input type="time"> element offers a user-friendly interface for picking the time by showing a dropdown or a time picker widget.
Syntax
Following is the syntax for HTML time input field
<input type="time">
Example
In the following example, we are creating a simple form with a time picker.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
background-color: #E8DAEF;
}
p {
font-family: verdana;
}
</style>
</head>
<body>
<div>
<p>Choose time:</p>
<input type="time" />
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the text along with the input field mentioned with the time, allowing the user to choose the time displayed on the webpage.
Example
Considering another scenario where we are going to use the datalist tag with the time picker.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
background-color: #D5F5E3;
color: #DE3163;
}
p {
font-family: verdana;
}
</style>
</head>
<body>
<form action="#">
<p> Avaliable time : <input type="time" name="available" list="tutorial">
<br>
<br>
<br>
<input type="submit" value="Submit">
</p>
</form>
<datalist id="tutorial">
<option value="13:00">
<option value="15:30">
<option value="20:00">
<option value="23:55">
</datalist>
</body>
</html>
On running the above code, an output window will pop up consisting of the input type of time, allowing the user to select the time from the options provided in the code displayed on the webpage.
Example
Let’s look at the following example, where we are going to add the time picker using the min and max attributes.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
background-color: #D6EAF8;
font-family: verdana;
}
</style>
</head>
<body>
<form action="#">
<label for="tutorial"> Choose slot Time: </label>
<input id="tutorial" type="time" name="slot" min="10:00" max="16:00" />
<br>
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
When we run the above code, the output window will pop up, consisting of the input field with the type time mentioned and the min and max attributes, allowing the user to choose the time between them. If the user selects a time outside of that range, it will throw an exception.
17 Views
