Skip to content
Related Articles

Related Articles

HTML | value Attribute

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 30 Nov, 2021
View Discussion
Improve Article
Save Article

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:
    valueinput
  • 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:
    inputvalue
  • <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:
    valuebutton
    After clicking the button:
    valuebutton
  • <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:
    valuemeter
  • <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:
    valuelist
  • <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:
    valueoption
    After clicking the button:
    valueoption
  • <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:
    valueprogress
  • Supported Browsers: The browser supported by value attribute in progress element are listed below:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari


    My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!