HTML DOM Input Time Object

HTMLWeb DevelopmentFront 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 −

AttributesDescription
autocompleteIt defines the value of autocomplete attribute of a time field
autofocusIt defines if the time field should be focused on initial page load.
defaultValueIt sets/returns the default value of time field
disabledIt defines if time field is disabled/enabled
formIt returns a reference of enclosing form that contains the time field
maxIt returns/sets the value of max attribute of time field
minIt returns/sets the value of min attribute of time field
nameIt defines the value of name attribute of a time field
readOnlyIt defines if the time field is read only or not
requiredIt defines if the time field is compulsory to be filled in order to submit the form
stepIt defines the value of the step attribute of time field
typeIt returns the type of form element of time field
valueIt defines the value of the value attribute of a time field

Methods

And, also the following methods −

booleanValueDetails
stepDownIt defines the number of minutes the time field should decrease.
stepUpIt 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>

Output

This will produce the following output −

Before clicking ‘Which Exam?’ button −

After checking ‘Which Exam?’ button −

raja
Published on 25-Jul-2019 15:41:25
Advertisements