Categories
HTML Web development

HTML value Attribute

Learn how to use the HTML value Attribute.

HTML value Attribute

The HTML value attribute you can use on the following elements:

For <button>, <input> and <option> elements, the value attribute defines the initial value of the element.

Example1:

The button value attribute. Clicking a button submits its value:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <button name="number" type="submit" value="One">One</button>
  <button name="number" type="submit" value="Two">Two</button>
  <button name="number" type="submit" value="Three">Three</button>
</form>

</body>
</html>

Output:

Example2:

The input value attribute. An HTML form with default values:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="fname">First name:</label>
  <input type="text" id="name" name="surname" value="Robert"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="name" name="surname" value="Johnson"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:



Example3:

The option value attribute. Choose a colour, and click the “Submit” button to send input to the server:

<!DOCTYPE html>
<html>
<body>

<form action="">
<label for="colors">Choose a colour:</label>

<select id="colors" name="colors">
  <option value="red">Red colour</option>
  <option value="blue">Blue colour</option>
  <option value="yellow">Yellow colour</option>
</select>
<input type="submit" value="Submit">
</form>

</body>
</html>

Output:

For meter elements, the value attribute defines the current value of the gauge.

Example4:

A gauge with a current value, min, max, high, and low segments:

<!DOCTYPE html>
<html>
<body>

<p><label for="disc-C">Disc C</label>
<meter id="disc-C" min="0" low="30" high="90" max="100" value="85"></meter></p>

<p><label for="disc-D">Disc D</label>
<meter id="disc-D" min="0" low="30" high="90" max="100" value="65"></meter></p>

<p><label for="disc-E">Disc E</label>
<meter id="disc-E" min="0" low="30" high="90" max="100" value="25"></meter></p>

</body>
</html>

Output:

For li elements, the value attribute settles the value of the list item (for ordered lists). The next list items will increment from that value.

Example5:

<!DOCTYPE html>
<html>
<body>

<ol>
  <li value="1">Sugar</li>
  <li>Milk</li>
  <li>Water</li>
  <li>Flour</li>
  <li>Baking powder</li>
</ol>

</body>
</html>

Output:

  1. Sugar
  2. Milk
  3. Water
  4. Flour
  5. Baking powder

For progress elements, the value attribute defines how much of the task has been completed.

Example6:

<!DOCTYPE html>
<html>
<body>

<label for="bar">Downloading...</label>
<progress id="bar" value="46" max="100">46%</progress>

</body>
</html>

Output:

46%

Enjoy coding!

Read also:

HTML optimum Attribute

HTML width Attribute

HTML target Attribute