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:)
Related
I have this form in html5:
<form method="post" action="form.php" >
<input id="fname" name="fname" type="text" value="" required/>
<input id="lname" name="lname" type="text" value="" required/>
<input id="submit" name="submit" type="submit" value="" />
</form>
Sometimes i receive empty fields. Can you tell me why?
It is best practice to include the aria-required attribute too:
<form method="post" action="form.php" >
<input id="fname" name="fname" type="text" value="" required aria-required=”true” />
<input id="lname" name="lname" type="text" value="" required aria-required=”true” />
</form>
Note that older browsers may not support support these attributes. On any browser that doesn't support these attributes, front-end form validation could still be achieved through javascript. You can learn more about javascript form validation here.
Remember it is important to validate input on the server too.
You can't make yours constraints only on the client side. Anyone can send a POST request to your server without using your form easily.
It's possible with all recent browsers to edit the DOM and remove the required part too.
HTML5 Validations are great for helping users but it's not for security/checking.
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.
In most HTML forms when I start typing something (say birth date) navigators propose to sit with previous similar entries. For instance on html form submit the second visit offers me the first visit entries.
However, when using a bootstrap modal containing a form, the same does not happen, for instance: with a form inside.
I do not want to use jquery autocomplete since I do not have a list of potential answers, I just want to have the same behavior in and outside modals.
Thanks.
Browser autofills are notoriously unpredictable - they make educated guesses about the data based on the name attribute of inputs. It's unlikely you'll be able to get this behavior consistently cross-browser.
can you try this :
add the attribute autocomplete = "on" on your form,
maybe it will do the job.
<form action="demo_form.asp" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
source: http://www.w3schools.com/tags/att_input_autocomplete.asp
Read through this article it should help get things working for you.
Example:
<input type="text" id="name" name="name" autocomplete="name">
<input type="tel" id="tel" name="tel" autocomplete="home tel">
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.
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" />