Oh.
Are we on?
Um, we're on?
OK.
Well, um, hi.
Hi.
I'm Pete Monster, a developer advocate at Google,
and I think the internet is for forms.
Forms are a pain to fill out, especially on mobile.
Keyboards are small, you have to switch between them,
monsters are impatient, and with our furry thumbs,
it's hard to hit the right key.
It isn't a surprise that almost 97% of mobile shopping carts
are abandoned.
I've got a few tips to improve your forms,
reducing the pain for your monsters,
and increasing the chances that they'll get it right.
Take the pain out of forms by reducing
the number of questions that you ask.
And be sure to label and name your inputs properly.
Use the label element to provide direction to monsters,
telling them what information is needed.
Each label is associated with an input
by placing it inside the label element,
or by using the for attribute.
Using labels also helps to improve touch target sizes.
Monsters can either touch the label or the input
and immediately start typing.
Yay!
Placeholders give hints about the expected input.
Adding a placeholder attribute will display its value
as light text until the element gets focus.
Best of all, it's all done automagically by the browser
with no extra javascript required.
Yay!
But you know what's even better than an input with a large tap
target?
Well, do you?
Tell me.
I'm waiting.
Still waiting.
OK, fine.
I'll tell you.
Having the browser do it for you.
Yay!
Don't use random values for input names or IDs.
Instead, use standard naming conventions.
For example, want the monster's first name?
Name the input fname.
In cases where the browser can't fill it in automagically,
that makes monster mad.
Hmph!
Tell the browser which keyboard will
be the most useful by using the correct input type.
These new input types give hints to the browser
about what type of keyboard layout to use.
That makes it easier to enter information
without having to change the keyboard,
and monsters only see the appropriate keys for that input
type.
Monsters and humans love feedback,
so keep them up-to-date as they fill the form in.
And before they submit it, make sure everything is A-OK.
Don't make them wait until the form has been submitted
to tell them they forgot something.
Tell them right away!
There are several attributes that you
can use to provide monster side validation.
The pattern attribute specifies a regular expression
used to validate an input field.
If the required attribute is present,
then the field must contain a value
before the form can be submitted.
For numeric input types like numbers, ranges, dates, times,
you can specify the minimum and maximum values,
as well as how much they should each increment or decrement,
as they're adjusted by the sliders or spinners.
The maxlength attribute can be used
to specify the maximum input length,
and is useful when you want to limit the length of information
provided by the monster.
But when built-in validation and regular expressions
aren't enough, you can use the constraint validation API,
a powerful tool for handling custom validation.
To make sure the form is valid before it's submitted,
catch the submit event and then use the checkValidity
function to make sure that everything is A-OK.
If not, prevent the form from being submitted,
and tell the monster about all the problems.
Otherwise, submit away.
Yay!
The best forms have the fewest inputs,
are easy to understand, have large tap targets,
use the right keyboards, and give monsters lots of feedback.
Do your forms follow all these best practices?
If not, get on it.
And once you've done that, check out this other video
on how request autocomplete can help
eliminate checkout forms completely.
Thanks for watching.
Bye!
Are we off?
Are we done yet?
Why are you still watching?
I'm done.
I don't have anything more to say.
Honest.
You can go now.
This isn't like one of those movies
where there's a surprise ending.
We're done.
OK, I'm just going to leave now.
See ya.