Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to add a Time picker in Form using HTML5 ?

  • Last Updated : 25 Oct, 2021

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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”.

Syntax:

<input type="time"> 

Example:

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!