CODEWITHSUNDEEP
html
Erfan Nemati
Erfan Nemati

Reputation: 153

exact difference between "name" and "value" attribute in input tag

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?!

Upvotes: 10

Views: 28475

Answers (5)

Kautuk Dwivedi
Kautuk Dwivedi

Reputation: 379

var languages = document.getElementsByClassName("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" class="language" value="english" checked>
  <label for="english">English</label>
 
  <input type="radio" id="hindi" class="language" value="hindi">
  <label for="hindi">Hindi</label>
 
  <input type="radio" id="spanish" class="language" value="spanish">
  <label for="spanish">Spanish</label>
</div>
</body>
</html>

Upvotes: 0

Maged Almaweri
Maged Almaweri

Reputation: 352

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>

enter image description here

----- 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");

Upvotes: 10

Mahdi Tohidloo
Mahdi Tohidloo

Reputation: 3418

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.

Upvotes: 12

Anurag Srivastava
Anurag Srivastava

Reputation: 14423

value is used to get the value of the input in the same page in Javascript

name is used for a reference to the input to pass values to another page, for example when you pass a form with <input value="some_value" name="input_name"> to a PHP page as GET/POST data, the input is accessed with $_POST['input_name']

Upvotes: 1

revati raman
revati raman

Reputation: 97

Value = The value attribute specifies the value of an element.

Name = name is only to post form data. The name definies what the name of the attribute will be as soon as the form is submitted. So if you want to read this attribute later you will find it under the "name" in the POST or GET Request. Whereas the id is used to adress a field or element in javascript or css.

Upvotes: 4

Related Questions