HTML | value Attribute

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 the value attribute is present, it specifies the initial value of the input element.
It has a different meaning for different input type:

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:

<!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:

<!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>: When the value attribute is present, it specifies the initial value of the button element.

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

Example:

<!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>: It specifies the current value of the gauge. The value must be between min and max attribute.

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

Example:

<!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>: When the value attribute is present, it specifies the initial value of the list item. It is only applicable on the ordered list.

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

number: specifies the value of the list item.

Example:

<!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>: When the value attribute is present, it specifies the value of the option element.

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

Example:

<!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>: When the value attribute is present, it specifies the value of the progress element.

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

number specifies the initial value of the progress element.

Example:

<!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>

Output:

Supported Browsers: The browser supported by value attribute in progress element are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

Article Tags :

HTML

Web Technologies

HTML-Attributes