HTML - value Attribute

HTML value attribute defines a default value to be displayed in the element on page load.

For various form elements like input fields, checkboxes, radio buttons, and select options, the initial or default value is specified using the HTML value attribute. When the page loads, it specifies the text or information that is pre-filled.

In order to facilitate the submission of accurate data, this feature is essential for giving users access to predefined data in form fields. In order to streamline user interactions and data input procedures, it can be used, for instance, to specify default text in a text input or pre-select an option in a dropdown menu.

Syntax

<element value=" ">

Applies on

The below-listed elements allow the use of the HTML value attribute.

Element	Description
<button>	HTML <button> tag is used to create a button.
<data>	HTML <data> tag is used to link the given piece of content with the machine-readable translation.
<input>	HTML <input> tag is used to specify the input field.
<li>	HTML <li> tag is used to represent an item in a list.
<meter>	HTML <meter> tag is used to render data within the given range.
<option>	HTML <option> tag is used to define the item of the data list for autocomplete, specified by the tag, or the items of a drop-down list, defined by the
<progress>	HTML <progress> tag is used to display as an indicator showing the completion progress of a task, commonly displayed as a progress bar. This is a new tag included in HTML5.
<param>	HTML <param> tag is used for passing parameters to an embedded object using <object> tag.

Examples of HTML value attribute

Below examples will illustrate the HTML value attribute, where and how we should use this attribute!

Using value attribute with "input" tag

On running the below code, the output window will display the input field filled with data along with a click button on the webpage.

<!DOCTYPE html>
<html>
<body>
   <h1>The input value attribute</h1>
   <form action="" method="post">
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname" value="tutorials">
      <br>
      <br>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname" value="point">
      <br>
      <br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

Using value attribute with "li" tag.

When we run the below code, it will generate an output consisting of the list items displayed on the webpage.

<!DOCTYPE html>
<html>
<body>
   <h1>The li value attribute</h1>
   <ol>
      <li value="01">Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
      <li>Water</li>
      <li>Juice</li>
      <li>Beer</li>
   </ol>
</body>
</html>

Using value attribute with "option" tag.

On running the below code, the output window will display the dropdown menu along with a click button on the webpage.

<!DOCTYPE html>
<html>
<body>
   <h1>The option value attribute</h1>
   <form action=" " method="post">
      <label for="fruits">Choose a fruit:</label>
      <select id="fruit" name="fruit">
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="pineapple">pineapple</option>
      <option value="pomegranate">Pomegranate</option>
      </select>
      <input type="submit" value="Submit">
   </form>
   <p>Choose a fruit, and click the "Submit" button.</p>
</body>
</html>

Using value attribute with "progress" tag.

When we run the below code, the output window will display the progress bar that shows the amount of the task that has been completed.

<!DOCTYPE html>
<html>
<body>
   <h1> value attribute in progress element</h1>
   <label for="file">Downloading progress:</label>
   <progress id="file" value="40" max="100"> 40% </progress>
</body>
</html>

Using value attribute with "button" tag.

When we run the below code, the output window will display three buttons.

<!DOCTYPE html>
<html lang="en">

<head>
      <title>Button tag with value attribute</title>
</head>

<body>
      <h1>Medal Types</h1>
      <button value='1'>Gold</button>
      <button value='2'>Silver</button>
      <button value='3'>Bronze</button>
</body>

</html>

Using value attribute with "param" tag.

When we run the below code, the output window will autoplay the video.

<!DOCTYPE html>
<html>

<head>
      <title>Param tag with value attribute</title>
</head>

<body>
      <object data=
"https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72">
         <param name="autoplay" value="true">
      </object>
</body>

</html>

Using value attribute with "meter" tag.

When we run the below code, the output window will display the fuel level meter with value 60.

<!DOCTYPE html>
<html>

<head>
      <title>Meter tag with value attribute</title>
</head>

<body>
      <label>Fuel level:</label>
      <meter value="60" min="0" max="100" 
             low="35" high="70" optimum="80">
      </meter>
</body>

</html>

Supported Browsers

Attribute
value	62.0	13.0	22.0	No	49.0

html_attributes_reference.htm