HTML | DOM Input Text Object - GeeksforGeeks

22 Feb, 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: 
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
Edge
Mozilla Firefox
Opera
Safari
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
ManasChhabra2
hritikbhatnagar2182
HTML-DOM
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?