[MUSIC].

[APPLAUSE].

Thank you, so today's talk is on HTML5 web forms.

It's basically on the, mostly on the input element.

So, we're gonna have a half hour talk on one element.

But if you want to, the slides are always up.

And they are always updated.

They're at just remember my name.

My name is Estelle.

I'm the only engineer, I think, named Estelle in the world.

I'm not sure. They're might be another one, but

I've got my name on the GitHub.

And the forms talk is just slash forms.

But if you go to estelle.github.io there's about 30 talk talks on JavaScript,

HTML and CSS there, and mobile performance.

So this is a web form.

This is what my web form looked like in, or not my web form,

cuz it didn't have the Twitter handle back in 1999.

But this is what your average web form looked like back in 1995,

when the first browsers first came out.

They still look like that today.

By simply adding properties to the input type you can change it, and

make it look like this.

This is not a pretty form.

But it has a lot of features, including native validation.

Including a date picker, and there's no JavaScript in that form.

[BLANK_AUDIO].

Okay, so let's go on.

So, even if you are still supporting IE7, and you think, oh like,

I can't use this stuff, someone actually is still supporting IE7 in this room.

I will not name names, but I met them, and I'm sorry, and

I told them to look for another job.

[LAUGH].

>> So even if you're, you know, even, this is what your form will look like,

if you use HTML5 and if HTML5 browser it'll look like this.

The exact same form in Netscape 4.7 will look like this, except for one feature.

The submit button will actually be prettier in Netscape 4.7 then this

submit button.

But use it.

Because people are using mobile devices, and it gives you the right keyboard.

If you're on a dynamic keyboard,

you will get the telephone keypad if you use the tel input type.

You will get the .com and I assume maybe in the UK you get a .co.uk.

I'm not sure, I haven't.

>> Still .com.

>> Still .com?

Well that's because we're more important than you are.

>> [LAUGH].

>> Com is in the US. [LAUGH] I'm kidding, and

then the email has the little @ symbol right there and the period,

and it has a space which is kind of almost virtually useless, except for

it isn't and I'll show you why so, one other thing is you have UI.

So, this is the date picker on IOS and

these are some older images of error messages that are custom.

Those aren't the words, actually they are the words, except for

this is a custom error message.

Isn't that cool?

That wasn't actually from the browser vender.

So, in HTML version 1.0,

I probably, we had these input types, and now we have a bunch of other input types.

And I've crossed some out.

Because they're not actually an issue in all five spec, but

they're, some of them are supported.

So I'll cover those as well.

But what we already have with the HTML's

regular input type is we have input type file.

And this has been supported pretty well for a long time.

Which is using input type file you can actually on a mobile device grab your

camcorder, grab your camera, or grab your microphone if you put the accept audio,

video, or image with capture of camera, camcorder, or microphone.

So it's just a simple input type file that we've had all along.

And we've always had the accept attribute.

And we have these values, and it's been working since Safari 6 and Android 3.

So it's, it's been there for a while.

Why not use it?

Okay.

In HTML 4, we had a bunch of attributes.

Name, disabled, the reason I put a colon in front of disabled is because it is

actually a CSS, but you actually don't have to put a colon in front.

It was just a note to myself to tell you.

CSS also has features.

Disabled and checked is a pseudo-class or

are rather pseudo-classes that you can use.

So we have a bunch of attributes, and

now we have a bunch of new attributes, and I will cover these as well.

And then, we had the HTML form elements, and

we also now have data list, output, meter, progress and keygen.

And I will cover most of those, not all of those.

Labels.

I know this is an HTML 5 talk, but this is an HTML 1 discussion.

Labels.

Use them.

They make your site more accessible, and they improve you, I mean, they improve

usability not just for the screen reader, but this is a tiny little dot.

I can click there and it will toggle that, right?

Or here, or here, and it will give focus and then I can start typing.

So, let's talk a little bit about the label.

There's two different types of labels.

There's the implicit label and the explicit label.

The explicit label is the one above.

And you use the, the attribute four with the value, which is the ID of the input or

the form control, so it could be a selector, anything like that so

with the ID, the, the four attribute matches the ID of the form control.

That is what 99% of people use.

The reason, I think,

that no one uses the implicit label is there's less styling ability, but

because IE6 and IE7 had an implicit label bug, so we were like never use it.

We're not supporting IE6 and seven anymore, except for that one dude here.

So go ahead and use implicit either way.

Another cool feature about using explicit label is that label on the first page,

I didn't use a table.

I think 95% of forms that I see on the web use tables for layout.

This is my layout.

It's an unordered list, which is semantically what this is.

And that's what it created.

All I did was display save label,

display in-line blog with 250 pixels or preferably percentages or m's.

And it laid it out beautifully.

Two lines of code.

Okay, it's not beautiful, but it's close enough to beautiful.

For me and my design skills, that's actually beautiful.

Okay, so, in terms of HTML5 attributes,

we have the placeholder attribute, which is progressive enhancement.

If you don't serve it to IE8, IE9, that's okay.

It supports IE10, and you simply write placeholder, and

you put your placeholder text there.

I think you probably guys already know this one so

I'm going to not spend too much time on it.

Because the pattern attribute is actually much more interesting.

The pattern attribute is an attribute that is supported on any

form control that doesn't have a GUI.

Like the, like, no buttons.

But if you're using older versions that don't support the gooey,

it at least makes sure that you at least have the right valid information if it

supports validation.

And if your processor doesn't support validation, it allows you to easily do

a plug in simply putting the pa, pulling the pattern.

So, what is a pattern?

Here I have /w 639, which means six through nine months based characters.

So if I do one, two, three, it's pink right now cuz it's wrong.

Four, five.

When I hit six it's gonna get right.

Seven, eight, nine.

And if I add a zero, it's telling me just through CSS, that, that is invalid.

Browsers that support native validation will not allow this

to be submitted if it is required.

So that was pretty simple and let's go back down one and

if I put a space in here, it doesn't match it either

because that doesn't match the /w if you know your regular expressions.

So, in this case here, this is for Firefox.

And IE that don't support,

I think Firefox actually just finally started supporting color.

But its for IE that doesn't support color.

At least it has the right regular expression.

And so I could do a pound sign, one, two, three, four,

five, six and it is supported.

Okay, then there is the required attribute.

What does it do?

It makes your form control required.

And you can match it with with CSS.

You can either do :required, or use the attributes selector,

or also for things that are not required, you can do optional.

For things that are not required, a paragraph is not optional.

The only things that are optional and

required are formed, are elements that could be required.

Okay.

So I've been talking a little bit about CSS,

these are the UI features, or some of the UI features in in CSS.

We have default, which no one knows what that means.

It is, I mean no one other than the people who write the spec and so

I had a hard time, there's no blog posts on it I don't think.

I think it means the default radio button and check box, and select item.

So, something is by default selected when the page loads, then that matches default.

In my testing, that is what it matched.

Then there's valid and invalid.

So something that is valid is something that is required and has a value.

Or something that matches it's pattern.

Or something we're gonna learn in the various input types like email.

Is it a valid email?

If it's not a valid email, it's invalid.

If it is a valid email, it's valid.

In range and out of range have to do with the number when you have a minimum and

maximum value which I'll show you later on.

Required and optional I showed you already.

And you can also, if you don't remember those,

you can also just basically use attribute selectors.

Or you can negate using an attribute selector as well.

Mm, kay.

So what are some good features of using these CSS features?

I'm repeating myself.

Input request.

So here is an input and this is basically, the UI for

the website that goes with the book that I just launched today.

It's actually the second edition of the book that was already printed.

And what it is, is on an input we're going to put a background image.

If it's required, it will have a little required icon next to it.

When that, when it had focus it's over written.

If it's invalid, it has the invalid png,

which is a thumbs down, and when it's valid it has a thumbs up.

But only on focus, cuz there's nothing worst in terms of the UI of having big

red check marks x's next to everything that's wrong while a persons entry data.

So in this deck, from now on, I'm going to use a pink for

invalid, light green background for valid.

Even in the default state, which is ugly.

But I just wanna show you stuff.

And then I'm gonna have a big border that's red and a big border that's green.

Because those are really good colors for people that are color blind.

For required and optional.

There's one thing I just did want to note before, you know,

talking about, cuz you can style all you want, but

if you if you actually autofill, the browser does this to you.

So I'm gonna file a bug later on today, cuz I think this is hideously ugly, but

this is intentional.

And this only a web kit for the Safari, Opera, and Chrome.

So you can't put a background image,

you can't change the color of the text, and right now you can't change well,

the background color of the text, and no images.

It's supposed to be a feature.

I don't think its a feature.

Next attribute is autofocus.

So autofocus gives focus on the element,

the first element that has the autofocus attribute.

There there's a, a rule in the spec where there's one other type of

element that gets focus it's whichever, it has nothing to do with focus.

It has to do with something the browser does and I can't, I'm sorry,

I can't remember what it is right now, cuz of jet lag.

But basically, the first element that has the autofocus attribute gets focused.

This is the same thing that happens if you actually have an error on the page.

It will, when you run through it,

it will give focus to that even though you don't use the autofocus attribute.

Don't use the autofocus attribute.

The autofocus attribute is what breaks my deck every time my deck breaks.

And then I forget, and if you can tell, the previous button is off

the screen right now, that's because that broke my deck.

Cuz what it does is it gives focus to that element when the page loads and

it moves it off and tries to give it focus and then I'm giving it focus back and

it just gets confused.

That's not actually what the browser's doing,

but it is giving focus directly on page load to that element.

Which is really bad user experience.

When you have a form,

don't autofocus to the 17th element just because you think it's really important.

They'll still wanna read the top part of your page.

So yes, it's a property.

And no, don't use it, okay.

The form attribute is kind of interesting.

And it has a major quirk in it, too.

The form attribute allows you to put a form control anywhere on your page not

in a form.

So what you do is you put as the value of the form control the form attribute,

the ID of the form that you want it to be associated with.

So you, somewhere on your page, over here you have the I, your form

with an ID in it, and then somewhere over here you can have a form control.

You can even have that form control in a different form.

It will be submitted when that form is submitted.

The thing is it associates it with a form.

So if you have it present it will associate it with the ID that's in there.

So if, if it's within a form and you remove it.

So it's an empty string.

It will disassociate it from the form that its currently its parent, if it has one.

So if you use this, and

you dynamically remove it, you wanna actually do a remove attribute.

Because you wanna remove the form attribute, not just nullify it.

So that is that, I just saved you 12 hours of time right there with that one.

>> [LAUGH].

>> Okay.

The type attribute.

The type attribute is the most basic attribute.

It is the only required attribute, and it's not actually required because if you

omit it, it, the browser will basically put it in as the value of text.

[COUGH] And that's what we're gonna talk about cuz there's many other values.

So we'll, we'll cover that in a little bit, minute.

Just realize, if you're working on an old browser and you put the date attribute in,

and it doesn't understand date, it'll just give you a text box.

Which is perfectly fine cuz someone can enter a text,

the date in a text box, okay.

So these are the old types that we've always had.

Button, checkbox, file, hidden, image, password, radio, reset, submit, and text.

Please don't put the reset on your pages.

I have no clue why anyone would want one.

And if you do, don't put it where the submit button is.

Or don't put the word submit on it as a value either.

[LAUGH] Another good April Fools' joke, yeah, okay, so

another April Fools' joke is to do a transition star,

transition, zero 200 milliseconds.

So that everything that transitions on your page waits 200 milliseconds before

loading.

If you just wanna lose your job, that's a good April Fools' joke to pull.

>> [LAUGH].

>> Okay. So these are the new input types.

We have color, url, telephone, email, number, range, search, date and time.

There's four that are crossed out here, cuz originally we had 13 new input types,

then we had 12 because date time was deprecated.

And date, time, local month,

and week are actually currently supported in almost all browsers.

Datetime local might change just the name to date time,

instead of datetime local cuz it's easier to write.

So these are still at, they're still in the thought process.

They haven't been eliminated.

Their name might change.

But all the other ones made it into the HTML5 spec that was approved and

made the found, file recommendation in November, okay.

I'm going to cover an element before I cover the next input types cuz this

element is awesome.

It is the datalist.

It simply provides you, since no one can see it in the back row three options,

Standarddista, O'Reilly, or Evotech, which are these three right here.

So it's basically like a select, but instead of putting a selector around it,

around options, you put a datalist, and those are options that you can use to,

to auto fill, but you can still put any other value.

So if I start writing http, you see it's open and

then I start with an f and that's not there.

But, if I do an, www., it's gonna narrow it down to just one,

cuz that's still an option and then none.

So you can actually auto complete or

rather use HX to autopopulate your options and dynamically do stuff and

jQuery actually has a plug-in that does basically just this.

So this is kind of cool.

But I want to cover it now, because on, it doesn't just work on text.

It works on other options too and I want you to know that this is what's happening

in the background when I get to those.

Okay.

So we have type color, and type color when it works,

there it goes, allows your color options.

And there you go, I have the color picker.

It's the native color picker, whatever your OS uses,

that is what color will give you.

You can do a little bit of a place folder and a pattern for

older browsers that don't support it yet like IE.

You can put required for IE, there's no reason to put required for

any other browser, because by default you will get black, it will be #00000.

If you choose a name color, like you can with the crayons, I think, where is it?

Oh yeah, here.

Here it says green, right?

It will actually use the hexadecimal value.

So what's nice about this, everyone will be entering the, the same format,

which is lower case hexadecimal color.

The reason I want to introduce datalist before I got to this page, is because here

I'm offering to my users that I would like them to pick one of five shades of red.

So I used a datalist with five red colors.

They can still pick any color they want.

But by default they get the reds.

So that's datalist, native in the browser.

There's JavaScript makes this, this, this slide deck work.

But there's no JavaScript in any of the slides except for one slide and I'll show,

I'll let, I'll let you know when we get to that, okay.

Then we have type="url" and type="url" is basically an URL.

g: works or g://.

[BLANK_AUDIO]

[SOUND] So my computer kind of died last night and

I thought I had a backup, but it's not quite there yet,

okay, so g:// would be a protocol.

I think it's actually a g: I think, as long as you have a colon.

Or a, or colon slash slash.

Depending on the browser, it accepts it.

So, if you actually want a specific URL format, give it a red pattern as well.

And, it gives you the dot, the slash and the com, on the phone.

Type tel gives you the phone keypad.

No validation but you can use a pattern.

And preferably this bottom one is better usability.

You put in like how you want the digits separated, so you don't have to tell

people that they can use a parenthesis or plus or you know it allows them.

If you use this don't auto forward when they complete the third digit.

You're, you're UX designer will tell you to do that, but

it's actually a bad user experience for people who are using the keyboard because

they're used to finishing and tabbing to get to the next box.

And then they'll tab out of the box, and

then they'll have to figure out how to go back.

[BLANK_AUDIO]

Type email.

Let's hope this works, e at g is now correct.

Cause that could be on an intranet, dot com.

Dot com.

This one has the multiple attribute.

So, I do comma, optional space, t at fu, or g, and that works.

So, it does not support the semicolon like Outlook, it supports the comma.

But you have native email validation.

No JavaScript and no regular expression this one.

If you wanted it to match a certain way,

you could actually put a pattern, and you get the right keyboard.

Input type number gives you a spinner.

Note that the increment, by default, is one.

There are three attributes, min, max and step.

Min is the minimum value.

Max is the maximum value.

And step is the step that it's gonna go up.

So, that was, that's why this one went up by 40 and this one went up by one.

One is the default.

If you actually put 10.2, that is an error.

There is no step in there, but that is an error,

because step equals 1 is actually basically added in there for you.

If you want to allow a float, step of any allows it.

Right?

And this just says it's wrong because this is supposed to be a negative number.

I forgot that next was zero.

Okay then we have type range, again with min, max and step.

So many people ask me this so I have a slide on it, how do you make it vertical?

Depends on the browser.

I'll cover that in a minute cuz for some reason I covered this first.

Oh, now I remember why.

Datalist.

You probably can't see it but

if you're sitting where I am, there's four little checks right there.

jQuery doesn't do this I don't think.

So you can actually give it a data list of this is where, you know, indicate to

user that you want them to go in that direction with six seven, eight and nine.

And here, the number, same number input type, I can either do that or I can

open my data list and give the options, options of seven, eight, nine and ten.

And seven, eight, nine, and ten were the options.

And look, I use the same data list twice.

You can use the same data list for

all of your, lists pra, attributes throughout the deck.

So, vertical ranges.

It's over here.

It's right there.

It's way there on the side of the screen.

I'll duck so you can see it.

Different browsers support, do it differently.

Firefox orient equals vertical.

Webkit or blink is -webkit-appearance, slider-vertical.

IE is writing-mode: bt-lr.

Dont worry about that, I know.

Cuz this, this line right here is the eventual solution,

which is a width that is narrower than its height.

It'll still follow like the longest of those two and that's the length it will be

but if the width is narrower than the height then it will be vertical.

Okay, then we have search which gives you, like,

this little UI feature of clearing it.

And basically it mimics the browser's search.

So in Safari, it's gray and is rounded but it doesn't do anything native.

Then we have the the date input types.

And so we have these type of controls.

You can use min, max, and step.

So you can pick every Tuesday by start,

by having your min as a Tuesday then everything else will be a Tuesday.

We have datetime-local which you have date and then time.

We recommend or, this, we, the royal we.

The W3C recommends that you actually put or

standards bodies recommend that you put, instead of using datetime,

that you use date and time as two separate entities.

Then there's a weird thing called week.

So week allows you to pick a week and

it will submit W-12- and then the year.

The first week of the year is the, is the one that holds January 4th.

So you might have three days of the year before in your first week or

you might have not, might not have the first, second,

and third in your week, in your, in week one.

And time.

Oh, I'll go on.

Okay. So what are useful dates?

The birthday might take a long time to spin through, but the way they did it now

with the actual three different features makes it much easier than it used to be.

You used to actually have to go through calendar and change years.

Time.

I like to do step of something.

The step of 900 is 15 times 60, which is 15 minutes.

So if you were to, gonna do an appointment time it's gonna be red until

2:00 p.m., because that is between 9:00 a.m and 5:00 p.m.

It's military time in terms of the attributes.

It's American style time in term, terms of the a.m., p.m.

Okay.

So these are the attributes that we have.

I haven't covered these so I'll cover these quickly.

These are actually, element,

attributes that you can put on a submit button or any type of button,

a button button, that will override the attributes that are in the form control.

So if someone is actually saving a, a form.

You can have it go you can have it

go to a different page instead of serving it right to the server.

Or you could say hey, you know, instead of submitting it do all sorts of things.

Then we have the validityObject, and

the validityObject is how you control the error message that you get.

By default,

if you have a title in your form control, the title will show when an error shows.

So that's already really cool cuz the title, when you hover over it,

it'll show, but it'll also be in the error message.

But you can write completely your own error message.

So we have value missing, which is when it's required, it's not there.

Tightness match, if you have a date and

you put just a simple number that's a typeMismatch.

PatternMismatch.

That's the regular expression pattern one.

TooLong is when it doesn't match the max length.

Underflow is lower than minimum.

Overflow is higher than maximum.

StepMismatch is when you have, when you forget to put step in and

it's not divisible by one.

Valid, don't know what that is.

Custom error is then an error that you can put in yourself.

So, let's look at a little bit of code, in one minute that I have left.

Here I set the custom validity on value missing to please enter an age.

If it's range underflow it's too low, overflow too high.

The most important thing to note is setCustomValidity

in the L statement as an empty string.

If not, when you set a CustomValidity message your form will never,

ever be valid.

It has to be fals.

So, nev-, always remember to put this as your L statement.

So. I was going to show you it in action but

I'll show you this version.

Here you can't read it, it says please fill out this field.

This error message is simply the contents of the title.

And I will show it to you.

Here, if I put 12 and I hit send, it says, you are too young.

So I wrote my own error message.

[BLANK_AUDIO]

Okay.

We have the meter element, it's yellow.

If it's outside of the min, of the low and the high.

But it will be between the min which will be the minimum number and

the max which is the highest number.

We have more meters.

I have two seconds left so I'll continue on to progress.

This is actually not what the progress bar looks like.

This is what the bug that the virus that took over my computer

yesterday did to my computer.

So that's not actually what the progress looks like.

But if you're interested in finding out more about the browser like

every single possible detail you could ever imagine about any of these,

I actually wrote this which is the HTML5 forms at WUFOO.

So if you do search on forms you usually end up here.

Not always, but it has ridiculous amounts of detail

on every single property and value.

Which browsers support it, which attributes pass,

which attributes fail, and every single corp that I talked about.

So if you don't remember what I said, I think there's a video,

but you can always go here.

So thank you very much.

[APPLAUSE].

[MUSIC]

>> [INAUDIBLE] and style.

I think there's so much packed into that.