HTML | value Attribute
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>.
- 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><bodystyle="text-align:center"><h1style="color:green;">GeeksforGeeks</h1><h2>HTML value Attribute</h2>Input: <inputtype="text"value="GeeksforGeeks"></body></html> - Output:
- Example-2:
<!DOCTYPE html><html><head><title>HTML value Attribute</title></head><bodystyle="text-align:center"><h1style="color:green;">GeeksforGeeks</h1><h2>HTML value Attribute</h2><inputtype="button"value="Click me!"></body></html> - Output:
- Syntax:
<button value = "value">
- Example:
<!DOCTYPE html><html><head><title>HTML value Attribute</title></head><bodystyle="text-align:center"><h1style="color:green;">GeeksforGeeks</h1><h2>HTML value Attribute</h2><buttonid="btn"value="GeeksforGeeks"onclick="geek()">Click me!</button><pid="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:
- Syntax:
<meter value = "value">
- Example:
<!DOCTYPE html><html><head><title>HTML value Attribute</title></head><bodystyle="text-align:center"><h1style="color:green;">GeeksforGeeks</h1><h2>HTML value Attribute</h2><p>Health: <metermin="0"low="40"high="90"max="100"value="60"></meter></p></body></html> - Output:
- 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><h1style="color: green;">GeeksforGeeks</h1><h2>HTML value Attribute</h2><p>Sorting Algorithms</p><ol><livalue="50">Merge sort</li><li>Quick sort</li><li>Insertion sort</li></ol></body></html> - Output:
- Syntax:
<option value = "value"></option>
- Example:
<!DOCTYPE html><html><head><title>HTML value Attribute</title></head><bodystyle="text-align:center"><h1style="color: green;">GeeksforGeeks</h1><h2>HTML value Attribute</h2>Sorting Algorithms:<selectid="opt"><optionvalue="quick">Quick sort</option><optionvalue="merge">Merge sort</option><optionvalue="insertion">Insertion sort</option></select><buttontype="button"onclick="geek()">Click me!</button><pid="p"></p><script>function geek() {var x = document.getElementById("opt").selectedIndex;var y = document.getElementsByTagName("option")[x].value;document.getElementById("p").innerHTML = "The selectedoption has value equals " + y + ".";}</script></body></html> - Output:
Before clicking the button:
After clicking the button:
- 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><bodystyle="text-align:center"><h1style="color: green;">GeeksforGeeks</h1><h2>HTML value Attribute</h2>Progress:<progressvalue="65"max="100"></progress></body></html> - Output:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
<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:
<button>: When the value attribute is present, it specifies the initial value of the button element.
<meter>: It specifies the current value of the gauge. The value must be between min and max attribute.
<li>: When the value attribute is present, it specifies the initial value of the list item. It is only applicable on the ordered list.
<option>: When the value attribute is present, it specifies the value of the option element.
<progress>: When the value attribute is present, it specifies the value of the progress element.
Supported Browsers: The browser supported by value attribute in progress element are listed below:
Please Login to comment...