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.
Related
I have an HTML form with 3 simple inputs and a submit button like this:
<form action="foo.php" method="post" id="form" name="form" target="_blank" autocomplete="on">
<input type="text" value="" name="firstname" id="firstname" placeholder="First Name" autocomplete="firstname" />
<input type="text" value="" name="lastname" id="lastname" placeholder="Last Name" autocomplete="lastname" />
<input type="email" value="" name="email" id="email" placeholder="Email Address" autocomplete="email" />
<input type="submit" value="Submit" name="send" />
</form>
When I click on the First Name input though and select the First Name to auto-complete, the browser doesn't complete the rest of the form (Last Name and Email). Using the Latest Chrome build: 90.0.44
Is that an expected behavior? How can I make the browser to autofill the whole form?
There is a description of autocomplete attributes here. MDN web docs - autocomplete.
"given-name"
The given (or "first") name.
"family-name"
The family (or "last") name.
email is the correct identifier for it tho. try correcting the others and see if that works for you.
I have mailto in my HTML and it seems to be working as it launches my default mail app (Mail on Mac). The problem is it is not sending the text from the text area. Below is my code.
<form target="_top" action="mailto:briankaty1#blueyonder.co.uk" method="post" enctype="text/plain">
<label>name</label>
<input type="text"><br>
<label>Your email</label>
<input type="email"><br>
<label>Your message</label>
<textarea name="" id="" cols="30" rows="10"></textarea><br>
<input type="submit" name="">
</form>
Any help would be appreciated.
Only form controls with a name can be successful controls. None of yours have a name.
Asides
You should learn how to use the label element properly. Without a for attribute or a form control inside it, a label is useless.
mailto: forms are highly unreliable. Use an HTTP(S) URL and a server-side form handler instead.
Just mocked this up for testing because I didn't believe this was actually possible, and what do you know - it is. Seconding #Quentin's comment that you should not do this, but I can confirm this does populate the mail body with form content (on Debian/Firefox, anyways).
<form target="_top" action="mailto:{YOUR_EMAIL}" method="post" enctype="text/plain">
<label>name</label>
<input name="name" type="text"><br>
<label>Your email</label>
<input name="email" type="email"><br>
<label>Your message</label>
<textarea name="message" id="" cols="30" rows="10"></textarea><br>
<input type="submit" name="">
</form>
Sometimes in my web application even I declare form autocomplete is off sometimes its not working and it autocomplete I typed in my inputs.
Can anyone know how to solved this kind of problem.I use chrome by the way.
sample of my code: sometimes its autocompleting my inputs even I declare turn off already..
<form autocomplete="off" method="post">
<input autocomplete="off" type="text" name="name">
<input autocomplete="off" type="text" name="age">
<input type="submit" >
</form>
<form autocomplete="off" method="post">
<input autocomplete="off" type="text" name="name" value="">
<input autocomplete="off" type="text" name="age" value="">
<input type="submit" >
</form>
The solution is simple and working perfectly in all browsers.
Add disabled and autocomplete="off" attribute to the form fields( name, age, etc.)
<form method="post">
<input disabled="disabled" autocomplete="off" type="text" class="name" name="name">
<input disabled="disabled" autocomplete="off" type="text" class="age" name="age">
<input type="submit" >
</form>
On Page Load enable the fields after few miliseconds.
use the below JS CODE
function getRidOffAutocomplete(){
var timer = window.setTimeout( function(){
$('.name, .age').prop('disabled',false);
clearTimeout(timer);
}, 800);
}
// Invoke the function
getRidOffAutocomplete();
This isn't a bug - autocomplete isn't supported by Chrome any more. It's a design decision by their developers and you should design for it rather than attempting to work around it. See my answer to this very similar question.
I have a very standard Rails 4 Application using Devise 3
I want to have the registration form to trigger password suggestions in the current (Mavericks) version of Safari:
iCloud Keychain is enabled and I get suggestions on other pages, just my form does not work with that for some reason.
I can't seem to figure out what exactly it takes to enable suggestions.
Here is the form that devise generates:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="SKtqmi1L/BKcTE/Hvlvw1H3ZRH8nd2UNiNnVILuLS/E=" />
</div>
<div>
<label for="user_email">Email</label><br />
<input autofocus="autofocus" id="user_email" name="user[email]" type="email" value="" />
</div>
<div>
<label for="user_password">Password</label><br />
<input id="user_password" name="user[password]" type="password" />
</div>
<div>
<label for="user_password_confirmation">Password confirmation</label><br />
<input id="user_password_confirmation" name="user[password_confirmation]" type="password" />
</div>
<div><input name="commit" type="submit" value="Sign up" /></div>
</form>
How do I need to change the form to trigger password suggestions
are there any usable documentation anywhere about that feature?
Apple accepts new autocomplete properties: current-password and new-password
I had the same issue with my site which is dedicated to password generation test cases to improve password generators.
As outlined in a [PDF] guide made by Apple the autocomplete property now accepts set values to help with this issue.
See the spec here along with other valid values: https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-new-password
<form method="post" action="/tests/4/register-submit" >
<label>
<div>Name</div>
<input
name="name"
placeholder="name"
autocomplete="name"
type="text"
pattern=".{4,}"
title="Needs to be 4 characters long."
required
/>
</label>
<label>
<div>Username</div>
<input
name="username"
placeholder="Username"
type="text"
autocomplete="username"
pattern=".{4,}"
title="Needs to be 4 characters long."
required
/>
</label>
<label>
<div>Password</div>
<input
name="password"
placeholder="Password"
type="password"
autocomplete="new-password"
required
/>
</label>
<input type="submit" value="Register" />
</form>
That code works due to the autocomplete="new-password" property used. autocomplete="current-password" is also possible for login forms.
This has been tested as working by the very helpful: #simevidas
I've tested your code, and it successfully suggested a password. So you have a problem other than your HTML.
Ensure the following are true:
Your server is properly outputting your web page as HTML content, with response code 200. (You can see this using any browser's developer tools.)
You're on the latest version of Safari (7.+)
AutoFill usernames and passwords is checked in Safari > Preferences > Passwords.
Try removing all saved passwords for your domain in Safari.
You have Keychain checked On in iCloud (System Preferences > iCloud)
Maybe adding an autocomplete="on" attribute to the form or input-tag works.
http://www.w3schools.com/HTML/html5_form_attributes.asp
My form is attached below, and I have tried many things I've found in other forums, but to no avail. I cant get the browser to prompt a 'Save Password'. Where am I going wrong. Hope someone can help. Thanks.
<form id="frmlogin" action="/index" method="post" enctype="application/x-www-form-urlencoded" autocomplete="on">
<label id="landing_username" class="required" for="username">Username/Email</label>
<input id="landing_username" name="username" type="text" value="" name="username" />
<label id="landing_password" class="required" for="password">Password</label>
<input id="landing_password" name="password" type="password" value="" name="password" />
<submit id="loginbtn" onclick="LoginFun()" type="submit" name="loginbtn">Login</submit>
</form>
Try to clean the HTML a bit, maybe it helps:
<form id="frmlogin" action="/index" method="post">
<label id="landing_username" class="required" for="username">Username/Email</label>
<input id="username" name="username" type="text" />
<label id="landing_password" class="required" for="password">Password</label>
<input id="password" name="password" type="password" />
<input id="loginbtn" onclick="LoginFun()" type="submit" name="loginbtn" value="Login" />
</form>
the form attribute enctype is by default application/x-www-form-urlencoded so you don't need to specify it
the labels for attribute should contain the id, not the name of the associated input
element IDs should be unique
the attribute name is defined twice for both password and username
the attribute autocomplete is by default on
the input value is not required, so you don't need to add it to the inputs with an empty string
the submit button should be an input of type submit
Some of these changes are only optimizations and the code could work fine without them, but others, such as ensuring the unique id of each tag, are fixes and they are strongly recommended even if the browser displays the form properly.