I need a login form where I just need to provide my username,cause it will remember my password and automatically fill in the password field (Ex. Like in gmail auth).
How could I achieve that?
thanks
Luca
A note for people to avoid banging their heads against the wall: Chrome won't save and suggest passwords on untrusted sites.
As such, if you are testing on your local server at https://localhost, and you haven't generated a valid and trusted certificate, you won't be able to test this feature of Chrome's.
This type of behavior is usually defined by the browser. However there are a few things you can do to improve this behavior.
Make sure you use descriptive names for your form
<label for="username">Username</label><input type="text" name="username" />
<label for="password">Password</label><input type="password" name="password" />
Using these names can really make a difference. I for example use the Opera browser, and in my settings, I've set a few values. For example "name", "address", "telephone number". And opera will look for fields that have equivalent names, and I can let Opera fill it in for me.
The next two things are only supported in Internet Explorer, and I would by no use advice to implement them without thinking about it
I mean, I think it's no harm implementing them. It just gives a little more support to Internet Explorer users, but I wouldn't rely on them
Also Internet Explorer supports an attribute called autocomplete, which you can control whether IO should autocomplete the input. You can use it as following
<input type="text" name="username" autocomplete="on" /> <!--Enabled-->
<input type="text" name="username" autocomplete="off" /> <!--Disabled-->
Also (an IE only feature, I think...) is the support of vCards. You can add an attribute VCARD_NAME and it lets the browser fill in the appropriate vCard value. For example
<input type="text" name="email" VCARD_NAME="vCard.Email" />
Gmail doesn't autofill your password, it is your browser that does this.
What can help is using something like LastPass but you need to leave it to the individual users whether or not they want their password remembered.
Related
Is it possible to prevent autofill even when the creds are stored in the browsers logins and passwords?
Or is there a way to prevent creds being saved to the browser?
Or is it better to allow both of these browser features? I'm just think about security if people share machines.
I have tried autocomplete="off" on the inputs and form but it still autofills the fields if there is creds are already stored in the browser and if theyre not then it prompts to save them.
<form autocomplete="off">
<h1>Login</h1>
<input type="text" autocomplete="off" placeholder="username" />
<input type="password" autocomplete="off" placeholder="password" />
</form>
Any help would be appreciated!
It's because password autocompletion is not common autocompletion, most modern browsers are using some different mechanics to fill these fields. MDN says it can be disabled by adding autocomplete="new-password" to the fields, though it is new feature and may not work in some browsers. It surely works in Opera 68.
So your code should be something like this:
<form autocomplete="off">
<h1>Login</h1>
<input type="text" autocomplete="new-password" placeholder="username" />
<input type="password" autocomplete="new-password" placeholder="password" />
</form>
This question is actually answered here:
Disabling Chrome Autofill
If your inputs are actually a username and password, I wouldn't prevent the browser from recognising them as such.
The security issue with computer-sharing is a valid point, but personally I would say this is mostly up to the user. Most computers, for example, have optional settings that the computer password needs to be entered each time autofill is used in the browser. If I knew that my computer and account was being shared, I would definitely turn this setting on.
Also, the pop-up window which asks you to save the password should have the option Never for this website (at least that's how it's phrased in safari, I would assume all browsers offer something similar). If the user knows that a password opens up very sensitive information, they should always choose this option. The browser never saves a password without the user's permission.
As to why your code doesn't work – as far as I can see, you're using the autocomplete="off" attribute correctly, and it should work that way. I think the reason must be that your browser simply ignores this attribute for password inputs. Might be worth checking if the same thing happens in other browsers?
There appear to be many examples of Chrome ignoring this attribute in the past, with various more or less messy solutions. These questions, for example:
Chrome ignores autocomplete="off"
Chrome Officially Ignores Autocomplete Attribute (Reddit)
This is from MDN:
If a browser keeps on making suggestions even after setting autocomplete to off, then you have to change the name attribute of the input element.
I see you don't use a name attribute so please try that.
I have a web application written in HTML/PHP with a login screen. If a Chrome user logs in and navigates to a home page, the browser gives them the option of saving the password:
Some of our users who have hit 'save' will then see their username appear in a field that bears no relation to the login functionality:
The input field should look like this. With no value whatsoever:
This is the code for the input field:
<input type="text" id="searchInput" autocomplete="disabled" placeholder="Search..." >
And as per other questions, i have tried every single possible solution to disable any sort of auto-fill of this field via the autocomplete attribute but no luck..
Also, solutions like creating fake hidden fields didnt work either (this apparently used to work but Google discovered this practice and worked around it)
How can i stop Chrome from doing this?
Edit:
I have been able to get around this issue by setting the field initially to read only:
<input type="text" id="searchInput" onfocus="this.removeAttribute('readonly');" readonly autocomplete="disabled" placeholder="Search...">
In reality i shouldn't have to do this for every single field. But according to this, Google Chrome doesnt so much care about the usability of complex web interfaces likes those of CRM systems:
The tricky part here is that somewhere along the journey of the web autocomplete=off become a default for many form fields, without any real thought being given as to whether or not that was good for users. This doesn't mean there aren't very valid cases where you don't want the browser autofilling data (e.g. on CRM systems), but by and large, we see those as the minority cases. And as a result, we started ignoring autocomplete=off for Chrome Autofill data.
So those of us who happen to be working on "minority cases", are we doomed to have to write hacks like the above to prevent Chrome from inserting the username in a random place?
Have you tried setting the auto-complete types for the login fields? The following might help Chrome handle those fields, which should, in turn, help with the search box:
<label for="username">Username</label>
<input type="text" name="username" id="username"
placeholder="Username" required autocomplete="username">
<label for="password">Password</label>
<input type="password" name="password" id="password"
placeholder="Password" required autocomplete="current-password">
This Google dev guide on forms has additional info about adding metadata to your input fields: https://developers.google.com/web/fundamentals/design-and-ux/input/forms/#use_metadata_to_enable_auto-complete
I have a form:
<form action="something.php" method="POST">
<input type="email" name="email"/>
<input type="submit" value="Send Email"/>
</form>
When someone tries to input some string that is not in email format the form won't let him. The only problem is that this dosen't work on Safari! Why!!!! http://www.w3schools.com/html/html5_form_input_types.asp
So what super easy work around can I use? Thank you
Let's be very clear on this point: while some HTML clients will respect the input type, several won't, and even if they do, it will not prevent anyone from forging an HTTP request where this field is not an email address. Therefore, you can rely on <input type=email> to provide a hint to users as to what should go in that field, but you shouldn't rely on it to make sure that only email addresses make it to your PHP script.
So some browsers support it, but Safari doesn't. That's pretty much all there is to it.
The correct solution, then, is to also do server-side validation and make it fail if it's not an email address. You can relatively easily check that with regular expressions.
Is there any way that I can make the required property of forms work in ie 6+?
I tried in chrome and firefox. It works fine.
I don't wanna use any scripts but I think I have to. Please give me something that would be easy.
html below won't work in ie:
<input type="text" name="name" required="required" />
Yes, there are many polyfills for HTML5 forms. Check out e.g. jQuery form shim. Test the alternatives in action before deciding between them, because the style of reporting errors (like required field missing) varies.
I am having trouble trying to find a solution for this, without resorting to a php statement, or javascript. This is as the idea seems so simple, that i am pretty sure there must be a way to do this without the use of the two.
I have a registration form, and certain fields on this form are required. But i have come to kind of a quandry, because i require the user to enter atleast one phone number, so that they may be contacted incase there is a problem with their order.
So i have 3 fields, "Phone" "Mobile" "Fax"
What i want to do, is make it so the user must enter either a phone, or mobile number in order to complete the form.
But, i guess my question is this... Is it possible to use the required attribute in some way, in order to achieve this effect?
Here is the html for these fields:
<li>
<label for="phone">Phone:</label>
<input type="tel" name="phone" id="phone" value="'.htmlout($phone).'" required aria-required="true" placeholder="0317021101"title="Please enter your home or work number here. You must enter either a phone, or mobile number." maxlength="20"/>
</li>
<li>
<label for="mobile">Mobile:</label>
<input type="tel" name="mobile" id="mobile" value="'.htmlout($mobile).'" placeholder="0827564829" title="Please enter your mobile number here. You must enter either a mobile, or phone number." maxlength="20"/>
</li>
In assistance, input or advice regarding this would be greatly appreciated, thank you!
Wouldn’t it be simpler to have two phone number fields, the first of them required? The explanations seem to say that either of the numbers can be a mobile number or something else, so why not make them symmetric in structure?
The first could be labeled “Primary phone (required)” and the other “Secondary phone (optional)”. These are rather long for labels, but in my experience, too short labels (like “Phone” and “Alternate phone”) tend to make some users re-type the first number...
Unfortunately, required only works on individual fields and not groups of fields (even if they have the same name), so there is no way to do this with HTML5 validation alone.
Demo: http://jsfiddle.net/ka7kC/
You shouldn't rely on client-side validation anyways, you have to validate on the server side as well. Besides, not all browsers even support HTML5 validation.
If you're using jQuery, I suggest the tried-and-true validation plugin for the client side:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
If it's actually required, only a server-side validation script can actually enforce it.
Javascript is really the only other option to do complex (ie. anything more than pattern matching) validation client-side.
The "required" attribute doesn't work in most versions of IE and some versions of Safari so you'd want to validate your input another way.