Form submit fails to generate query parameters if input element's are in multple div's

If I have a form element as given below, then calling the form's submit will automatically generate the request body/query parameters in the url-encoded form as "username={username}&password={password}&submit=submit" where values in {} are taken from the corresponding input element's text boxes.

<form action="/action.php" method="POST">
  <input id="username"  type="text" />
<input id="password"  type="password" />
<input type="submit"  id="submit" value="submit" />
</form>

But if I am going to place my input elements in multiple levels of div's, then the form submit will fail to generate the request body/query parameters.

<form action="/action.php" method="POST">
   <div id="inside_formdiv">
      <div id="userdiv">
        <input id="username"  type="text" />
      </div>
      <div id="passworddiv">
        <input id="password"  type="password" />
      </div>
      <div id="submit_div">
         <input type="submit"  id="submit" value="submit" />
      </div>
   </div>
</form>

Can anyone tell me the reason why it is like that? The specification doesn't mention that the input elements should be immediate children of Form element. I was wondering a proper reason for this behavior.

The values will be populated to the elements and you can check the values also if you edit the changes as given below

<script type="text/javascript">
  function logincheck() {
    alert ('hi ' + document.getElementById('username').value);
    alert ('hi ' + document.getElementById('password').value);
   }
 </script>


 <form action="/action.php" method="POST">
   <div id="inside_formdiv">
      <div id="userdiv">
        <input id="username"  type="text" />
      </div>
      <div id="passworddiv">
        <input id="password"  type="password" />
      </div>
      <div id="submit_div">
         <in开发者_如何学运维put type="submit"  onclick="logincheck()" />
      </div>
   </div>
</form>

---

A bit more detail:

I am assuming you are using PHP for the rest of this, you can substitute any other server side language.

You are missing the name attribute on your inputs. Unless you are actually using the id attributes for something you can get rid of them. Form data is listed by the name attribute - for instance the PHP $_GET, $_POST, and $_REQUEST arrays which will be keyed by names of your inputs. No name and the data is ignored.

You can also create an array of inputs by using a pair of brackets after matching names.
Example:

<input name="answers[]" type="text" id="answer1" />
<input name="answers[]" type="text" id="answer2" />

This will create one GET/POST entry that is an array. It will have the key answers with two elements inside the array.

For checkboxes, you will only get a value in the GET/POST when they are checked. You will not get a result if it isn't checked. Important to know. If someone, for instance, turns something "off" you will need to know the list of original inputs to compare against.

---

The first thing I notice is that your inputs are missing the "name" attribute. It's not required by the HTML spec afaik, but I think this is why the values are not sent with the request.

<form action="/action.php" method="POST">
      <div id="inside_formdiv">
         <div id="userdiv">
            <input id="username" name="username" type="text" />
         </div>
         <div id="passworddiv">
            <input id="password" name="password" type="password" />
         </div>
         <div id="submit_div">
            <input type="submit" onclick="logincheck()" />
         </div>
      </div>
   </form>

This should do the trick

---

The input elements don't have to be directly inside the form element! they can be inside divs tables etc... How about trying to use names along with the ids in the text fields, like the following:

<input type="text" id="username" name="username" />

note the name="username" in the previous example - to all input elements.