Is it valid to have two input elements with the same name?

HtmlValidationForms

Html Problem Overview


i.e.:

<form 1>
<input type="hidden" name="url" value="1">
</form 1>

and

<form 2>
<input type="hidden" name="url" value="2">
</form 2>

Is this allowed and valid?

Html Solutions


Solution 1 - Html

Yes, it is valid

This is Good

<form name="form1">
  <input type="hidden" name="url" value="1">
</form>

<form name="form2">
  <input type="hidden" name="url" value="2">
</form>

This is also fine and will generally be interpreted as an array of values, e.g. {url: [1, 2]}, depending on what your server does. In a URL encoding, it will look like url=1&url=2.

<form name="form1">
  <input type="hidden" name="url" value="1">
  <input type="hidden" name="url" value="2">
</form>

Solution 2 - Html

Yes.

More, it is essential if you are dealing with radio button groups.

Solution 3 - Html

"This is Not Good" parses correctly on every browser I know of; if two url's appear in the url encoded string, it will be treated as an array. Try this in JQuery:

$('<form name="form1">\
     <input type="hidden" name="url" value="1">\
     <input type="hidden" name="url" value="2">\
</form>').serialize()

and you will get: "url=1&url=2"

a well-written query string parser will return a json structure like this:

 {"url":["1", "2"]}

Is it strictly spec? Nope, but neither is creating a multi-line string by escaping the EOL with a backslash, as I did above.

Solution 4 - Html

Yes -- each will only submit with their respective forms.

If you have them in the same form, one will override the other and it is not valid.

EDIT: As pointed out by Mahmoodvcs that the overriding only occurs in some languages (such as PHP) as is not inherent within HTML itself.

Solution 5 - Html

To test if it is valid or not, creat you page and test at W3C here :

http://validator.w3.org/

Solution 6 - Html

A) Your first example is okay, because the forms time of submission will be different:

<form id="1">
    <input type="hidden" name="url" value="1">  
</form>
<form id="2">
    <input type="hidden" name="url" value="2">  
</form>

B) Your second example is also okay, but not standard coding practice:

<form>
    <input type="hidden" name="url" value="1">  
    <input type="hidden" name="url" value="2">  
</form>

Java code two extract both values:

Map<String,String[]> parmMap = requestObj.getParameterMap();   
String input1 = parmMap.get("url")[0];   
String input2 = parmMap.get("url")[1];

Solution 7 - Html

<form>
    <input type="hidden" name="url[]" value="1">  
    <input type="hidden" name="url[]" value="2">  
</form>

In PHP you will get values with $_POST['url']

for($i=0;$i<count(url);$i++)
echo $_POST['url'][$i];

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRohanView Question on Stackoverflow
Solution 1 - HtmlWeb LogicView Answer on Stackoverflow
Solution 2 - HtmlQuentinView Answer on Stackoverflow
Solution 3 - HtmlJeff LoweryView Answer on Stackoverflow
Solution 4 - HtmlKerry JonesView Answer on Stackoverflow
Solution 5 - HtmlWassim AZIRARView Answer on Stackoverflow
Solution 6 - HtmlAksahy N ShelkeView Answer on Stackoverflow
Solution 7 - HtmlRashidView Answer on Stackoverflow