HTML | DOM Input Month Object
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 >w3wiki</ h1 > < h2 >DOM Input Month Object</ h2 > < input type = "month" id = "month" value = "2018-02" > < button onclick = "myBeginner()" >Click Here!</ button > < p id = "GFG" ></ p > <!-- script to access input element of type month attribute --> < script > function myBeginner() { 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 >w3wiki</ h1 > < h2 >DOM Input Month Object</ h2 > < button onclick = "myBeginner()" >Click Here!</ button > <!-- script to create input element of type month attribute --> < script > function myBeginner() { /* 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