Sign-in form best practice

Use built-in, cross-platform browser features to create sign-in forms that are secure, accessible and easy to use.
Resource(s):
Sign-in form best practices → goo.gle/2NzgbDD
Related Playlist(s):
Day 3 → goo.gle/WDL20Day3
Subscribe to the Chrome Developers → goo.gle/ChromeDevs
Speaker:
Sam Dutton
#webdevLIVE #SameSite #useragentclienthints event: web.dev LIVE 2020; re_ty: Publish; fullname: Sam Dutton; product: Chrome - General;

[@leeboyin945]

01:59 Well formed HTML is the backbone of a good sign-in experience 04:34 Don't repeat inputs 04:57 Use buttons for buttons 07:13 Make sure inputs are clearly visible 07:40 Design for thumbs 08:00 Make text big enough 08:51 Warn of invalid input values 09:29 Help users start faster with input attributes 11:04 Prevent keyboards obscuring the sign in button 11:57 Help users avoid re-entering data with input name, id, type and autocomplete 14:25 Enable the browser to suggest a strong password 14:48 Add the required attribute to both email and password fields 15:03 Make sure to add a Show Password button to enable users to check the text they've entered 15:57 Validate data before submission 16:40 What you cannot measure, you cannot improve 17:35 Website performance 17:52 General guidelines: Don't make users hunt, keep it focused, minimize complexity, incentives sign in, allow email or phone, make password reset easy, link to terms and policies, keep branding and style consistent

[@sparkplug8763]

Some of these are pretty obvious. If you don't do them, then you're probably just trying to get things done fast without quality checks which is ultimately bad for both parties. Edit: Thank you for the comprehensive list

[@nelsoncruzg]

Thank you!

[@abdelghanimahammedi6149]

Thank you for being you!

[@swyxTV]

i could listen to this guy all day. pls make more of these basics best practices videos!

[@Lifelightning]

This is insanely useful, thanks for providing so many great sign-in tips. I learned a bunch!

[@SaikatDey]

Basics that no one taught us

[@bren.r]

Of course - user experience is at the bottom of everyone else’s priority list. The same goes for full test coverage. Not in my book 😉 all my code is fully tested and I have an eye for UI/UX.

[@prijunkoirala2410]

Only expierence can teach us these.....

[@kevinletterer4171]

I wasn't looking for this because I didn't know how much I needed it. Thank you.

[@marcusjt]

Very good indeed, particularly pleased to see accessibility getting so much attention! 👍 However, using the "autocomplete" attribute gives you FAR more control over what data the browser or other autocomplete agent (e.g. user/pass utility) tries to use, compared to using special "name" attribute values, from which different browsers will attempt to infer the right settings but they are not standard in anything like the same way autocomplete attribute values are. Also multi-step login is actually slower for more confident users, problematic for many password managers, and if the user has entered the email incorrectly then it's far more complicated for them to correct as they either have to go back to the first form and change it or use a new form with both email and password (which is all that was needed in the first place).

[@bdafeesh]

Fantastic guidelines that all make sense, and excellent production!

[@emkisn]

yesss, i love it. even being a beginner subject, I learned great tips that I didn't know existed, thanks a lot

[@HoangHuynh]

Great content, and Sam is such a good speaker to deliver it!

[@DanielPereira-xd4lw]

Muchas gracias por las enseñanzas compartidas en este video. Excelente equilibrio entre: profundidad del tema, tiempo del vídeo, velocidad de locución, entre otros. Además de la capacidad de mantener el interés de el que lo ve. Videos como este deberían ser el estándar. Se nota que tomó tiempo de preparación.

[@luis96xd]

Wow, this video was so amazing and helpful! I liked these best practices and I learned new pieces of code. Thank you so much! 😄

[@NitinJadhav]

Loved this content, learned few new tricks. Thanks!

[@basix250]

This is exactly what I was looking for. Thanks!

[@nerdophile6945]

Best sign in form is no sign in form at all, that makes so much sense.

[@MatsumotoKael13]

So simple and yet so powerful.

[@TNothingFree]

Very professional with awesome tips, Thanks!

[@ananthaboudmanabhanthanika7335]

15:00 no javascript is required. just "required" attribute is required ;-)

[@billsomen7953]

tell that to a react developer

[@bren.r]

Bill Somen 😂 using front end frameworks.

[@billsomen7953]

@@bren.r 🤣🤣🤣

[@dasten123]

Super cool!! More best practices videos please! :D

[@iagobruno8845]

Thanks! I didn't know all these tips.

[@VerifyBot]

Great video, thanks alot! Watching out for new ones :D

[@abhayamin8318]

Amazing video....such simple tips but so beneficial :)

[@warraupe9373]

Great and very useful video. Many thanks!

[@devmrin]

This was enlightening. Thanks!

[@waymanharris1284]

Thank you for this!

[@RomenumB]

Perfect! Thanks for that!

[@RajatGuptaOnline]

Very well explain, great content!!

[@trollhunter200]

Very helpful. Thanks a lot.

[@Draugo]

Speaking of sign-in, when will Chrome stop inserting saved login information to completely random form fields that have no indication that they would be anywhere near login?

[@matrixRule127]

Loved It, Loved It!!

[@user-pm5pe7oc2f]

thanks for usefull info Google team!

[@beardymonger]

BRAVO!!!! More please :-)

[@prijunkoirala2410]

This is gold!!

[@TopicalAuthority]

Great Video!

[@UnknownShepard]

Great video!

[@ricardoamendoeira5689]

Isn't defining sizes in terms of pixels a bad idea? There's a wild variety of resolutions at every screen size.

[@mmn10088]

There are multiple places in the audio and slides where it should have said `autocomplete=current-password` and `autocomplete=new-password`, not `name=…`. The `autocomplete` attribute is standardized with predefined meanings for the values whereas the name can be whatever you want.

[@perguth]

Read from the end: Could you kindly name some of the shown books in the background? 🐈 For one of 'em I would like to know the name :-)

[@vipsylar6370]

Same here!

[@WezPyke]

Very informative video.

[@nusskugeldingsi]

Don't split sign-in fields across multiple pages/views. That makes it harder to use a password manager.

[@madfury3179]

Does it work at all?

[@theNittyGritty]

Am I missing something? I can't find anything under the mentioned codelab link (web.dev/codelab-sign-in-form ). Other than that, great summary of the best practices!

[@nickspirit3]

Here you go, web.dev/codelab-sign-in-form-best-practices/

[@YoungDen]

@@nickspirit3 - Thank you

[@yevgeniyshevchenko9120]

I was curious about how to work with passwords. Thanks for great video!

[@funkygawy]

Does it bother anyone else that the bookcase doors are open? I guess there were probably some unwanted reflections.

[@Oswee]

Sooo goood! :)

[@berndeckenfels]

One task at a time is quite annoying for auto type password managers

[@bren.r]

Not if done correctly - just ensure the password input visibility is hidden so it can still be auto filled then the password is already auto filled on the next screen for the user. No additional clicks necessary.

[@berndeckenfels]

Brendan Rosa I prefer password managers which type into the GUI

[@madboy5566]

@@berndeckenfels you aren't your user

[@LucasKluser]

@@berndeckenfels 1Password can fill it correctly

[@Ostap1974]

Why doesn't Chrome implement show password functionality as a standard part of ?

[@adebiyial]

There's an issue with Chrome and Forms. I'd have termed it Webkit, but this issue doesn't appear on Edge. This has to do with the autocomplete. For a Login form, it only makes sense to add the autocomplete attribute to the inputs, and not for a Registration form. Chrome doesn't allow autocomplete=off and doesn't the autocomplete, it will autocomplete anyway. This presents an issue: once I log in to a site, save my password with my browser, anyone can steal my password because it also autocompletes my email and password on the Register page.

[@madfury3179]

Does the autofill feature also work in a 2-stages login process (11:47)?

[@kamalhm-dev]

Yes

[@felipehuggler]

Thanks

[@satyasashi5859]

KZbin web doesn't do autofocus on search box. Though it's obvious to search there, it takes extra work for most people to move mouse and click and then type. Helps a lot of lazy users like me. So please consider my request.

[@berndeckenfels]

... and don't add any ad- or external trackers on password pages.

[@Eltopshottah]

So much to learn so little time 😩

[@smeel99]

Nice explained

[@Blaineworld]

Woah, hold up! There are people who don’t use s for buttons?!

[@davincis1]

Home Happens to be like this too :)

[@jonathonpenn1383]

!

[@luis96xd]

Well, I was using input type="button" 🙁

[@michaelkhalsa]

All the time, but probably not in the way you think. For example dynamically loading content in an area when there is a mouse over or a section comes into view, to improve page laod experience, or simplify development. Also many javascript extensions phone home for better or worse, such as changing content, etc. Think of a password manager.

[@sharps8726]

Dont know why but my mind is going to Gumbiya Park the entire video.

[@abdelghanimahammedi6149]

4:36 even worse, some websites block you from copying and pasting to fill in those duplicate inputs "Stop It, Get Some Help"

[@migrant_x]

Sections without headers are not valid at all ... why not using simple divs? Or just the label as the container? It works very well ...

[@xtremescript]

Don't mess up input types, use inputmode attribute.

[@bren.r]

Yes the attention to detail in this video is awesome 👏

[@blender_wiki]

Text size is a huge issue in nowadays website (in app is even worst) Many young web designer don't understand that readiblity is more important than aesthetic.

[@bren.r]

It’s the Wild West. There are no standards people conform to anymore. It’s just a second thought.

[@ricardoamendoeira5689]

Splitting the login into multiple steps as mentioned at 11:46 is really annoying for people using password managers :/

[@WagonLoads]

Another item that makes me abandon a site before I read the first word is a cookie farm site.. sites that force users to agree to cookie terms before you even know if the site is worth acknowledging. It's just as bad as the spam calls that say press 2 if you want to be removed from the call list. That only proves they got a live response and can add your number to a live user list.. Cookie farm sites have zero integrity in my book...

[@V3LOXy]

I literally hate when email and password are asked in multiple steps, it's really annoying with a password manager

[@baronoke5432]

I know right? It's like 1. Must have 6-12 characters (limiting only to 12 characters is a hassle sometimes) 2. At least one capital letter 3. At least one symbol or non-alphabetic character 4. Cannot be the same as your birthday or email (this one is just annoying, especially websites that aren't important, like game discussion forums)

[@ADeeSHUPA]

@@baronoke5432 Indonesian

can i omit the submit button? I have a UX requirement. if the input completes 6 characters I should call the http request immediately. This is good? I think it kills accessibility.

[@m12652]

Juan Crisóstomo sounds dodgy to me. Why six characters? Does it work if someone pastes into that input? What if the user does a typo, wasted submit etc.

[@devilaoszwann7970]

I agree with m12652 , I suppose it's like a pin-code? I feel uncomfortable even when Windows/banks uses that format, I'd probably be sceptical to any untrusted website using it. I get that it's not doing anything out of the ordinary, but regular users don't know that, they might think they're tracked or hacked ir whatever. If it is a requirement, go for it, if you're working on an internal application for a company, sure, then it might be fine, but in that case maybe sso would be better omitting the loginform entirely? Using auto-signin in itself doesn't have to be bad, people are just not used to it. Also, do you get unlimited tries? Seem much faster to crack a system that automatically tells you if you typed your password wrong, or do you have to wait several seconds for it to validate on slow internet connection even when you know you mistyped the last number? It may cause many issues, but it's not bad in itself.

[@bren.r]

Do you mean like how 2FA works on Apple products that when the last digit is entered it makes the request? I think that’s great user experience. Less clicks. Of course if the response is invalid, inform the user and clear it lol.

[@CaerelsJan]

15:41 Isn't it dangerous to show the password on screen? Let's say you have well-reviewed Chrome extension installed, but it ends up being secretly malicious trying to sniff your password. Doesn't changing your input type from password to text offer a big risk for security? I'm not an expert, so any info is welcome.

[@mat80]

No, it doesn't make any difference. If a malicious extension can read your web pages, it can also read any password fields.

[@CaerelsJan]

@@mat80 I see. Thanks

[@priusscientia]

I hate forms, where e-mail address and password is asked in two steps... makes the use of a password manager even worse on desktop systems and also is annoying on mobile devices.

[@reemnx]

i had job interview and i asked to encrypt the password before POST to the server in the client side, that really sad

[@eformance]

Why are you recommending pixel based padding today? A real problem I recently learned is that changing the font size on Android also changes the effective viewport scaling. Is there any reason not to use rems for all of my units? This is especially important given the font scaling that Android does -- so your unitless designs work correctly on each device. My 3000x1440 screen was effectively rendered to only 265 pixels wide in portrait if I selected 1 font tick larger than default. Things like Bootstrap don't even *support* that narrow of a width and require custom media queries!

[@arupdash5904]

Me: I wont be able to write any code, If i don't have google in my life. Google : Hey, we have videos as well where a guy sits in a corner and tell you what is smart and what is not.. For frrrrrrrreeeeeeeeeeee...........

[@RobCoops]

Totally disagree with using px for any type of spacing, it is impossible to judge the true size of a pixel on a screen, after all a phone with a 4k screen has far smaller pixels than a phone with a 720 screen. The same goes for laptop and desktop a 4k screen can be anything from 65" to 17" a pixel varies wildly in size. Basically unless you are designing for a single viewport and know you will not ever be displaying on anything else do not use pixels in any of your positioning.

[@jakearchibald]

I get what you're saying, but that isn't how CSS works. In CSS an inch is 96 CSS pixels - it has nothing to do with the size of the device. In fact, devices of high & low density change the size of a CSS pixel to effectively scale content. Eg, many phones have a device pixel ratio of 2 or more, meaning each CSS pixel is 2 or more device pixels.

[@sharps8726]

What's the business plan? What's the business name?

[@billsomen7953]

I DARE YOU to do some advertisement on this video

[@m12652]

Hmmm... auto completing logins and passwords. Not a great idea in a shared environment as there’s no guarantee while the user is away from their desk that they locked their machine. Edit... forgot to say, brilliant video by the way. Thank you.

[@dancovrboski9135]

Vo gogel se stretna so namohniot Makedonec koj napravi prolet za bitonot koe namohen ko gogel.

[@AboAli-fq3qx]

😢😢؟

[@texxs01]

Remember folks, when Goggle says "best pratices" two things are important to note: 1- they don't follow these pratices 2- They are what's best for google for Web Designers to do, not what's best for the designer, developer or their client. they are what's best for Google.

[@DannyvanHolten]

I don't really get, why you're encouraging autoFocus, it's being warned about everywhere

[@KR-uc9ei]

11:41 is such a big NONO. Please never do this. Username and Password are part of one and the same form, so please never ever seperate them. This WILL mess up all kinds of tools including some accessibility features and/or password managers.

[@TrabberShir]

"get the basics right" a.k.a. Don't do what google has done with their forms.

[@dancovrboski9135]

Nekoj me falı nekoj kydi koe neznam zemjata ə trkalesta sekoj ima pravo no nikoj maw vo zeminava topka nemozi həp dae stavi oti nalakomo ə hovehkoto oko nikoj dryk

[@davidconnelly]

NO GOOGLE: Not the best practices. YOUR practices. You don't own the web. Get over it.