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

  • <input>: When the value attribute is present, it specifies the initial value of the input element.
    It has 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    valueinput
    Example-2:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    inputvalue
    Supported Browsers: The browser supported by value attribute in input element are listed below:

    • Apple Safari 1.0
    • Google Chrome 1.0
    • Firefox 1.0
    • Opera 1.0
    • Internet Explorer 2.0
  • <button>: When the value attribute is present, it specifies the initial value of the button element.

    Syntax:

    <button value = "value">

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    Before clicking the button:
    valuebutton
    After clicking the button:
    valuebutton
    Supported Browsers: The browser supported by value attribute in button element are listed below:

    • Apple Safari
    • Google Chrome
    • Firefox
    • Opera
    • Internet Explorer
  • <meter>: It specifies the current value of the gauge. The value must be between min and max attribute.

    Syntax:

    <meter value = "value">

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    valuemeter
    Supported Browsers: The browser supported by value attribute in meter element are listed below:

    • Apple Safari 6.0
    • Google Chrome 8.0
    • Firefox 6.0
    • Opera 11.0
    • Internet Explorer Not supported
  • <li>: When the value attribute is present, it specifies the initial value of the list item. It is only applicable on ordered list.



    Syntax:

    <li value = "number">list item </li>

    number specifies the value of the list item.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    valuelist
    Supported Browsers: The browser supported by value attribute in list item element are listed below:

    • Apple Safari
    • Google Chrome
    • Firefox
    • Opera
    • Internet Explorer
  • <option>: When the value attribute is present, it specifies the value of the option element.

    Syntax:

    <option value = "value"></option>

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    Before clicking the button:
    valueoption
    After clicking the button:
    valueoption
    Supported Browsers: The browser supported by value attribute in option element are listed below:

    • Apple Safari
    • Google Chrome
    • Firefox
    • Opera
    • Internet Explorer
  • <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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    • Apple Safari 6.0
    • Google Chrome 8.0
    • Firefox 16.0
    • Opera 11.0
    • Internet Explorer 10.0



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.