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;" > w3wiki </ 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:
Contact Us