Question

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">
         <input type="submit"  onclick="logincheck()" />
      </div>
   </div>
</form>

Answer 1

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