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">
- 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>
|
- 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>
|
- Output:
<button>: When the value attribute is present, it specifies the initial value of the button element.
- Syntax:
<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>
|
- 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">
- 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>
|
- 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>
- 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>
|
- Output:
<option>: When the value attribute is present, it specifies the value of the option element.
- Syntax:
<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>
|
- 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>
- 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>
|
- Output:
Supported Browsers: The browser supported by value attribute in progress element are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
30 Nov, 2021
Like Article
Save Article