Form submission minor issue

Question

I have a form like this. I want to know that will the form submission work if the is placed in the middle of the text fields?

For example:

<input type="text" name="fname"> // First Name
<input type="text" name="lname"> // Last Name
<form method="post" action="">   // Post 
<input type="text" name="username"> // Username
<input type="text" name="password"> // Password
<input type="submit" value="Submit"> // Submit Button

Will the submission work for First Name and Last Name field as the is after them so they do not come inside the form.

Answer 1

Your form elements (like your input boxes) have to be between an opening <form> and a closing </form> tag. So your fname and lname will be ignored. (Your closing </form> is missing, too.)

Why do you have to add your form elements between form tags? This allows you to add multiple forms to one page. To identify which element contains to which form, they have to be between the form tags.

Example "Login & register on the same site":

<form method="POST" action="login.php">
   User: <input type="text" name="username">
   Password: <input type="password" name="password">
   <input type="submit" value="Login">
</form>
<form method="POST" action="register.php">
   Mail: <input type="text" name="email">
   User: <input type="username" name="username">
   Password: <input type="password" name="password">
   Repeat password: <input type="password" name="pwdagain">
   <input type="submit" value="Register">
</form>

Refer this site for further information: http://www.w3schools.com/html/html_forms.asp

Answer 2

First name and last name will not post. Username and password will post but u have to close form tag first.

Answer 3

If you transform you code like this it will post all :

<input type="text" name="fname" form="my_form_id"> // First Name
<input type="text" name="lname" form="my_form_id"> // Last Name

<form id="my_form_id" method="post" action="#">   // Post 
<input type="text" name="username"> // Username
<input type="text" name="password"> // Password
<input type="submit" value="Submit"> // Submit Button
</form>

Answer 4

There is some news on this front, it seems.

MDN has this for you to review

form HTML5

"The form element that the input element is associated with (its form owner). The value of the attribute must be an id of an element in the same document. If this attribute is not specified, this element must be a descendant of an element. This attribute enables you to place elements anywhere within a document, not just as descendants of their form elements."

Perhaps you can still achieve what you wished for. Only question then, is what browser support you must have.

Answer 5

@shubham-jha If you want multiple submit buttons under a single form, you may use AJAX.

Create a JavaScript function on click, decide to which URL you want to send this data and then change form action using jQuery, then submit using JavaScript.

Jquery to change form action