HTML | DOM Input Text Object
Last Updated :
26 Aug, 2022
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 >
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 >
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
Share your thoughts in the comments
Please Login to comment...