Skip to content
Related Articles

Related Articles

Improve Article

HTML | value Attribute

  • Difficulty Level : Basic
  • Last Updated : 22 Jul, 2019

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

    Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
Recommended Articles
Page :