Menu
I know that it might be so easy but I cant understand the exact difference between name and value attributes in an input tag (html). what do they do?!
308
asked Mar 21 '26 15:03
actually, the value is the property that defines the input data while the name property defines the input field name that can be used for form handling in backend languages like PHP, ...
the name should be unique (in some cases it can be an array of names like multiple checkboxes use case) while the value can be dynamic and repeatable for all inputs.
145
The Value:
The value attribute specifies the value of an element.
The value attribute is used differently for different input types:
For "button", "reset", and "submit" - it defines the text on the button
For "text", "password", and "hidden" - it defines the initial (default) value of the input field
For "checkbox", "radio", "image" - it defines the value associated with the input (this is also the value that is sent on submit)
Note: The value attribute cannot be used with "==> input type="false">.
Name Attribute:
The name attribute specifies the name of an element. The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.
Note: Only form elements with a name attribute will have their values passed when submitting a form.
As an Example for the [ Name & Value ]:
var languages = document.getElementsByName("language");
for (var lang of languages) {
console.log(lang.value);
}<!DOCTYPE html>
<html>
<head>
<title> preferred language</title>
</head>
<body>
<p>Select your preferred language:</p>
<div>
<input type="radio" id="english" name="language" value="english" checked>
<label for="english">English</label>
<input type="radio" id="hindi" name="language" value="hindi">
<label for="hindi">Hindi</label>
<input type="radio" id="spanish" name="language" value="spanish">
<label for="spanish">Spanish</label>
</div>
</body>
</html>In Java or java-Servlets you could use the name to get/access the value of any element you want, for Example:
<!DOCTYPE html>
<html>
<head>
<title>Example for the name attr</title>
</head>
<body>
<form action="${pageContext.request.contextPath}/yourServletURL" method="post">
<p>Normal text field.
<input type="text" name="name" /></p>
<p>Secret text field.
<input type="password" name="pass" /></p>
<p>Single-selection radiobuttons.
<input type="radio" name="gender" value="M" /> Male
<input type="radio" name="gender" value="F" /> Female</p>
<p>Single-selection checkbox.
<input type="checkbox" name="agree" /> Agree?</p>
<p>Multi-selection checkboxes.
<input type="checkbox" name="role" value="USER" /> User
<input type="checkbox" name="role" value="ADMIN" /> Admin</p>
<p>Single-selection dropdown.
<select name="countryCode">
<option value="NL">Netherlands</option>
<option value="US">United States</option>
</select></p>
<p>Multi-selection listbox.
<select name="animalId" multiple="true" size="2">
<option value="1">Cat</option>
<option value="2">Dog</option>
</select></p>
<p>Text area.
<textarea name="message"></textarea></p>
<p>Submit button.
<input type="submit" name="submit" value="submit" /></p>
</form>
</body>
</html>
----- Another Example -----
<!DOCTYPE html>
<html>
<head>
<title>hii</title>
</head>
<body>
<form action="MyServlet" method="post">
Fname:
<input type="text" name="fname" placeholder="type first name" />
<input type="submit" value="ok" />
</form>
</body>
</html>===============================================================
This can be accessed anywhere in your servlet/java code as,
String fName = request.getParameter("fname");
23
answered Mar 24 '26 04:03
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With