Do input names have to be unique in the same form? - html

Question

I have a form with multiple fieldsets. Each fieldset has multiple inputs, some of which would logically share a name attribute.
I have looked on MDN for input name and the HTML 5 spec with no luck. Section 4.10.19.1 of the HTML 5 form spec does not mention a uniqueness requirement though.
For example:
<fieldset name="attendee">
<input name="full-name">
</fieldset>
<fieldset name="next-of-kin">
<input name="full-name">
</fieldset>
Each input name is unique within the fieldset, but duplicated within the form. Is this valid?

Answer 1

No, the name attributes are not required to be unique. You could have the name attribute similar in multiple input fields (the whole principle behind radio buttons for example). Modern browsers generally see an array of information when you are submitting the form. I will give you an example in which I used PHP to parse the information, but the point stands in other programming languages.
Given your example:
<fieldset name="attendee">
<input name="full-name">
</fieldset>
<fieldset name="next-of-kin">
<input name="full-name">
</fieldset>
If you var_dump() depending on your method POST/GET, you will see that the browser is actually remembering only the last value recorded by the full-name attribute. Basically if your first input is John Doe (under the attendee fieldset) and your second input is John Green (under the next-of-kin fieldset), the browser will only remember John Green regardless of your method. If you use the GET method only your URL will contain both of the full-name attributes, but not the actual $_GET array itself.
If you want to record both the names you can edit your code to:
<fieldset name="attendee">
<input name="full-name[]">
</fieldset>
<fieldset name="next-of-kin">
<input name="full-name[]">
</fieldset>
By using the [] the browser knows not to remember just the last value of that attribute. Now if you do a var_dump() regardless of your method you should see:
array(1) { ["full-name"]=> array(2) {
[0]=> string(8) "John Doe"
[1]=> string(10) "John Green"
}
}
If by any chance you want to be more specific (since in one of the comments you were mentioning that you are using this in a REST API), you can edit your code like this:
<fieldset name="attendee">
<input name="full-name[attendee]">
</fieldset>
<fieldset name="next-of-kin">
<input name="full-name[next-of-kin]">
</fieldset>
Now if you submit the form, regardless of the method, you will get the following data-structure:
array(1) { ["full-name"]=> array(2) {
["attendee"]=> string(8) "John Doe"
["next-of-kin"]=> string(10) "John Green"
}
}
It is fairly simple from here to call json_encode() on this array and get an actual JSON object(like the one bellow) that you can use with your API:
{"full-name":{"attendee":"John Doe","next-of-kin":"John Green"}}

Answer 2

I would recommend to give every field a different name,
for example if you have two fields, using the GET method, the name/value pairs in the URL will look like this:
index.html?attendee=random&full-name=random2&next-of-kin=random3&full-name=random4
for this code:
<fieldset name="attendee">
<input name="full-name">
</fieldset>
<fieldset name="next-of-kin">
<input name="full-name">
</fieldset>
So which data will be loaded in the backend, if the identifier they are called with are the same but the data different?
if you don't have a backend, and you only use the name field as a selector, I would recommend you to use the class="" field.

Answer 3

If you plan to manipulate these fields using ID selectors (javascript or Jquery) and you would want to keep the functionality separate then I would use unique ids. Specifying an id tag would be better if you plan to select the elements.
<fieldset id="attendeeMain" name="attendee">
<input name="full-name">
</fieldset>
<fieldset id="nextOfKin" name="next-of-kin">
input name="full-name">
</fieldset>