Skip to content
Related Articles
Open in App
Not now

Related Articles

How to add a Time picker in Form using HTML5 ?

Improve Article
Save Article
  • Difficulty Level : Expert
  • Last Updated : 25 Oct, 2021
Improve Article
Save Article

As we know that a Time picker is used to provide tp select 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 browsers.

Follow the below approach to complete the task:

  • Firstly, we create an HTML document that contains a Form element.
  • Add an <input> tag under the form.
  • Use the type attribute with the input element.
  • Set the type attribute to value “time”.


<input type="time"> 



<!DOCTYPE html>
        How to add a Time picker 
        in Form using HTML5?
<body style="text-align:center;">
    <h1 style="color:green;">
        How to add a Time picker 
        in Form using HTML5?
    <form action="#">
            Select Time: 
            <input type="time" name="time">
        <input type="submit" value="Submit">


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!