Attribute value

The value attribute can be used for different tags:

• <button>,
• <option>,
• <data>,
• <input>,
• <li>,
• <meter>,
• <progress>.

The attribute has different functions for different tags.

In the example below, the numbering of the list items will start with 5:

        
          
          <ol>  <li value="5">Number 5</li>  <li>Number 6</li>  <li>Number 7</li></ol>
          <ol>
  <li value="5">Number 5</li>
  <li>Number 6</li>
  <li>Number 7</li>
</ol>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

And in this example, the input field will already have "WebGuide" written in it:

        
          
          <form>  <label>    Name of the best web guide:    <input type="text" value="WebGuide">  </label>  <button type="submit">I agree!</button></form>
          <form>
  <label>
    Name of the best web guide:
    <input type="text" value="WebGuide">
  </label>
  <button type="submit">I agree!</button>
</form>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

If you specify the value attribute with some value for the button, that value will be sent to the server when the form data is submitted. A pair of "name=value" is sent to the server. The button's name can be set using the name attribute.

In the example below, along with the form data, the information "diversion=No!" will be sent to the server:

        
          
          <form>  <label>    Do you agree with our rules?    <input type="checkbox" name="agreement">  </label>  <button type="submit" value="No!" name="diversion">I agree</button></form>
          <form>
  <label>
    Do you agree with our rules?
    <input type="checkbox" name="agreement">
  </label>
  <button type="submit" value="No!" name="diversion">I agree</button>
</form>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

If an item is selected from the list, the value of the value attribute of that item will be sent to the server when the form is submitted. If the attribute is not specified, the text content of the <option> tag will be used when submitted.

For the <data> tag, the value attribute is mandatory. It specifies information understandable to the computer.

For example, in an online store, each product has an identifier. You can specify it as the value of the value attribute:

        
          
          <ul>  <li>    <data value="item001">Fashionable phone</data>  </li>  <li>    <data value="item002">Necessary computer</data>  </li>  <li>    <data value="item003">Cool phone</data>  </li>  <li>    <data value="item004">Convenient phone</data>  </li>  <li>    <data value="item005">Normal phone</data>  </li></ul>
          <ul>
  <li>
    <data value="item001">Fashionable phone</data>
  </li>
  <li>
    <data value="item002">Necessary computer</data>
  </li>
  <li>
    <data value="item003">Cool phone</data>
  </li>
  <li>
    <data value="item004">Convenient phone</data>
  </li>
  <li>
    <data value="item005">Normal phone</data>
  </li>
</ul>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The value attribute sets the default value for the input field. This value will be sent to the server when the form is submitted. Since the <input> tag has a large list of different types, the attribute has its value in each specific case:

• For inputs with types button, reset, and submit, it sets the text on the button.
• For types text, password, and hidden, it sets the initial value. In the first two cases, the user can erase it and write something of their own.
• For types checkbox, radio, and image, it sets the value sent to the server, which the user cannot change.

The value attribute can be set for any input type, except for file.

The value attribute can be applied to numbered list items (<ol>). The value of the attribute sets the starting point for the automatic counter. The value must be a positive integer.

        
          
          <ol>  <li value="5">Number 5</li>  <li>Number 6</li>  <li>Number 7</li></ol>
          <ol>
  <li value="5">Number 5</li>
  <li>Number 6</li>
  <li>Number 7</li>
</ol>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The value attribute defines the current value of the element. It must be a number. If the attribute is not specified, the current value is 0.

        
          
          <meter max="100" min="0" value="50"></meter>
          <meter max="100" min="0" value="50"></meter>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Since the <progress> tag shows the progress of an action, the value attribute in this case indicates how much of the task has been completed at that moment. The value must be a number.

        
          
          <progress id="file" max="100" value="70">70%</progress>
          <progress id="file" max="100" value="70">70%</progress>

        
        
          
            
            Copy
            Copied
            Failed to copy