HTML | value Attribute

Last Updated : 30 Nov, 2021

The value attribute in HTML is used to specify the value of the element with which it is used. It has different meaning for different HTML elements. Usage: It can be used with the following elements: <input>, <button>, <meter>, <li>, <option>, <progress>, and <param>, <output>.

<input>:

When present in "button", "reset" and "submit" it specifies the text on the button.
When present in "text", "password" and "hidden" it specifies the initial value of the input field.
When present in "checkbox", "radio" and "image" it specifies the value associated with the input.

Syntax:
```
<input value = "value">
```

Example-1:

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:

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 type = "button" value = "Click me!">

    </body>
</html>

Output:

<button>:

Syntax:
```
<button value = "value">
```

Example:

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>
        
        <button id="btn" value="GeeksforGeeks" onclick="geek()">
         Click me!</button>
        
        <p id="g"></p>
        
        <script>
            function geek() {
              var x = document.getElementById("btn").value;
              document.getElementById("g").innerHTML = "Welcome to " + x;
            }
        </script>
    </body>
</html>

Output: Before clicking the button: After clicking the button:

<meter>:

Syntax:
```
<meter value = "value">
```

Example:

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>
        
        <p>Health: <meter min="0" low="40" high="90"
                          max="100" value="60"></meter></p>
    </body>
</html>

Output:

<li>:

Syntax:
```
<li value = "number">list item </li>
```

number: specifies the value of the list item.

Example:

html

<!DOCTYPE html>
<html>
    <head>
        <title>HTML value Attribute</title>
    </head>
    <body >
        <h1 style = "color: green;">
            GeeksforGeeks
        </h1>
        
        <h2>
            HTML value Attribute
        </h2>
        
        <p>Sorting Algorithms</p>
        
        <ol>
          <li value="50">Merge sort</li>
          <li>Quick sort</li>
          <li>Insertion sort</li>
        </ol>
    </body>
</html>

Output:

<option>:

Syntax:
```
<option value = "value"></option>
```

Example:

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>
        
        Sorting Algorithms:
        <select id="opt">
          <option value="quick">Quick sort</option>
          <option value="merge">Merge sort</option>
          <option value="insertion">Insertion sort</option>
        </select>
        
        <button type="button" onclick="geek()">Click me!</button>
        <p id = "p"></p>
        <script>
            function geek() {
              var x = document.getElementById("opt").selectedIndex;
              var y = document.getElementsByTagName("option")[x].value;
              document.getElementById("p").innerHTML = "The selected 
              option has value equals " + y + ".";
            }
        </script>
    </body>
</html>

Output: Before clicking the button: After clicking the button:

<progress>:

Syntax:
```
<progress value = "number"></progress>
```

number specifies the initial value of the progress element.

Example:

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>
        
        Progress:
        <progress value="65" max="100">
        </progress>
    </body>
</html>