Open In App

HTML | value Attribute

Last Updated : 30 Nov, 2021
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



    Previous Article
    Next Article

Similar Reads

How href attribute is different from src attribute in HTML ?
In HTML5, the href and src attributes play distinct roles in defining paths or URLs, each associated with specific HTML elements. The href attribute, commonly found in an anchor (&lt;a&gt;) elements, points to the destination of hyperlinks, facilitating navigation. The src attribute, used with elements like &lt;img&gt; and &lt;script&gt;, specifies
1 min read
HTML &lt;button&gt; value Attribute
The value attribute for &lt;button&gt; element in HTML is used to specify the initial value of the button element. Syntax: &lt;button value = "value"&gt; Example: C/C++ Code &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;HTML button value Attribute&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;bod
1 min read
HTML | input value Attribute
The value attribute for &lt;input&gt; element in HTML is used to specify the initial value of the input element. It has different meaning for different input type: The "button", "reset" and "submit" property specifies the text on the button. The "text", "password" and "hidden" property specifies the initial value of the input field. The "checkbox",
1 min read
HTML | &lt;meter&gt; value Attribute
The &lt;meter&gt; value attribute in HTML is used to specify the current value of the gauge. The specified value must be in between the min and max attribute.Syntax: &lt;meter value="number"&gt; Attribute Value: This attribute contains single value number which is required. It is used to specify the floating point number that is the current value o
1 min read
HTML | &lt;li&gt; value Attribute
The &lt;li&gt; value attribute in HTML is used to specify the initial value of the list item. It is only applicable on the ordered list. Syntax: &lt;li value="number"&gt;list items &lt;/li&gt; Attribute Value: This attribute contains single value number which is used to specify the value of the list items. Example 1: This example uses &lt;li&gt; va
1 min read
HTML | &lt;progress&gt; value Attribute
The &lt;progress&gt; value Attribute is used to specify the completed task using a progress bar. Syntax: &lt;progress value="number"&gt; Attribute Value: It contains single value number which is a floating point number and used to specify the completed task. Note: This attribute is new in HTML 5. Example: C/C++ Code &amp;lt;!DOCTYPE html&amp;gt;
1 min read
HTML | data value attribute
The HTML data value attribute is used to Specify the machine-readable translation of the content of the element.Syntax: &lt;data attribute&gt; Contents... &lt;/data&gt; Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;data tag&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1 style=&quot;color:green;&quot;&gt;GeeksforG
1 min read
What does the value attribute do in an HTML Input Tag ?
The "value" attribute in an &lt;input&gt; tag specifies the initial value of the input field. It determines the default or pre-filled content displayed within the input element when the web page initially loads. This attribute is commonly used to set default values for text input fields, checkboxes, radio buttons, and other types of input elements.
1 min read
HTML &lt;param&gt; value Attribute
The HTML &lt;param&gt; value Attribute defines the value of a &lt;param&gt; element, used with the name attribute to specify parameters for plugins within &lt;object&gt; tags. Syntax:  &lt;param value="value"&gt; Note: This attribute is depreciated from HTML 5. Attribute: Name Description value It is used to specify the value of the param Element.
1 min read
HTML &lt;option&gt; value Attribute
HTML &lt;option&gt; value attribute determines the data sent to the server upon form submission, while the text content represents the visible options in dropdown menus. Syntax: &lt;option value = "value"&gt;Attribute Value: It contains a single value that has to be sent to the server.  HTML option value Attribute ExampleExample: This example demon
1 min read