HTML DOM Input Time Object

HTML Web Development Front End Technology

The HTML DOM Input Time Object represents an input HTML element with type Time.

Syntax

Following is the syntax −

Creating an <input> with type time

var timeObject = document.createElement(“input”);
timeObject.type = “time”;

Attributes

Here, “time” can have the following attributes −

Attributes	Description
autocomplete	It defines the value of autocomplete attribute of a time field
autofocus	It defines if the time field should be focused on initial page load.
defaultValue	It sets/returns the default value of time field
disabled	It defines if time field is disabled/enabled
form	It returns a reference of enclosing form that contains the time field
max	It returns/sets the value of max attribute of time field
min	It returns/sets the value of min attribute of time field
name	It defines the value of name attribute of a time field
readOnly	It defines if the time field is read only or not
required	It defines if the time field is compulsory to be filled in order to submit the form
step	It defines the value of the step attribute of time field
type	It returns the type of form element of time field
value	It defines the value of the value attribute of a time field

Methods

And, also the following methods −

booleanValue	Details
stepDown	It defines the number of minutes the time field should decrease.
stepUp	It defines the number of minutes the time field should increase.

Example

Let us see an example of Input Time form property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Input Time form</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form id="Physics">
<fieldset>
<legend>Time-form</legend>
<label for="TimeSelect">Examination Time :
<input type="time" id="TimeSelect" value="14:00" disabled>
</label>
<input type="button" onclick="getform()" value="Which Exam?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputTime = document.getElementById("TimeSelect");
   function getform() {
      divDisplay.textContent = inputTime.form.id+' exam starts from '+inputTime.value;
   }
</script>
</body>
</html>