HTML | DOM Input Month Object
Last Updated :
29 Aug, 2022
The Input Month Object in HTML DOM is used to represent an HTML input element with type= “month” attribute. The input element with type= “month” attribute can be accessed by using getElementById() method.
Syntax:
- It is used to access <input> element with type=”month” attribute.
document.getElementById("id");
- It is used to create <input> element with type=”month” attribute.
document.createElement("input");
Property Values:
Property |
Description |
type |
This property is used to return the type of form element of the month field. |
value |
This property is used to set or return the value of the value attribute of a month field. |
autocomplete |
This property is used to set or return the value of the autocomplete attribute of a month field. |
autofocus |
This property is used to set or return whether a month field should automatically get focus when the page loads. |
defaultValue |
This property is used to set or return the default value of a month field. |
disabled |
This property is used to set or return whether a month field is disabled or not. |
form |
This property is used to return reference to the form that contains the month field. |
list |
This property is used to return a reference to the datalist that contains the month field. |
max |
This property is used to set or return the value of the max attribute of a month field. |
min |
This property is used to set or return the value of the min attribute of a month field. |
name |
This property is used to set or return the value of the name attribute of a month field. |
placeholder |
This property is used to set or return the value of the placeholder attribute of a month field. |
readOnly |
This property is used to set or return whether the month field is read-only or not. |
required |
This property is used to set or return whether the month field must be filled out before submitting a form. |
step |
This property is used to set or return the value of the step attribute of a month field. |
Input Month Object Methods:
Method |
Description |
stepDown() |
This method is used to decrements the value of the input month by a specified number. |
select() |
This method is used to select the Input month field content. |
stepUp() |
This method is used to increment the value of the input month by a specified number. |
Example 1: This example use getElementById() method to access <input> element with type=”month” attribute.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
HTML DOM Input Month Object
</ title >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h2 >DOM Input Month Object</ h2 >
< input type = "month" id = "month" value = "2018-02" >
< button onclick = "myGeeks()" >Click Here!</ button >
< p id = "GFG" ></ p >
< script >
function myGeeks() {
var val = document.getElementById("month").value;
document.getElementById("GFG").innerHTML = val;
}
</ script >
</ body >
</ html >
|
Output:
Before click on the button:
After click on the button:
Example 2: This example use document.createElement() method to create <input> element with type=”month” attribute.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
HTML DOM Input Month Object
</ title >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h2 >DOM Input Month Object</ h2 >
< button onclick = "myGeeks()" >Click Here!</ button >
< script >
function myGeeks() {
/* Create an input element */
var x = document.createElement("INPUT");
/* Set the type attribute */
x.setAttribute("type", "month");
/* Set the value to type attribute */
x.setAttribute("value", "2018-02");
/* Append the element to body tag */
document.body.appendChild(x);
}
</ script >
</ body >
</ html >
|
Output:
Before click on the button:
After click on the button:
Supported Browsers:
- Google Chrome 20 and above
- Edge 12 and above
- Opera 11 and above
Share your thoughts in the comments
Please Login to comment...