How to add a Time picker in Form using HTML5 ?
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:
Last Updated :
09 May, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...