I'm trying to use "form" attribute for html5 input as described here:
[1] http://www.w3schools.com/html5/att_input_form.asp
[2] http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_input_form
The description of the attribute says that form attribute:
"Specifies a space-separated list of id's to one or more forms the element belongs to"
I'm testing this by using the code below in W3C's TryIt editor (link 2 above)
<form action="demo_form.asp" id="form1">
First name: <input type="text" name="fname" /><br>
<input type="submit" value="Submit" />
</form>
<form action="demo_form.asp" id="form2">
First name: <input type="text" name="fname" /><br>
<input type="submit" value="Submit" />
</form>
Last name: <input type="text" name="lname" form="form1 form2" />
I supplied "string_for_form2" in form2 and "lastname" in the lname field. I'm getting the output as:
fname=string_for_form2
instead of
fname=string_for_form2&lname=lastname
Any ideas why the result is not as expected ? I've tried on Firefox 17 and Chrome 23.
Thanks
Because you're trying to assign two form owners.
"A form-associated element is, by default, associated with its nearest ancestor form element (as described below), but may have a form attribute specified to override this."
http://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms
This attribute just allows markup flexibility, it doesn't change the form ownership paradigm from the previous spec.
I could not find anything in the W3C HTML5 specification to support the statement on the www.w3schools.com site that input element can belong to 2 or more forms. The input element's owner is always mentioned in singular and never as a list.
Furthermore on developer.mozilla.org there is explicit statement about the input association with one form only. The description of the form attribute states:
form: A string indicating which element this input is part of.
An input can only be in one form.
An input field can only be on one form. It is better to include it within the form scope, for clarity.
Use also name instead of only id on your forms. Although html5 supports it, what with older browsers? What with IE?
<form action="demo_form.asp" name="form1" id="form1">
<form action="demo_form.asp" name="form2" id="form2">
use javascript and name form on submit
<form action="demo_form.asp" onsubmit= 'this.id="form1"'>
First name: <input type="text" name="fname" /><br>
<input type="submit" value="Submit" />
</form>
<form action="demo_form.asp" onsubmit= 'this.id="form1"'>
First name: <input type="text" name="fname" /><br>
<input type="submit" value="Submit" />
</form>
Last name: <input type="text" name="lname" form="form1" />
Related
I recently started HTML and made my first Website. I made bunch of lines of codes, and the last line is: <input type="submit" name="register" value="Register" action="Registered.html">. I wanted to this submit button named as "Register" to get me to the my "Registered.html" file but something isn't right. The button shows up, and it's valued as "Register" but `action="Registered.html" doesn't work. I hope you understand me, if you can, fix this for me.
The form element takes the action attribute, not the input:
<form action="Registered.html">
<input type="submit" name="register" value="Register">
</form>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
notice the action is at the form..
refer https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit
In general form elements are used to send data to a server. It wraps around the elements which specifies the data, input or button elements, for instance. If you add a name and a value attribute to your input and button elements, you will send this name-value-pair to your server.
If you don’t need to send any (additional) data to your server, just use anchor elements:
Register
<form>
<input type="submit" formaction="Registered.html" value="Register">
</form>
The formaction attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.
I have got a small code here in which i want to give a particular name and the text filed must be un-editable, how could that be done
<form method="get" action="watermark.php">
<center><h3>YGG Live Player Stats</h3></center>
<h5>Enter Player name :<h5> <br/><br/><input type="text" name="user" size=50 maxlength=50><br/><br/>
<input type="Submit" name="Search" value="user">
</form>
Assuming it's input field you want made readonly, use the readonly attribute:
<input type="text" name="user" size=50 maxlength=50 readonly>
See the W3 Schools page on the readonly attribute for more information.
Yes you can do your work with readonly
<input type="Submit" name="Search" value="user" readonly>
Your input field text can only changed by Programming language you use or by javascript. User can't alter it.
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.
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
First name and last name will not post. Username and password will post but u have to close form tag first.
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>
#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
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.
Once upon a time in HTML
I was looking W3Fools and find this paragraph, related to the errors in W3Schools:
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
This code is wrong. Non-block-level elements (such as <input>) are
not valid directly inside <form> tags until HTML5.
Well, since I always format that way I said to myself "WAIT, I was wrong all this time". And go to validate it to check if it's true. Efectively, this code don't pass the validation.
Then, searching for the correct markup, I found several examples from more reliable sources, but none of the following examples passes the validator.
The bad, the good and the ugly
1. W3Schools
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
2. Mozilla Network Developer
In "Examples" section, I have found this:
A common use-case senario
<!-- A common form that includes input tags -->
<form action="getform.php" method="get">
First name: <input type="text" name="first_name" /><br />
Last name: <input type="text" name="last_name" /><br />
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" value="Submit" />
</form>
3. W3C Wiki
<form action="http://www.google.com/search" method="get">
<label>Google: <input type="search" name="q"></label>
<input type="submit" value="Search...">
</form>
A Fistful of Codes
More details:
I'm trying to validate the code as HTML fragment, both in HTML 4.01 and XHTML 1.0.
The recurring error I have found is:
document type does not allow element "input" here; missing one of "p",
"h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address",
"fieldset", "ins", "del" start-tag
The question
What is the correct and valid markup I should use to make a form?
Thanks in advance.
Edit:
A similar question was answered redirecting the OP to the form section of HTML4 specification. They provided this code:
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<!--...stuff...-->
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>
First, it isn't the same code of their wiki. But nevermind, from I know, the wiki it isn't 100% accurate.... BUT:
They fix the validation error by enclose all tag in a <p>. But forms are not paragraphs, it isn't? This code pass validation, but I think that's not very semantic...
Expert answers you giving to me (thanks!), for the most part, are to enclose the inner tags in a <fieldset>, but if I only need one fieldset (for example, a form with only one field or self-related fields), is this correct? Might that not be superflous code (because the fieldset tags are supposed to enclose similar fields)?
A fieldset is a block level element that is commonly used in forms. Therefore you could use a fieldset or another block level element like a div.
<form action="http://www.google.com/search" method="get">
<fieldset><legend>My form</legend>
<label>Google: <input type="text" name="q"></label>
<input type="submit" value="Search...">
</fieldset>
</form>
or
<form action="http://www.google.com/search" method="get">
<div>
<label>Google: <input type="text" name="q"></label>
<input type="submit" value="Search...">
</div>
</form>
This probably rarely gets flagged as non valid markup because people tend to a lot of divs to help style forms nicely.
I tend to agree with a few of the others in that FieldSet is the best way to group form items together, especially as it really helps with things like screen readers.
I tend to use the following:
<form action="http://www.google.com/search" method="get">
<fieldset>
<legend style="display: none;"></legend>
<label for="q">Google:</label>
<input type="text" name="q">
<input type="submit" value="Search...">
</fieldset>
</form>
I normally don't include the legend, but if it is required for validation, it doesn't necessarily have to be visible ;)
This code is wrong. Non-block-level elements (such as <input>) are not valid directly inside <form> tags until HTML5.
That's not entirely true. They are valid in Transitional DTDs but not Strict DTDs.
What is the correct and valid markup I should use to make a form?
It depends on the form.
For the examples given, the W3C version is the best. Having a block container in a form doesn't matter (unless it adds useful semantics, or sensible grouping of separate groups of controls). <label> elements are excellent.
I tend to group fields and labels inside the <fieldset> tag, which also sounds very semantical to me.
Is there any way I can label or mark my HTML to ensure a field such as "First name" should get autofilled?
Most popular browsers use a regex for field names, e.g. for first name
.*name|initials|fname|first$".
But changing field names has implications elsewhere; I am limited in what I am permitted to change.
this is a form with auto completion on
<form action="demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname"><br>
E-mail: <input type="email" name="email"><br>
<input type="submit">
</form>
I hope that helps it's the best I could find:)