Why would some tags in an HTML form get a name attribute and others get a value attribute?

Question

I was learning how to code an HTML form and I have few questions regarding the example I came across.

1. What is the difference between value and name in layman terms?

2. Why the value in the first two label's input left as an empty string?

3. Why the the third label's select is given a name but not a value, while the following 3 options were given values only?

4. In the 5th label input there is an S attribute after value, what does it mean?

5. Why the 6th label's input was given both name and value?

6. Why the name of the 6th input was "facilities[]", does this has anything to do with arrays?

7. Again, why the 8th label's input has name and value but it's button has class and name?

I really need answers specific to each label, as I am still a beginner in web development.

Here is my code:

<form id="registration_form" method="POST">


  <!-- 1st-->
  <label>Full name*:</label>
  <br>
  <input type="text" name="full_name" placeholder="FirstName LastName" autofocus="autofocus" value="">
  <br>


  <!-- 2nd-->
  <label>Email address*:</label>
  <br>
  <!-- value leaves input box empty-->
  <input type="text" name="email_addr" value="" placeholder="[email protected]">
  <br>



  <!-- 3rd-->
  <label>Select Tour Package* :</label>
  <br>
  <select name="package">
    <option value="Goa">Goa</option>
    <option value="Kashmir">Kashmir</option>
    <option value="Rajasthan">Rajasthan</option>
  </select>
  <br>

  <!-- 4th-->
  <label>Arrival date*:</label>
  <br>
  <input type="text" name="arv_dt" placeholder="m/d/y" value="">
  <br>


  <!--5th -->
  <label>Number of persons*:</label>
  <br>
  <input type="text" name="persons" value="" s>
  <br>



  <!-- 6th-->
  <label>What would you want to avail?*</label>
  <br>Boarding
  <input type="checkbox" name="facilities[]" value="boarding">
  <br>Fooding
  <input type="checkbox" name="facilities[]" value="fooding">
  <br>Sight seeing
  <input type="checkbox" name="facilities[]" value="sightseeing">
  <br>



  <!-- 7th-->
  <label>Discout Coupon code:</label>
  <br>
  <input type="text" name="dis_code" value="">
  <br>



  <!-- 8th-->
  <label>Terms and conditions*</label>
  <br>
  <input type="radio" name="tnc" value="agree" checked>I agree
  <input type="radio" name="tnc" value="disagree">I disagree
  <br>
  <button type="submit" class="btn btn-large btn-primary" name="submit">Complete reservation</button>



</form>

Answer 1

The name attribute is the name of the element. For example, it can be used by the server to identify the fields in form submits. In a case like facilities[], it will put all input values with that name into a single array when received by the server.

The value attribute is a default value which will be displayed in the element on page load. This value will also be posted to the server and associated back to the name.

Classes are often times just used for CSS properties or JavaScript and aren't really relevant to anything else in your question.

For the S attribute in your case, it likely means nothing and was just a typo. It can have some meaning if you were using something like Angular's directives

Answer 2

So name="" is the identifier for the element while value="" is the returning value for that element during post back.

For example - you text input:

<input type="text" name="email_addr" value="" placeholder="[email protected]">

has a default value of null - so if you were to submit the form with this value, the element with the name "email_addr" would have a value of null. If you typed in [email protected] - the value of that element would be `[email protected].

---

The reason why the select elements have values is because when you make that selection - <option value="testValue" >THIS DOESNT MATTER</options> - you are telling your application that you want to store the value as testValue. The text defined within the option tags are just what is displayed on screen.

Answer 3

1. value is what will be returned after the form has been submitted. name is just the name of the field and is used by server-side languages such as PHP and .NET to target the input to receive the value.

2. There's no point to it. You can set a default value if you want, but leaving it empty serves no purpose - it's the same as not having the value attribute defined in the code.

3. Standard syntax for a <select> element and its children elements.

4. s is possibly a typo. We can't be sure without more context.

5-6. Refer to eh.'s answer - he has a solid explanation.

7. A button can be given a name attribute so in the server-side, you can determine which button was clicked. The classes are used specifically in this case for styling with Bootstrap.

Answer 4

1) Name is what the computer uses to refer to that item while Value refers to whatever answer is typed in. You didn't ask about Placeholder but many browsers will show that on the screen as if it's typed in (maybe dimmed) but it will never end up as the true Value.

2) Let me turn that inside out...if the Value starts out with something non-blank, the user doesn't really need to type anything. They could use that as a default value. Name and email address are unlikely to be something where a default is an acceptable answer.

3) That 3rd item is a listbox, not a textbox like the first two. Although you CAN set a default, the browser will probably choose the first one as a default without that needing to be specified.

4) I'm not familiar with an "s" attribute. I suspect that's a typo.

5 & 6) These checkboxes share a single Name so they are grouped together. Each of the individual checkboxes has a value but when the Value is used by a programming language it will end up looking something like an array, with all of the "checked" answers included.

7) Class is related to the visual style (Google "Cascading Style Sheets") and is not related to Name/Value/etc. that we've been exploring. A button could also have a value but that's rarely useful unless you're grouping controls together (like those checkboxes in Questions 5 & 6).

I hope this helps!