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.
<!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.
<!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