Why do we need to specify the value with HTML elements ?

Last Updated : 23 May, 2022

In this article, we will see about the need to specify the value with HTML elements along with knowing the supported elements & their implementation through the examples.

The value with the HTML element defines the default value for that element & those element’s values will be displayed in the element on page load. The value attribute is used to specify the element’s value that is used with that element. The meaning of the value attribute will vary for different HTML elements.

Supported Elements: The value attribute can be used with the following elements: <input>, <data>, <button>, <meter>, <li>, <option>, <progress>, and <param>, <output>.

Syntax:

<input value="textData">

Attribute:

textData: This value specifies the value of the specific element for which it is declared.

Example 1: This example describes the value attribute in HTML.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>HTML value Attribute</title> 
</head> 
  
<body style="text-align:center"> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
    <h2> 
        HTML value Attribute 
    </h2> Input: 
    <input type="text" value="GeeksforGeeks"> 
</body> 
</html>

Output:

Example 2: This example describes the HTML value attribute with <button> tag.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>HTML value Attribute</title> 
</head> 
  
<body style="text-align:center"> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
    <h3> 
        HTML value Attribute 
    </h3> 
    <button type="button" 
        onclick="alert('Welcome to GeeksforGeeks')"> 
        Show 
    </button> 
</body> 
</html>