HTML | DOM Input Time form Property

How to add a Time picker in Form using HTML5 ?

Last Updated : 09 May, 2023

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:

HTML | DOM Input Time form Property

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to add a date picker in form using HTML ?

To add a date picker in a form using HTML, you can use the <input> element with the type attribute set to "date". A date picker is an interactive dropdown that makes it easy to choose the date from a calendar instead of typing it manually. In this article, we will learn how to add a date picke

How to add date and time picker using only one tag in HTML ?

The date picker in HTML is a convenient tool that enhances user experience by allowing users to select a date from a dropdown menu rather than typing it manually. By using the <input> element with the type attribute set to "date", you can generate an interactive date picker in your HTML docume

HTML | DOM Input Time form Property

The DOM Input Time form Property in HTML DOM is used for returning the reference to the form containing the time field. It is read-only Property that returns a form object on success. Syntax: timeObject.form Return Values: It returns a string value which specify the reference of the form containing

HTML | DOM Input Time value Property

The DOM Input Time value Property in HTML DOM is used to set or return the value of the value attribute of a Time field. This value attribute is used to define the time for the Time field.Syntax: It return the value property. timeObject.valueIt is used to set the value property. timeObject.value = h

HTML | DOM Input Time min Property

The DOM Input Time min Property is used to set or return the value of the min attribute of a number field. The min attribute defines the minimum time for an input Time field. Syntax: It returns the min property.timeObject.minIt is use to set the min property.timeObject.min = hh:mm:ss.ms Property val

HTML | DOM Input Datetime form Property

The Input Datetime form property is used for returning a reference to the form containing the Datetime field. It is a read-only property that returns a form object on success, else if the date control is not in the form, it returns NULL. Syntax: datetimeObject.form Return Values: It returns a string