Open In App

HTML | DOM Input Text value Property

Last Updated : 26 Aug, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

The Input Text value property in HTML DOM is used to set or return the value of a value attribute of the input field. The value attribute specifies the initial value of the input Text Field. It contains the default value or the user types.

Syntax: 

  • It returns the Input Text value property. 
textObject.value
  • It is used to set the Input Text value property. 
textObject.value = text

Property Value: It contains single value text which defines the value of the input text field.

Return Value: It returns the string value which represent the value of the Text Field.

Example 1: This example illustrates how to return Input Text value property. 

HTML
<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        HTML DOM Input Text value Property
    </title> 
</head> 
<body style="text-align:center;"> 
    <h1>GeeksForGeeks</h1> 
    <h2>DOM Input Text value Property</h2> 
    <input type="text" id="text_id" value="Hello Geeks!"> 
    <button onclick="myGeeks()">Click Here!</button> 
    <p id="GFG"></p>

    
    <!-- Script to return the Input Text value Property-->
    <script> 
        function myGeeks() { 
            var txt = document.getElementById("text_id").value; 
            document.getElementById("GFG").innerHTML = txt; 
        } 
    </script> 
</body> 
</html>                     

Output:
Before Clicking On Button: 

After Clicking On Button: 

Example 2: This example illustrates how to set Input Text value property. 

HTML
<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        HTML DOM Input Text value Property
    </title> 
</head> 
<body style="text-align:center;"> 
    <h1>GeeksForGeeks</h1> 
    <h2>DOM Input Text value Property</h2> 
    <input type="text" id="text_id" value="Hello Geeks!"> 
    <button onclick="myGeeks()">Click Here!</button> 
    <p id="GFG" style="font-size:20px;"></p>

    
    <!-- Script to set Input Text value Property-->
    <script> 
        function myGeeks() { 
            var txt = document.getElementById("text_id").value
                    = "GeeksForGeeks";
                    
            document.getElementById("GFG").innerHTML 
                    = "The value of the value attribute "
                      + "was changed to : " + txt; 
        } 
    </script> 
</body> 
</html>                    

Output: 
Before Clicking the Button: 

After Clicking the Button: 

Supported Browsers: The browser supported by DOM input Text value property are listed below: 

  • Google Chrome 1 and above
  • Edge 12 and above
  • Firefox 1 and above
  • Opera
  • Safari 1 and above

Next Article
Practice Tags :

Similar Reads