HTML | value Attribute

Last Updated : 30 Nov, 2021
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: html 
    <!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: html 
    <!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: html 
    <!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: html 
    <!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: html 
    <!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: html 
    <!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: html 
    <!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
Comment
Article Tags:
Web Technologies
HTML
HTML-Attributes

Explore