Payment and address form best practices

Want to help your users quickly and easily get from shopping cart to payment? Learn how to use built-in browser features to develop checkout forms that maximize conversions.
Resources:
Payment and address form best practices → goo.gle/3743Alg
Speakers: Ali Sarraf, Sam Dutton
Watch all Chrome Developer Summit sessions here → goo.gle/cds20-sessions
Subscribe to Google Chrome Developers here → goo.gle/ChromeDevs
#chromedevsummit #chrome #formbestpractice
event: Chrome Dev Summit 2020; re_ty: Publish; product: Chrome - General; fullname: Ali Sarraf, Sam Dutton;

[@marcusbrsp]

"Thanks, Alley."

[@themarksmith]

Useful stuff, thanks!

[@samueldutton]

Thank you.

[@JamesJansson]

Post codes in Australia can contain hundreds of thousands of buildings!

[@samueldutton]

Ah - yes. Grew up in 5373 :).

useful, thanks guys!

[@samueldutton]

ta!

[@tanikobas6991]

I am from Germany and can validate that statement ^^
I am wondering how there could be such a little amount of streets in other countries belonging to one Zip Code 🤯

[@jamesfoley4426]

Sam on the code lab I see that the form elements are nested in section elements. I was wondering why you use the section element as a container for the form element controls. . Is it for accessibility reasons or some other reason that you can share? Just curious as I use a div element to contain my label and input elements. Great content by the way. Developer Gold

[@DioArsya]

is it better to combine the input inside the label or using for and id technique?

[@samueldutton]

That's a good point, and I should have covered it in the video. From what I've seen and heard, including the specs, either is OK. Personally, I keep the label element separate. I prefer styling like that, and to me the code is slightly more readable with separate elements - it feels a bit odd to have a label 'containing' an input. 🤷🏻‍♂️ There's some interesting discussion here: stackoverflow.com/questions/774054/should-i-put-input-elements-inside-a-label-element

[@lauraowens8129]

I don't know u what did u guys do

[@DenisTRUFFAUT]

12:11 'françoise'.match(/[\p{L} ]+/gmu) -> ["françoise"]
'𒀀𒀃𒀆𒀟𒈫𒇺𒌐𒉺'.match(/[\p{L} ]+/gmu) -> ["𒀀𒀃𒀆𒀟𒈫𒇺𒌐𒉺"]
It requires the u (unicode) modifier

[@samueldutton]

That's in the video, right? Or did I miss something? Probably :).

[@Textras]

🤑💸🤷‍♂️📃