was the name attribute really needed in html?

Question

If the purpose of the name attribute in HTML forms only to reference the element such as input, why couldn't we have simply used id or class attributes? Was there some not so obvious reasoning behind creating the name attribute.

.....html
 Name: <input type="text" name="fullname"><br>
.....

Answer 1

name, id, and class have fundamentally different purposes.

• name is for form element names and is not required to be unique (in fact, sometimes you need to reuse the same name).
• id is, as the name indicates, an identifier for an element and must be unique in the document as a whole.
• class is primarily for presentation (although it sometimes used for hooking up client-side UI as well) and contains a list of classes for the element, not just a single class. If you used class for form field identification, which of the possibly-several classes would you use?

Ways you might use the same name on more than one field:

1. You can use the same name in different forms without there being any conflict.

2. You use the same name within a form for radio buttons that should be grouped together.

3. You can use the same name within a form for multiple other kinds of elements whose values should all be sent to the server.

In contrast, id must be unique — not only within the form, but within the entire document.

#3 might need an example for clarity. Suppose you have:

<form action="example" method="get">
    <input type="text" name="foo">
    <input type="text" name="foo">
    <input type="text" name="foo">
    <input type="submit" value="Send">
</form>

If the user fills in a, b, and c in those three text fields and sends the form, this is the query string:

?foo=a&foo=b&foo=c

Notice that foo was repeated. The receiving resource can access all three of those values. (Perhaps you're listing tags for a post, or all of your children's names, or...)

Answer 2

There are some differences between name and id

Name cannot be applied to every element, id can

Id is unique and can be applied to every existent dom element and the name can only be setted for the following elements: <a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea>

The id should be unique, the name not

The id should be unique because the function document.getElementById(id) will only retrieve one element. The function document.getElementsByName(name); will retreive all dom elements with a given name

In a form dom element, the name of the element is added to the data send to the browser, the id doesn't

Every input dom element that has a name, if he is inside of a form element, in the form submission will send the values of all inputs to the server. You can check this in here.

Answer 3

@MisterJojo any examples? – Deski Rey

Exemple 1:

const MyForm = document.getElementById('my-form')

MyForm.onsubmit = e=>{
  e.preventDefault()

  console.log( MyForm.username.value )  // direct access to value with name
}

<form id="my-form">
  <input type="text" name="username">

  <button type="submit">submit</button>
</form>

Exemple 2:

const MyForm = document.getElementById('my-form')

MyForm.onsubmit = e=>{
  e.preventDefault()

  console.clear()
  console.log( MyForm.RadioABC.value )  // direct access to value with name
}

<form id="my-form">

A: <input type="radio" name="RadioABC" value="A" checked >
B: <input type="radio" name="RadioABC" value="B">
C: <input type="radio" name="RadioABC" value="C">

  <button type="submit">submit</button>
</form>

want more ?