In this article, we will see how to add a Time picker in Form using HTML5. As we know that a Time picker is used to provide tp select a single value from a pre-determined set. Basically, it creates an input field that accepts a time. We can open a time picker by clicking on a clock icon. The UI Design of the Time picker is different from browser to browser.
Follow the below approach to complete the task:
- Firstly, we create an HTML document that contains a Form element.
- Add a <input> tag under the form.
- Use the type attribute with the input element.
- Set the type attribute to the value “time”.
Syntax:
<input type="time">
Example: In this example, we will use <input> element.
HTML
<!DOCTYPE html><html>
<head>
<title>
How to add a Time picker
in Form using HTML5?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>
How to add a Time picker
in Form using HTML5?
</h2>
<form action="#">
<legend>
Select Time:
<input type="time" name="time">
</legend>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
|
Output: