Open In App

How to add a Time picker in Form using HTML5 ?

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads