Open In App

HTML | value Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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



    Last Updated : 30 Nov, 2021
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
Similar Reads