HTML | DOM Input Text Object
The Input Text Object in HTML DOM is used to represent the HTML <input> element with type=”text” attribute. The <input> element with type=”text” can be accessed by using getElementById() method.
Syntax:
- It is used to access input text object.
document.getElementById("id");- It is used to create input element.
document.createElement("input");Input Text Object Properties:
| Property | Description |
|---|---|
| type | It is used to return the type of form element to the text field. |
| value | This property is used to set or return the value of the value attribute of the text field. |
| autocomplete | This property is used to set or return the value of the autocomplete attribute of a text field. |
| autofocus | This property is used to set or return whether a text field should automatically get focus when the page loads. |
| defaultValue | This property is used to set or return the default value of a text field. |
| disabled | This property is used to set or return whether a text field is disabled or not. |
| form | This property is used to return reference to the form that contains the text field. |
| list | This property is used to return a reference to the datalist that contains the text field. |
| maxLength | This property is used to set or return the value of the maxlength attribute of a text field. |
| name | This property is used to set or return the value of the name attribute of a text field. |
| pattern | This property is used to set or return the value of the pattern attribute of a text field. |
| placeholder | This property is used to set or return the value of the placeholder attribute of a text field. |
| readOnly | This property is used to set or return whether the text field is read-only or not. |
| required | This property is used to set or return whether the text field must be filled out before submitting a form. |
| size | This property is used to set or return the value of the size attribute of the text field. |
Methods
- focus() : It is used to get focus to the input text field.
- blur () : It is used to remove focus from the text field .
- select () : It is used to select the content of the Input text field.
Example 1: This example use getElementById() method to access <input> element with type=”text” attribute.
HTML
<!DOCTYPE html><html><head> <title> HTML DOM Input Text Object </title></head> <body> <h1>GeeksForGeeks</h1> <h2>DOM Input Text Object</h2> <input type="text" id="text_id" value="Hello Geeks!"> <p>Click on button to display the text field</p> <button onclick="myGeeks()">Click Here!</button> <p id="GFG"></p> <!-- script to access text field --> <script> function myGeeks() { var txt = document.getElementById("text_id").value; document.getElementById("GFG").innerHTML = txt; } </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=”text” attribute.
HTML
<!DOCTYPE html><html><head> <title> HTML DOM Input Text Object </title></head> <body> <h1>GeeksForGeeks</h1> <h2>DOM Input Text Object</h2> <p>Click the button to create Text Field</p> <button onclick = "myGeeks()"> Click Here! </button> <!-- script to create th element --> <script> function myGeeks() { /* Create an input element */ var x = document.createElement("INPUT"); /* Set the type attribute */ x.setAttribute("type", "text"); /* Set the value to the attribute */ x.setAttribute("value", "Hello Geeks!"); /* Append node to the body */ document.body.appendChild(x); } </script></body></html> |
Output:
Before click on the button:
After click on the button:
Supported Browsers:
- Google Chrome 1 and above
- Edge 12 and above
- Mozilla Firefox 1 and above
- Opera
- Safari 1 and above
Please Login to comment...