HTML | value Attribute

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">
<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>
<!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:
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>
<!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:
<button>: When the value attribute is present, it specifies the initial value of the button element.
Syntax:<button value = "value">
<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>
<!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:After clicking the button:
<meter>: It specifies the current value of the gauge. The value must be between min and max attribute.
Syntax:<meter value = "value">
<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>
<!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:
<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>
<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>
<!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:
<option>: When the value attribute is present, it specifies the value of the option element.
Syntax:<option value = "value"></option>
<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>
<!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:After clicking the button:
<progress>: When the value attribute is present, it specifies the value of the progress element.
Syntax:<progress value = "number"></progress>
<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>
<!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:
Supported Browsers: The browser supported by value attribute in progress element are listed below:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
ManasChhabra2
HTML-Attributes
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.