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 option value Attribute
The HTML option value attribute defines the value that will be sent to the server when a form is submitted. The value attribute specifies what data is transmitted for each option in a select dropdown, which may differ from the visible text displayed to users.
Syntax
Following is the syntax for the option value attribute −
<option value="text">Display Text</option>
Where text is the value sent to the server, and Display Text is what users see in the dropdown.
How It Works
When a user selects an option and submits the form, the browser sends the value attribute to the server as part of the form data. If no value attribute is specified, the text content between the opening and closing <option> tags is used as the value.
The server receives the data in the format selectName=optionValue, where selectName is the name attribute of the select element, and optionValue is the chosen option's value.
Example − Basic Option Values
Following example demonstrates the basic usage of the option value attribute −
<!DOCTYPE html>
<html>
<head>
<title>HTML Option Value Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Select Your Favourite Subject</h2>
<form method="post" action="/submit">
<select name="subject">
<option value="phy">Physics</option>
<option value="chem">Chemistry</option>
<option value="bio">Biology</option>
<option value="math">Mathematics</option>
</select>
<br><br>
<input type="submit" value="Submit" style="padding: 8px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">
</form>
</body>
</html>
In this example, users see "Physics", "Chemistry", "Biology", and "Mathematics" in the dropdown, but the server receives abbreviated values like "phy", "chem", "bio", or "math".
Select Your Favourite Subject [Physics ?] [Submit] Server receives: subject=phy (when Physics is selected)
Example − Values Different from Display Text
Following example shows how option values can be completely different from the displayed text −
<!DOCTYPE html>
<html>
<head>
<title>Option Values vs Display Text</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Select Your Country</h3>
<form action="/process" method="post">
<select name="country" style="padding: 5px; width: 200px;">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="in">India</option>
<option value="ca">Canada</option>
<option value="au">Australia</option>
</select>
<br><br>
<button type="submit" style="padding: 10px 15px; background: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;">Submit Selection</button>
</form>
</body>
</html>
Users see full country names, but the server receives short country codes, making data processing more efficient.
Select Your Country [United States ?] [Submit Selection] Server receives: country=us (when United States is selected)
Example − JavaScript Access to Option Values
Following example demonstrates how to access option values using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Accessing Option Values with JavaScript</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Programming Language Preference</h3>
<select id="languages" name="language" onchange="showValue()" style="padding: 5px; width: 150px;">
<option value="">-- Select --</option>
<option value="js">JavaScript</option>
<option value="py">Python</option>
<option value="java">Java</option>
<option value="cpp">C++</option>
</select>
<p id="result" style="margin-top: 20px; font-weight: bold; color: #333;"></p>
<script>
function showValue() {
var select = document.getElementById("languages");
var selectedValue = select.value;
var selectedText = select.options[select.selectedIndex].text;
if (selectedValue) {
document.getElementById("result").innerHTML =
"Selected Text: " + selectedText + "<br>Value to Server: " + selectedValue;
} else {
document.getElementById("result").innerHTML = "";
}
}
</script>
</body>
</html>
This example shows both the visible text and the actual value that would be sent to the server when an option is selected.
Programming Language Preference [JavaScript ?] Selected Text: JavaScript Value to Server: js
Default Behavior Without Value Attribute
When an option element does not have a value attribute, the text content between the opening and closing tags is used as the value.
Example
<!DOCTYPE html>
<html>
<head>
<title>Option Without Value Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h3>Select a Color</h3>
<form method="post" action="/color-handler">
<select name="color" style="padding: 8px; font-size: 14px;">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
</select>
<br><br>
<input type="submit" value="Submit" style="padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 3px; cursor: pointer;">
</form>
</body>
</html>
In this case, if the user selects "Red", the server receives color=Red (the exact text content).
Select a Color [Red ?] [Submit] Server receives: color=Red (same as display text)
Conclusion
The HTML option value attribute allows you to specify different data for server processing than what users see in the interface. This separation enables cleaner data handling on the backend while providing user-friendly display text. When no value attribute is present, the element's text content serves as the value.
463 Views
