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>
.....
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:
You can use the same name in different forms without there being any conflict.
You use the same name within a form for radio buttons that should be grouped together.
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...)
$_GET['foo'] be equal to
name="foo[]". Then PHP provides some kind of array of the results, something like that. Different backend technologies handle it in different ways.
name (and have had since before class), which is specific to its purpose, not mixed up in styling, and doesn't hold multiple values. So... :-)There are some differences between name and id
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 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
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.
@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 ?
classandidwere only introduced with HTML4 -namepre-dates them both; so you're initial question of "why couldn't we have simply used id or class attributes? Was there some not so obvious reasoning behind creating the name attribute." is based on a faulty assumption.