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
How to add the value of the element in HTML?
The value attribute in HTML specifies the initial or default value for various form elements. It serves different purposes depending on the element type − from setting default text in input fields to defining the data sent when buttons are clicked. Understanding how to properly use the value attribute is essential for creating functional HTML forms.
Syntax
Following is the basic syntax for using the value attribute −
<element value="text">
The value attribute can be used with the following HTML elements −
<input>− Sets default value for form inputs<button>− Defines the value sent when the button is clicked<option>− Specifies the value sent when the option is selected<li>− Sets custom numbering for ordered list items<meter>,<progress>,<param>− Define numeric or parameter values
Input Element Values
For input elements, the value attribute has different meanings based on the input type −
Text inputs (text, password, hidden) − Sets the initial value displayed in the field
Buttons (button, submit, reset) − Defines the text displayed on the button
Checkboxes and radio buttons − Specifies the value sent to the server when selected
Example − Text Input with Default Values
Following example demonstrates using the value attribute with text inputs −
<!DOCTYPE html>
<html>
<head>
<title>Input Value Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>User Registration Form</h2>
<form action="#">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname" value="TUTORIALS"><br><br>
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname" value="POINT"><br><br>
<input type="submit" value="Submit Form">
</form>
</body>
</html>
The input fields display the default values "TUTORIALS" and "POINT", and the submit button shows "Submit Form" as its text −
User Registration Form
First Name: [TUTORIALS ]
Last Name: [POINT ]
[Submit Form]
Button Element Values
The <button> element uses the value attribute to define what data is sent to the server when the button is clicked, while the text between the opening and closing tags defines what appears on the button.
Example − Button with Value Attribute
Following example shows buttons with different value attributes −
<!DOCTYPE html>
<html>
<head>
<title>Button Value Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Choose Your Subject</h2>
<form action="#" method="get">
<p>Select a programming language:</p>
<button name="subject" type="submit" value="HTML">Learn HTML</button>
<button name="subject" type="submit" value="JAVA">Learn Java</button>
<button name="subject" type="submit" value="PYTHON">Learn Python</button>
</form>
</body>
</html>
Each button displays different text but sends its respective value when clicked. The server receives subject=HTML, subject=JAVA, or subject=PYTHON depending on which button is clicked.
List Item Values
In ordered lists, the value attribute on <li> elements allows you to start numbering from a specific value or change the sequence.
Example − Custom List Numbering
Following example demonstrates custom numbering in an ordered list −
<!DOCTYPE html>
<html>
<head>
<title>List Item Value Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Top Vehicle Brands</h2>
<ol>
<li value="100">THAR</li>
<li>BMW</li>
<li>DUCATI</li>
<li value="200">MERCEDES</li>
<li>FERRARI</li>
</ol>
</body>
</html>
The list starts numbering from 100, continues sequentially, then jumps to 200 and continues from there −
Top Vehicle Brands 100. THAR 101. BMW 102. DUCATI 200. MERCEDES 201. FERRARI
Changing Values with JavaScript
The value attribute can be dynamically modified using JavaScript, allowing for interactive form behaviors and real-time updates.
Example − Dynamic Value Change
Following example shows how to change input values using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Value Change</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Character Name Generator</h2>
<label for="character">Character Name: </label>
<input type="text" id="character" value="THOR"><br><br>
<p>Click to generate a new character name:</p>
<button onclick="changeCharacter()">Generate New Name</button>
<script>
function changeCharacter() {
var characters = ["BLACK WIDOW", "IRON MAN", "SPIDER-MAN", "HULK", "CAPTAIN AMERICA"];
var randomChar = characters[Math.floor(Math.random() * characters.length)];
document.getElementById("character").value = randomChar;
}
</script>
</body>
</html>
Initially, the input field displays "THOR". Clicking the button randomly selects and displays a different character name −
Character Name Generator Character Name: [THOR ] Click to generate a new character name: [Generate New Name] (After clicking: Character Name changes to random superhero)
Option Element Values
In dropdown lists, the value attribute of <option> elements determines what data is sent to the server when that option is selected.
Example − Select Dropdown with Values
<!DOCTYPE html>
<html>
<head>
<title>Option Value Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Course Selection</h2>
<form action="#">
<label for="courses">Choose a programming course:</label>
<select name="courses" id="courses">
<option value="web-dev">Web Development</option>
<option value="data-science">Data Science</option>
<option value="mobile-app">Mobile App Development</option>
<option value="ai-ml">Artificial Intelligence</option>
</select><br><br>
<input type="submit" value="Enroll Now">
</form>
</body>
</html>
While users see descriptive text like "Web Development", the server receives the shorter value like "web-dev" when the form is submitted.
Conclusion
The value attribute is essential for defining default values in form inputs, specifying data sent by buttons and options, and controlling list numbering. It enables both static default content and dynamic interactions through JavaScript, making it a versatile tool for creating functional and user-friendly HTML forms.
3K+ Views
