Is It Ok to Have Multiple HTML Forms with The Same Name

Is it OK to have multiple HTML forms with the same name?

Regarding the HTML 4.01 specication, you can use form elements with the same name attribute, as there is no uniqueness requirement on them. Doing so defeats the purpose of such attributes, though. They are meant for making it easier to refer to forms in client-side scripting: if you have <form name=foo>, then document.foo refers to that form.

It is undefined what happens when same name attribute is used, but what browsers seem to do is to return an array. In your example, document.foo would be a 3-element array, with document.foo[0] being the first form. But this is not useful, since (assuming there are no other forms in the document) you could use document.forms[0], with a well-defined meaning.

The name attribute itself is outdated for form elements (but not for form fields, where it keeps being essential). The HTML 4.01 spec clause on form says:

“name = cdata [CI]
This attribute names the element so that it may be referred to from style sheets or scripts. Note. This attribute has been included for backwards compatibility. Applications should use the id attribute to identify elements.”

In the HTML5 drafts, even the formal rules disallow the use of the same name attribute. The HTML5 clause on the name attribute on form says that its value “must be unique amongst the form elements in the forms collection that it is in, if any”. This is a confusing formulation, but it is safest to assume that it must be unique within the form elements of a document.

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

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>

Multiple Forms With Input Fields With The Same Name Attribute? Good Or Bad?

Agree with above answer. Name is totally ok, and will be passed as response parameter of your form. Different story would be if your input elements would have same id's as well - some browsers might have problems traversing dom of your document.

Again, think of bunch of radio buttons, where users can select gender etc. They must have same name (but different id's)...

Submit multiple HTML Forms with same name via AJAX

id must unique all html. so always use unique id for each html element.
better way is to use by form name or class name

            <div>

            <form method="post" class="formpressed"  name="formpressed" enctype="multipart/form-data">
            <input type="text" name="question" id="question">
            <input type="text" name="question2" id="question2">

            <button class="btn-primary btn modalsubmit" name="save" id="save">Submit</button>

            </form>
            </div>

            <div>
            <form method="post" class="formpressed" name="formpressed"  enctype="multipart/form-data">
            <input type="text" name="question" id="question">
            <input type="text" name="question2" id="question2">

            <button class="btn-primary btn modalsubmit" name="save" id="save">Submit</button>

            </form>

            <!-- FORM 3 -->
            <!-- FORM 4 -->
            <!-- FORM n -->

            </div>

you can get form using $(this)
to find the submit button inside form $(this).find('.modalsubmit');
to get all form to be serialized you can do var formData = $(this).serialize();

           <script type="text/javascript">
                $(document).ready(function() {
                     $(document).on('submit','form[name="formpressed"]', function(event){
              // you can do by class name   
              // $(document).on('submit','.formpressed',function(event){
                    event.preventDefault();
                    var btnSubmit = $(this).find('.modalsubmit');
                    var formData = $(this);
        
                    console.log(btnSubmit,formData);
                        $.ajax({
                            url:'post.php',
                            method:"POST",
                            data: formData.serialize(),
                            beforeSend:function(){  
                                      btnSubmit.prop('disabled', true);
                                },
                            success:function(data)
                            {
                                alert(data);
                formData[0].reset();
                btnSubmit.prop('disabled', false);
                            }
                        });
                       });   
                
                });
           </script>
                            

$('form[name="formpressed"]').on('submit' work same as $('form[name="formpressed"]').submit( but when you use $(document).on('submit','form[name="formpressed"]' then it will also work for the DOM added later.

I have also added jsfiddle for this check here
https://jsfiddle.net/px95160o/

Html Multiple Input Elements With Same Name

Use this HTML

<div id="addresses">
    <form:input path="address[0]"  />
    <form:input path="address[1]"  />
    <form:input path="address[2]"  />
</div>

and Spring should populate your input texts with the values of the String[] address server-side object and vice-versa.

You can take a look here: http://bitbybitblog.com/forms-and-data-models-in-spring-mvc/

Is it acceptable to reuse Name and ID attributes across different Forms?

I Agree with above answer. Name is ok, and will be passed as response parameter of your form. if your input elements would have same id's as well - some browsers might have problems traversing dom of your document.
so you may use same name but use different id's...

Two separate forms, with inputs that have same name and id

It is not legal to use the same id property twice on the same page. It does not matter at all if the elements are on the same form or different forms.

They can absolutely have the same name property. Names are what gets sent to your server. You can have fifty elements on the same form with the same name if you want.

But the whole purpose of IDs is that they absolutely must be unique on the page.

So simply make the first one ... id="x1" name="x" ... and the second ... id="x2" name="x" ... and then make your labels point to for="x1" or for="x2"

multiple form tags in page or one form tag?

I feel like you've already answered your questions.

1. One sign up form = one form tags.
2. Multiple forms = many form tags.

Just don't nest them.

EDIT

Form tags are meant to hold a variety of fields (i.e. input tags) that you will eventually pass to a target URL using a GET or POST request.

Take this login form, for example:

<form action="login.php">
  <input id="name" type="text" name="name">
  <input id="passwd" type="password" name="passwd">
  <input type="submit" value="Login">
</form>

This has a login, a password, and a submit button. When the "Login" button (type = "submit") is pressed, the form will take that information and send it to another URL (in this case, "login.php", and that URL will handle the information accordingly (e.g. validate, sign you in, display captcha).

multiple inputs of the same name in an html form

If there are duplicated names then the values will be in an array with the name. The demo below sends to a live test server and the response is directed to an <iframe>

<form action="https://httpbin.org/post" method="post" target="response">  <input name="name" value="val">  <input name="name" value="val">  <input type="submit"></form>
<iframe name='response'></iframe>

Multiple inputs with same name through POST in php

Change the names of your inputs:

<input name="xyz[]" value="Lorem" />
<input name="xyz[]" value="ipsum"  />
<input name="xyz[]" value="dolor" />
<input name="xyz[]" value="sit" />
<input name="xyz[]" value="amet" />

Then:

$_POST['xyz'][0] == 'Lorem'
$_POST['xyz'][4] == 'amet'

---

If so, that would make my life ten times easier, as I could send an
indefinite amount of information through a form and get it processed
by the server simply by looping through the array of items with the
name "xyz".

Note that this is probably the wrong solution. Obviously, it depends on the data you are sending.

---

Related Topics