HTML Forms

Welcome back to Educator.com.0000

We are going to look at forms and a little bit of what you can do with them,0002

and some tricks you can use to make them more usable for users and more useful,0007

and how to get the data that you are getting from your users to be useful on the server side, as well,0012

so that it knows what type of information it is dealing with.0019

Before we really get started, you should be familiar with this terminology.0025

A form--you have seen them on the Internet all over the place: it is the little inputs where you type information.0031

And then, you hit Submit, and it sends it off, and usually you get some sort of response.0038

The form is all of that--all of the different types of inputs are known as form elements; or actually, they are known as form controls,0043

which is a little bit of a technical word; you might hear them called fields or inputs, more casually.0051

But they are technically called controls; so any little control where you are entering your name0060

or checking a box or selecting something from a menu--that is a control.0065

The control name is the name of the control, and the control label is...well, I will show you a demonstration.0070

Say you have (this is a bunch of forms here) this name right here, where it is labeled as the label.0080

And if you look in the source, this control actually has a name that is sent to the server.0091

A label is what the user is going to see, that identifies what they need to type in.0096

And then, the name of the control is like the back-end name that describes for the computer that is dealing with the data what to do with it.0102

Input type and state: most of the form controls that you will be dealing with are the input control.0113

And there are a lot of different types: the type describes what type of input it is, so there are a lot.0121

There are password fields, submit buttons...0129

And then, the state indicates, for example, whether it is on or off (if it is a check box), and things like that.0132

Form controls: this is a list of the form controls that are available right now.0143

Let's drag this up a bit.0150

First of all, the buttons: this is just like...you will see a little example here like this; this is a button.0153

And usually, you will click on it, and it will send; I don't have it hooked up to the Internet, so it isn't going anywhere right now.0165

That is a button; but there are a couple different types.0171

There are the buttons that are actually submitting a form, and that is a little bit different on the back end.0174

And then, there are just basic buttons that don't do anything by default;0180

but you can hook in JavaScript or other things like that to it, so that when you click the button, it begins a JavaScript action.0184

Or you can even use them as links--things like that.0193

The reset button is a button that just erases everything in the form; it can be very annoying if you click in by accident.0196

So, I haven't actually included it here.0205

And here is the last button: this acts like a button, but it is not a button.0208

This is an image, but I am going to talk about that in a second.0213

Radio is a little (let me pull this up again)...they are like check boxes, but each one can deselect the others in the same group.0218

If I select one, the other ones get un-selected; you can only have one at a time selected within that group.0233

Check boxes are the little squares you see; and you can check multiples at a time.0241

Select menus are also called dropdowns or just a menu, and it is where you highlight a little...here is an example down here: let's zoom in.0246

You highlight which of the many options you want to pick.0262

A text area is also known as a text input or a text field, and it is the larger text field,0269

where you type in multiple lines of information, instead of just one.0273

And then, these are all the input tags; so all of these have their own inputs.0279

They are on HTML code; all of these down here are the input element, but they have the type attribute, which sets them as different types of controls.0285

These are the slightly older, more historical input types.0297

And these are the ones that are new in HTML5.0304

So, you have text, which is just your basic, one-line text input.0307

Password will make the characters you type hidden in some way.0311

The hidden input type is not visible to the user; you can use it for information that you still need to send to the server,0316

or that you want to access with JavaScript, but it doesn't need to be edited, or even known to the user.0324

File will upload a file; image, I showed you, will act like a button; but it can be an actual image (here it is).0330

So, when I put my cursor over this, the little cursor turns into a hand, just like a link.0342

But it is actually more like a button than anything else.0348

The Submit is just a typical button, and the Reset, also, is a typical button, that submits and resets, respectively.0353

And all of these I will get into a little bit later in this lesson.0360

But they are new to HTML5, and the purpose of them is to pave the way for what people have been using in forms.0365

A lot of websites have text fields where you can type in a search (for example, google.com).0374

If you go to it, and type in information, and hit Enter, it performs a search.0382

And that is not quite a semantic use of the text field; so, HTML5 created the search text field, which looks almost exactly the same.0388

And basically all the rest of these are the same thing; they are dealing with use cases where0398

it is not every possible type of data, but it is the most common ones.0404

This would be a telephone number; a URL; any type of number; a range; if you are inputting a color, there is an input tag for that.0408

And then, these are all different types of dates: date, month, week, time, including localities or not.0416

Let's look at the code for some of these.0427

This is your basic form element; all controls need to always be inside a form element.0431

And just a tip: although it is technically allowed for you to apply CSS style to the form element,0439

the application in browsers is really terrible, especially in Internet Explorer.0449

So, if you do want to add styling to the box-level element around the form, add a div around it and style the div instead of the form,0453

because you are going to just run into a lot of problems trying to apply presentational stuff to the form.0464

Every form has...here is where it ends here; here is where it begins;0471

and inside of it is all sorts of stuff, but most importantly, inputs and various controls.0478

Now, the form--if we really want it to be useful (and this is just demonstration, so we are just looking at it;0487

but when you want it to be used in the real world), you need to have a method and an action.0493

The method will tell it how to send the information, and the action will tell it where to send the information.0497

This is just an example: if you have a PHP file called processform, you could send it using the GET method to this PHP file.0504

And it will be able to accept that information and deal with it, depending on what it is.0516

And usually, the browser will re-direct the user to the location of this.0521

So, this PHP file will actually output some information--something like "Your form has been successfully submitted."0525

The GET method will send it using the browser URL in name/value pairs.0531

So, sometimes you will see in the URL that there are little question marks, and then variables and equal signs, and then other things and ampersands.0537

That is when you are using the GET method, more often than not.0544

The other method is POST, which can be encrypted; it is not visible to the user; and it kind of goes in the back end.0548

But it is a little bit more powerful, too, because it is not limited by the URL; it can be characters that are not allowed in the URL, and things like that.0555

This is the basic way of setting up an input.0569

You want to label your input so that your users know what they are filling in.0575

And the proper way to do that is the label element.0580

And it is a really handy element, because it automatically associates with the form input.0583

If I were to click on the label here, it actually highlights the element input for me, just the same as if I clicked directly on the input,0592

because the browser knows that they are connected.0600

The way that I have done that is: I have set the label; I have given the input that it is connected to an ID of name1;0602

and then, I used this for attribute, and I put the same ID.0609

And now, the browser knows that this input, which is just a regular text input, is connected to this label.0612

And various browsers will hook that up differently.0620

But another way that you can do that is right here; this is the same thing.0626

I don't have the for attribute here, and I haven't given the input an ID.0632

But because the input is inside the label (it is a child of it; it is nested inside of it), then the browser knows that this text label applies to this element here.0639

You can see the password, too: I click here--it highlights right there.0653

All right, so this is the text, and you have seen the password.0663

This is an input type hidden, so you may have noticed that, between the name and the password,0667

even though there is an additional input right here, there is nothing showing up.0674

That is because it is hidden: if I were to look in the source, you would still see it.0680

So, it is not actually a good thing to put something that is secret, because if I view the source of this, the user is still going to be able to see it.0683

But it is just something that you don't need them to be thinking about, and it is still something that you want to be a part of the form.0692

Passwords are handy for hiding your password from people looking over your shoulder.0702

The next one is the text area; I skipped over this when I was talking about it earlier.0710

But it has its own element name, Text Area, and you still need to give it a label.0717

I am using the method now where I have it nested inside, because it is a little bit more convenient.0722

And you can actually give text areas sample text, like this, and save, and refresh.0729

Now it is not working; but you can type things in here, and that is kind of an old way of doing it.0747

And that may be why it is not working--because that is frowned upon.0755

If you want to give it a label, use this; and if you want to give it sample text, you can use other methods.0761

A couple of attributes that you can use on the text area are calls for columns (say, 2 columns...0767

actually, let's make it 12 columns, so you can really see the difference).0775

Let's pull this up in another browser; there.0791

Just make sure and save this...and refresh; there, now it is a little bit thinner, instead of wider.0812

That is just one column, and then, if we make it large again, and refresh, it will be 12.0833

If I type...that is 12.0846

Columns are horizontal; and then, we can add the rows.0853

I may not have saved that; oh, it was just a text error.0870

That is interesting; it is not reacting the way it should (it should actually change the number of rows).0890

But this is sort of an experimental browser (it is a beta) because I am showing some more advanced things down here.0894

There might be a little bug going on; but normally, you would be able to change the rows.0905

Oh, this is a syntax error; that is the problem.0912

Teachable moment: syntax errors really cause problems--there we go; that is the way it should be.0916

OK, the maximum length attribute is a new attribute that lets you set the total number of characters that are allowed in the form.0925

So, say we only wanted 5 characters allowed.0936

I can't type anymore; that is surprising.0947

OK, that is not working; it may be because, again, this is a beta browser.0971

And this is also a new thing in HTML5, so it must not be supported in this browser for this element yet.0977

But it will be in the next few years, for sure.0986

A wrap can be hard or soft: hard wrap would mean that, when you type it in the form, and there are line breaks,0990

it breaks it automatically--the hard wrap will actually, when you submit the form, include these line breaks into it.1004

And if you have a soft wrap, then they won't be; it will just be software wrapped.1013

And it won't actually look different in the browser; but on the server side, when they get it, it will be.1022

And then, lastly, you can give it the read-only boolean attribute; and boolean means it is either on or off.1027

By default, it is off; but if you turn it on by adding the attribute there, then it makes it read-only, and you can't edit it.1034

See, I am typing right now, and it is not letting me edit it, because it is read-only.1045

And if you are going to be writing this in XML syntax, or XHTML, you would have to write read-only equals...1053

You can't say true or false here, because that is not how boolean attributes work.1060

All right, and then we add the submit, which would be just a simple...1065

if you don't give it a value, then it is a submit query in this particular browser.1069

Each browser decides on its own, but you can give it a value.1074

A lot of people feel like Submit sounds kind of dominating, like "submit to my will or my authority."1079

So, you can give it a value of Send--something very nice-sounding--if you want.1084

And that will update it; Send--very nice.1093

That is a Submit button; here are a couple of other buttons--I will show you the code; here are the buttons.1099

I have started a new form.1105

The most basic button you will see is just an input type of button.1109

And then, you can give it a value of anything you want, and it will show up, just like that on the button.1112

And if you press it, nothing happens.1120

If you wanted to give it a JavaScript event, you could say something like on-click= some JavaScript; and make sure you have correct syntax.1123

If I refresh this and click on the button, we are going to have a little JavaScript pop up.1141

And the same thing with the Submit button, except this will automatically submit.1150

You can use a regular button, using JavaScript to submit, as well, if you don't want the browser to submit.1153

If you want to, for example, run some checks first before actually submitting it, you can use a button button,1160

instead of a submit button, and give it a value of Submit or something like that.1166

And this is also the newer button; it is a button element, not an input element.1170

And the value is given by its content right here; so this says "I am a button," just like this one does.1177

And they are very similar; but you can see that, because the value is set like this, you can give some HTML in here.1184

So, I have an emphasis tag; and there are some rules about what sorts of things you can put inside the button element as content.1192

You can't put videos, for example, or links, because that would be kind of redundant.1199

The only reason you don't see these used widely is because Internet Explorer 6 will submit1206

the value of the content here, instead of the value that you want it to submit; and that can kind of mess things up.1212

Basically, it is not supported in Internet Explorer 6.1219

If you are developing a website, you are going to have to decide if you really want to be supporting Internet Explorer 6,1221

or if your user base is using modern browsers, and may not need to.1226

And then, last is the image input, which is just the same as a button, really,1233

except you can set an image; and when I hover over it, it indicates to me that I can click on it.1238

It is slightly distinct from a link, but in a lot of ways, it is very similar to just if I had put an image tag, and then links around it.1244

These are some different controls that you can use.1256

This is the input type radio that I showed you a second ago.1264

So, say you are in a chess program, and you need to indicate which piece1270

you want your pawn to be promoted to, because it has reached the other end of the board.1277

You can only promote it to one and only one; but you have several options--that is a great thing for a radio button.1281

And the way that you make it work is: you give them all the same name.1287

This is the control name, and they all have the same name of piece.1292

They are all type radio, and they each have a different value.1296

So, when this gets submitted to the server, anything you write here won't get sent to the server,1300

because this is just what the user is going to see.1305

This is actually part of the label; you can see, again, that the input is inside the label.1309

The user will see this label, and it is connected.1313

So actually, it should, if I click on the label, highlight the radio button for me.1317

So, even if I can't quite reach it...it is an accessibility thing for if you don't have precise control of your cursor, for example.1322

But when I submit this to the server, there are not going to be four of these values; there is just going to be one.1335

It will have a name of piece, and a value of whichever one I have selected, as the user.1341

If I select Knight, then it will have piece and Knight as the name and value pair.1347

Now, you can notice that I have used a field set here; and a field set is very handy for things like radios and check boxes, to group them all together.1354

You usually use it when you are using elements that have the same name, like this.1362

And it indicates to the browser that this is all one sort of element.1366

And just like it is going to show up as one value when submitted to the server, the browser is going to give a little line around it.1371

Different browsers do this in different ways.1377

You can hide this line if you don't like it; and you can style it so that it will look the way that you want.1379

The important thing is that you are semantically grouping this together as one little field set.1386

And you can also give it a label, and the HTML element for that is legend.1392

And it labels the entire field set, all together, in a very cool little, nifty way.1398

So, I use that for check boxes and radio buttons.1405

This is a check box (let me size it down again), and this is (I am using the same thing) a field set and a legend, with the title of what this is.1411

And they all have the same name here.1424

And actually, I made a mistake in preparing this, because this has the same name as this.1428

And that is going to cause problems when you submit it, because you will have two of the same form control name.1432

And they will both be piece; and so, this one is probably going to override this one when submitted.1439

I really should call this piece2 all the way down; but I won't correct that right now.1444

And because they are check boxes, though, you can select as many as you want.1450

Here, I have all of them here: say I want King, King's Knight, Queen's Rook, etc., and then all the pawns.1455

And you will notice, again: I am clicking on the actual label--just the text.1464

And because it is properly set up, with the label element and the input inside of it,1468

it highlights and selects and deselects the check box automatically for me through the browser.1473

Now, when this gets submitted, it is going to send all of these values, not just one, because of the way check boxes work.1483

OK, so next, let's zoom back in for this.1493

This is a select menu, so the element name is just select.1503

And then, within the select, you have a bunch of options.1508

Let's scroll down to the example.1514

I'm going to look at it in another browser: let's look at it in Opera--I think this zooms better.1516

Forms, by the way, tend not to be very well-supported for styling in browsers.1526

So, if you really want to change the way that the border looks, you can try.1533

But the browser implementation is not very reliable, and it is different for browsers.1538

And things like zooming aren't consistent; that was just Firefox I had up, and it didn't zoom the form controls with the text,1543

when using the text; whereas, in Opera, it does zoom the form controls a little bit, as well.1551

So, this is a select menu; and I can click on it and select which of the options I want.1558

And notice that, again, it didn't zoom the actual dropdown list, even though it zoomed the control before you click on it.1565

So, that is probably something that browsers are going to "firm up" later.1575

But for now, just leave it the way it is; and users know what their operating system and their browser does.1579

So, unless you really need it to look differently, most of the time, just leave forms alone,1587

because it will take a lot of effort to get them to work the way you want.1593

Again, this is the part that gets shown to the user; and this is the part that gets sent.1601

Now, if I set a name up here, then this is the name; and then, the value will be selected by the option.1607

And you can also set a default; so, set one bishop to be default; let's save that.1617

Right now, a king is selected; but if I refresh, the bishop should show up as a default and may be selected--actually, is selected.1625

A default is the old way to do it; and it was probably never correct, actually.1644

I have learned a lot of bad habits over the years.1649

Selected is the correct method to set it as a default.1651

OK, label (input type file)...the label is Upload a Picture, and then here is the input.1657

You can click on this, and you select a file, and it will upload it for you.1668

And you had better have a server-side implementation that knows what to do with that.1672

Now, we are going to get into the new HTML5 inputs.1676

These are all input controls that have different types.1680

And they actually won't look too different; this is Opera--this is probably the most advanced, when it comes to the new implementation of elements.1684

But look at it in Firefox; this version of Firefox shows these new ones.1695

They still show up, even though they are not actually supported.1701

And they just look like text inputs, actually.1704

And even though I have given it a type of email, which is not something that this version of Firefox recognizes,1708

it defaults back to as if I had put text in here, which is actually part of the HTML5 specification; and it will still work.1717

So, it is backwards compatible; if you have older browsers, it will recognize it.1727

But if you have a newer browser, it may actually decide to render it the exact same way.1732

It may look still just like this email form, but it is going to send the data type to the server.1737

And your server will know, "This is an email content, and so what needs to go in here obviously has to be an email."1743

And you can set multiple, which is another boolean, which means that you can have space-separated emails (hello2@example).1749

And now, the browsers, probably in the next few years, will have nifty ways1767

of demonstrating that you have more than one email entered in here--maybe little dropdowns, or things like that.1773

You have email, URL (which needs to be a URL), and again, this is another nice thing about this:1779

when it gets implemented better by browsers, they are going to do a little bit of front-end validation.1788

So, if you type something like this, where I have two @ symbols, that is going to be a malformed email.1794

And the browser vendors may come up with a way to indicate, before you submit the form, that you have malformed content.1801

And it is going to give you a chance to correct it before it sends it to the server, and it comes back, and all this stuff.1811

So, the website expects a URL; phone number expects a valid telephone number.1817

A range...right now, if I was going to enter a range, because it is backwards compatible,1824

I just have to enter something like this, and then put the dash for the range.1830

If I was going to use Opera, though, I could actually select the range with this little range thing they have going on.1836

We have a search, which I will demonstrate in Safari (let's scroll down to it).1848

It has this circular look; and then, if I start typing, a little x shows up that I can click to delete what I was searching for and start over.1860

Right here, we have the Color input type, which will probably take a hex value.1875

And this is not supported at all right now; so even in Opera, it just defaults back to the text.1885

But someday, it will probably be a little icon here that you can click on.1893

And it will pull up the operating system's default color selector.1897

So, in Windows, it will be that little menu you see, with the most common colors, and the little dialog to pull up more complex colors.1902

And there is a similar window like that in Mac; and there is another one in Linux.1913

So, when you click on this, in the future, when browsers implement it correctly,1918

it will just pull up whatever the operating system's default way of selecting a color is.1922

And users will be familiar with that, and they will be able to pick the color easily.1925

And this is a number, but it is demonstrating the use of min and max.1931

So, by putting the min and max attributes here, and the step, I have set the minimum and the maximum number that you can fit.1937

And this should say 10, and then let's make this one say 16,000; all right, let's save.1949

So now, because Opera is beginning to support this (let's refresh it), if I click these buttons, it will start at 10.1961

And then, it will step up (the step is 23, so when I go up, it will go 23 at a time), all the way up to the max value (oops, I didn't mean to close that) here.1970

And you can set them to whatever you want.1986

And say you want to allow steps of 1; that is going to be the default anyway.1988

But if I refresh this now, I can go up one at a time, instead of by 23 at a time; so that is very cool.1994

And again, it is a new thing, so browsers aren't necessarily implementing it yet.2001

Safari has pretty good support for it that actually looks a little bit better than Opera's at this point.2007

And that is that.2017

The date and time controls are really not supported by most browsers at this point.2021

And they all are the same goal of just getting information that is in this default date format.2027

I will show you, in a browser, what the date format is.2035

So, these represent the different parts of the data; this is the way computers understand dates.2040

First, you have four characters (which are the year), and then a dash, and then two characters2047

(which are the month), a dash, two characters (which is the day, like the 13^th of the month).2052

And then, this is just always a T; and then, you have the hour, a colon, and minutes, a colon, seconds, and then a period.2060

And this is the time zone, and it will be Greenwich Mean Time, or whatever it is; there is a code for that.2068

So, this is the full format; but there are a lot of different options in the forms for if you don't need to use the full format.2080

You just maybe want just the date.2088

This date type will only pull up the year, the month, and the day.2092

And then, you don't have to worry about time or timezone.2098

And then, there is datetime, which has both the year, the month, and the day, and the time in hours and minutes.2101

And you can enter it in, and when it is supported (for example, like Opera does), it will allow you to pick it.2109

This is just the date input; and Opera has this cool little thing where you click on it, and it pulls open this little calendar.2119

And you can look through the years, look through the months, and then select the actual date that you want.2127

Say I want September 2010, and the 18^th: it has it right there.2135

In Firefox, which doesn't support this very well, I will have to enter it in manually--maybe 2010-10-18--something like that.2140

And Firefox or other browsers may implement a little bit of support, where they will check this.2155

But they still don't have the cool little calendar that pops up.2161

But as it is backwards compatible, there is no reason not to use these input tags,2166

because it is going to start looking good when browsers input the functionality.2171

This is datetime; you do the same thing, where you get the date, month, year; and then, you can select an actual time, in terms of hours and seconds.2178

And this also takes the timezone here.2190

And then, if you want to do it without the timezone, it is the same thing: datetime-local.2194

You can also get just the hours and minutes (that is time), just the month, or just the week.2201

Let's look in Opera again, because it has these cool things.2207

Hours and minutes (it just shows it here)--you can enter in 50 hours and 4 minutes; I can just pick a month.2210

It shows this whole calendar again.2217

And then, if I just click, it grabs the whole month.2219

Even though I click on a date, it just takes whatever month I have selected, and year (June of 2006).2221

And then, the week--see here, it is showing the number of weeks in the year.2229

So, let's go to the beginning of the year: January, week 1.2233

But then, if I go to December, there is week 52; so that is what that does--just lets you pick a week.2241

And again, it is just a type of week.2248

Here are some cool things you can do in HTML5 now.2253

Say you have an additionally type of input that you want, but there is not an HTML5 input type that is created for you.2256

Well, you can use the pattern attribute to specify--this is a regular expression, and you can specify a regular expression2266

that tells the browser what format to expect this data in.2275

And then, you don't give it a type.2279

You see: these other inputs have a type; this one does not.2281

And what it is going to do is default back to just the regular text input.2285

And then, it will (when it is supported) apply this regular expression.2290

So, this regular expression says, "Look for a character that is A, B, C, or D; and then, look for a digit; and look for 5 of those."2294

Anything that is not in that format will not be accepted.2305

A valid entry might be A345...five numbers...any five numbers.2310

But if I put something like E in here, that is going to violate the regular expression, and the browser will reject it.2320

And regular expressions are very powerful; I am not going to go into detail on them right now;2326

but you can set a lot of very cool specific types of forms using this very powerful pattern attribute.2332

And yes, note the lack of the input type.2342

It is an input, and it just defaults back to the text input style.2346

Placeholder text is very cool: this is something you used to have to do with JavaScript.2351

You have an email, and you want it to give an example of what it will look like.2358

You can get this placeholder, and then put this example text in there; and it will show you how it needs to be--what the example is.2365

Again, this is new, so it is not supported here in this browser.2375

But let's look in Opera; I believe Opera supports it.2380

Opera does not; it supports the email--you can see it is a little bit longer by default; but it doesn't support it.2387

What does support it, I know, at this point is Chrome.2394

Here is Chrome, and there is the (I'll zoom in a little for you) placeholder text.2398

It says name and example, and it is grayed out.2408

And then, when I click on it, it disappears, and I can type whatever; and what I have typed stays.2410

But then, if I delete it again and tap out, then the example text comes back.2417

This is very nifty, to have that functionality.2422

And you can put that, not just in email forms, but in any control that supports it (most controls do support it).2425

Datalist is another nifty new addition, where you want the user to be able to input anything they want.2436

But you might have a couple of very common suggestions that they might need to type in.2445

So, here is the example I am using: the salutation, your title.2451

You might want to type in Doctor or something like that, or just Mr.2458

And when this works correctly (let's see, I think Opera, again, supports it),2465

then you will get a little dropdown with some of the most common ones: Mr., Ms., Mrs., Miss, Dr....2474

But then, say that my title is President: I can type that in, and I am not limited by these options.2483

But if I am not a president, or something very uncommon, I can just click the default right there; and then I don't have to worry about it.2489

And normally, I would probably style this to be a bit smaller, as well.2498

The way you do a datalist is: it is similar to how you relate a label to an input.2504

You have this for attribute with the name that corresponds to an ID.2510

The same thing here--you have a datalist with an ID of Titles, and the input has the attribute list and then the ID of the Titles.2514

So, they are connected; the browser connects them.2523

And then, the datalist is formatted very much like a select menu, in that it has options that are inside of it.2525

And then, you just give them values; but it is a datalist--it is not a select menu.2531

Here are some cool things you can do with a text area.2538

I actually already talked about most of these, but you will see a title:2547

if I hover over it, the title shows up there; and that is an accessibility thing.2553

And it is sort of like, instead of example text in here, a title is sometimes2558

the more semantic way to go about indicating a little note that you want to put for that input.2562

Let's go back to selects; I showed you, at the beginning, a select for choosing, say, your favorite piece.2573

And up here at the beginning, it is just chess pieces, so you select your favorite one here.2586

But say you want to have more than just chess pieces; you also want to have checkers or assorted, various types of chess pieces--2594

not just chess--and you can pick whichever one of these you want.2604

This is what you would use an optgroup for.2609

And you put it inside the select, and it gives a little label, and then it groups everything underneath it.2613

I am not indenting these all, even though the next optgroup starts here, because the optgroup doesn't have a stop tag.2621

It is not the content; the optgroup is just right here.2630

But all of these are underneath it; and then, the next optgroup--you give it a label,2634

and then all the ones that follow are underneath that, until the next one.2639

I'll put a little line break there.2645

And it shows up like this--very cool.2648

And again, this is a newer thing, so I think Firefox probably will support it, but it may look a little different.2650

See, now you can't select the optgroup title; and in Firefox, it formats it slightly differently.2663

But you have the default there, and it is the semantic way of doing things.2671

OK, so I already talked about max length and read-only.2678

The last new thing that is new in HTML5 for form is the required attribute; it is a boolean.2682

Let's go up to the top here, with just these basic ones; and say that we want name to be required.2688

In the input, you can give the boolean attribute required.2696

And this is very cool, because now, where in the old days you had to put a little asterisk here and say 'required,'2701

and then use some JavaScript to check every single form to make sure that the required forms were all filled out,2710

now we will automatically know that this is required.2715

And ideally, if I fill it out and hit Submit, it is going to submit perfectly.2720

But say I fill these out, but I forget to fill out the required one (the name) and I hit Submit.2726

Yes, this isn't supporting it yet; but some browsers...it won't submit (like I just did) and take you to the destination.2733

It will highlight this form that is required, that you didn't fill in.2745

I think Safari may actually support it; let's test it in Safari; there.2748

So, I didn't fill out the required field; and when I hit Send (I'll put some text in here and hit Send),2756

instead of submitting it, it just pops the focus up to the name element and indicates, "You need to fill this in before you can submit it."2765

Now, if I fill it in and submit it again, it will take me to...the page that doesn't exist; so you are getting this funny little error message.2775

And that is forms, pretty much--a good introduction.2784

There is a lot more that you can do with forms, but for now, until you get into more advanced things,2790

and until there is a lot more browser support for some of the fancier things going on, that is going to be a good introduction.2797

And keep looking at...this video, obviously, is going to get out of date pretty quickly as the browsers are updating their functionality.2805

So, you have the Opera way to use these date fields with this little...I think it is called an ugly-stick.2815

But that is just the way that Opera has decided to do it.2824

It is not in the specification how exactly to set this up.2825

So, Opera may change this; and the other browsers may come up with their own implementations.2828

Probably the best way to look at it is: just keep testing in newer versions of browsers, and see what they are implementing and how they are doing it.2833

But even if you don't have a lot of users using Opera, for example (it doesn't have a lot of the market share),2843

you still should use these elements, because they are backwards compatible, and it can be very helpful,2852

on the server side, to have your data set up in a way that it knows to be expecting it in a month/year format, etc.2858

And that is it for forms.2867

Thank you for watching Educator.com.2870