Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML value Attribute
The value attribute in HTML specifies the current value for various form elements and meters. It serves different purposes depending on the element type − for form inputs, it sets the default or current value that appears in the field, while for the <meter> element, it represents the current measurement within a defined range.
Syntax
Following is the syntax for the value attribute −
<input type="text" value="default text"> <meter value="number" min="0" max="100"></meter> <button value="button_value">Click Me</button>
The value can be text, numbers, or other data types depending on the element and input type being used.
Value Attribute with Input Elements
For input elements, the value attribute sets the initial value displayed in the form field. Users can modify this value unless the input is readonly or disabled.
Example − Text and Number Inputs
<!DOCTYPE html>
<html>
<head>
<title>Value Attribute with Inputs</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Form with Default Values</h2>
<form>
<label>Name: <input type="text" value="John Doe"></label><br><br>
<label>Age: <input type="number" value="25"></label><br><br>
<label>Email: <input type="email" value="john@example.com"></label><br><br>
<input type="submit" value="Submit Form">
</form>
</body>
</html>
The form displays with pre-filled values that users can edit before submission.
Value Attribute with Meter Element
For the <meter> element, the value attribute is required and represents the current measurement within the specified range defined by min and max attributes.
Example − Student Pass Percentages
<!DOCTYPE html> <html> <head> <title>Meter Value Attribute</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Student Pass Percentages</h2> <p>Girls pass percentage: <meter min="0" low="40" high="80" max="100" value="85">85%</meter> 85%</p> <p>Boys pass percentage: <meter min="0" low="40" high="80" max="100" value="72">72%</meter> 72%</p> <p>Overall average: <meter min="0" low="40" high="80" max="100" value="78">78%</meter> 78%</p> </body> </html>
The meter elements display visual gauges showing the pass percentages. The low="40" and high="80" attributes help browsers color-code the meter − values below 40 appear red, above 80 appear green, and in between appear yellow.
Value Attribute with Button Elements
For button elements, the value attribute defines the value sent to the server when the button is clicked, which is different from the button's display text.
Example − Multiple Submit Buttons
<!DOCTYPE html>
<html>
<head>
<title>Button Value Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Choose an Action</h2>
<form action="/process.php" method="post">
<p>Select your preferred action:</p>
<button type="submit" name="action" value="save">? Save Document</button>
<button type="submit" name="action" value="print">?? Print Document</button>
<button type="submit" name="action" value="delete">?? Delete Document</button>
</form>
</body>
</html>
Each button displays different text but sends a specific value ("save", "print", or "delete") to the server when clicked.
Value Attribute with Different Input Types
| Input Type | Value Purpose | Example |
|---|---|---|
| text | Default text content | value="Enter your name" |
| number | Default numeric value | value="100" |
| Default email address | value="user@domain.com" |
|
| hidden | Data sent without display | value="user123" |
| submit | Button label and submit value | value="Send Message" |
| checkbox/radio | Value sent when selected | value="option1" |
Example − Checkbox and Radio Values
<!DOCTYPE html>
<html>
<head>
<title>Checkbox and Radio Values</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Survey Form</h2>
<form>
<h3>Favorite Programming Languages (check all that apply):</h3>
<input type="checkbox" name="languages" value="html" id="html">
<label for="html">HTML</label><br>
<input type="checkbox" name="languages" value="css" id="css">
<label for="css">CSS</label><br>
<input type="checkbox" name="languages" value="javascript" id="js">
<label for="js">JavaScript</label><br><br>
<h3>Experience Level:</h3>
<input type="radio" name="level" value="beginner" id="beg">
<label for="beg">Beginner</label><br>
<input type="radio" name="level" value="intermediate" id="int">
<label for="int">Intermediate</label><br>
<input type="radio" name="level" value="advanced" id="adv">
<label for="adv">Advanced</label><br><br>
<input type="submit" value="Submit Survey">
</form>
</body>
</html>
When submitted, only the checked values are sent to the server. For example, if HTML and CSS are checked with "Intermediate" selected, the server receives languages=html&languages=css&level=intermediate.
Dynamic Value with JavaScript
The value attribute can be modified dynamically using JavaScript to create interactive forms.
Example
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Value Changes</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Price Calculator</h2>
<label>Quantity: <input type="number" id="qty" value="1" min="1" onchange="updateTotal()"></label><br><br>
<label>Price per item: $<input type="number" id="price" value="10" min="0" step="0.01" onchange="updateTotal()"></label><br><br>
<label>Total: $<input type="text" id="total" value="10.00" readonly></label><br><br>
<button onclick="resetForm()">Reset</button>
<script>
function updateTotal() {
var qty = document.getElementById("qty").value;
var price = document.getElementById("price").value;
var total = (qty * price).toFixed(2);
document.getElementById("total").value = total;
}
function resetForm() {
document.getElementById("qty").value = "1";
document.getElementById("price").value = "10";
document.getElementById("total").value = "10.00";
}
</script>
</body>
</html>
The total value updates automatically when quantity or price changes, demonstrating how JavaScript can modify the value attribute dynamically.
Conclusion
The value attribute is essential for setting default values in form inputs, defining current measurements in meter elements, and specifying data sent to servers. It works differently across various HTML elements but consistently provides a way to associate data with user interface components. Understanding its behavior across different input types is crucial for creating effective web forms and interactive elements.
184 Views
