Sign-in form best practice 

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

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

Basics that no one taught us

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).

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

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

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

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

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.

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

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?

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

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

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

Fantastic guidelines that all make sense, and excellent production!

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

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

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

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 :-)

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!

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

So simple and yet so powerful.

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

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.

Thanks! I didn't know all these tips.

This is exactly what I was looking for. Thanks!

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

thanks for usefull info Google team!

BRAVO!!!! More please :-)

Loved this content, learned few new tricks. Thanks!

Very professional with awesome tips, Thanks!

RU-vid 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.

Great and very useful video. Many thanks!

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

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

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.

Great Video!

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!

This was enlightening. Thanks!

This is gold!!

Perfect! Thanks for that!

Loved It, Loved It!!

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.

Thank you for this!

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

Very well explain, great content!!

Very helpful. Thanks a lot.

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

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

Very informative video.

Sooo goood! :)

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

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.

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

So much to learn so little time 😩

Nice explained

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

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

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.

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

Thanks

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...

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.

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

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...........

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.

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.

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

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

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

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

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.

I DARE YOU to do some advertisement on this video

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.

😢😢؟

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

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

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

Great video!