Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM Input Time Object

  • Last Updated : 29 Jun, 2021

The Input Time object in HTML DOM represents an <input> element with type = “time” attribute. The time attribute can be accessed by using getElementById() method.

Syntax:  

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

document.getElementById("id");

where id is assigned to the <input> tag.

Property Values:  



  • list: It returns the reference of data list that contains the time field.
  • form: It returns the reference of form that contains the time field.
  • autocomplete: It is used to set or return the value of the autocomplete attribute of the time field.
  • autofocus: It is used to set or return if the time field should automatically get focus when the page loads.
  • defaultvalue: It is used set or return the default value of a time field.
  • disabled: It is used to set or return whether a time field is disabled or not.
  • max: It is used to set or return the value of the max attribute of a time field.
  • min: It is used to set or return the value of the min attribute of a time field.
  • name: It is used to set or return the value of the name attribute of a time field.
  • readOnly: It is used to set or return whether the time field is read-only or not.
  • required: It is used to set or return whether the time field must be filled out before submitting a form.
  • size: It is used to set or return the value of size attribute of the time field.
  • type: It returns the type of form element the time field belongs.
  • value: It is used set or return the value of the value attribute of a time field.

Example 1: This example describes the getElementById() method to access the <input> element with type = “time” attribute.  

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            DOM Input Time Object
        </title>
    </head>
     
    <body>
        <center>
            <h1 style = "color:green;">
                GeeksForGeeks
            </h1>
             
            <h2>DOM Input Time Object</h2>
                 
            <label for = "uname" style = "color:green">
                <b>Enter time</b>
            </label>
             
            <input type = "time" id = "gfg"
                placeholder = "Enter time">
             
            <br><br>
                 
            <button type = "button" onclick = "geeks()">
                Click
            </button>
             
            <p id = "GFG"></p>
 
             
            <script>
                function geeks() {
                    var link = document.getElementById("gfg").value;
                    document.getElementById("GFG").innerHTML = link;
                }
            </script>
        </center>
    </body>
</html>                   

Output: 
Before Click on the button: 
 

After Click on the button: 
 

Example 2: This example describes the document.createElement() method to create <input> element with type = “time” attribute.  

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            DOM Input URL Object
        </title>
    </head>
     
    <body>
    <center>
        <h1 style="color:green">
            GeeksForGeeks
        </h1>
             
        <h2>DOM Input time Object </h2>
                 
        
              <label for = "uname" style = "color:green">
                <b>Enter time</b>
        </label>
           <p id="GFG"></p>
 
        <button type = "button" onclick = "myGeeks()">
            Click
        </button>
             
        
             
        <script>
            function myGeeks() {
                var link = document.createElement("INPUT");
                link.setAttribute("type", "time");
                link.setAttribute("value", "08:08:19");
                document.getElementById("GFG").appendChild(link);
            }
        </script>
        </center>
    </body>
</html>                    

Output: 
Before Click on the button: 
 

Before Click on the button: 
 

Supported Browsers:

  • Google Chrome
  • Internet Explorer (after IE 12)
  • Opera
  • Safari

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :