Form Tag

[00:00:00]
>> Jen Kramer: Then we'll be ready to get started here on our form. Because as I said, we have a lot of thing already typed in to the page. We're going to be adding a lot of tags around the code we already have. So what we've got going on here then is this opening paragraph, right, here on line 11.

[00:00:17]
We have our title of the page, kind of the alien abduction auto form. We have some instructions and then we actually start the form. So after the instructions are done. But before the form starts, we're gonna start with a form tag. It looks like this, form. Okay, pretty simple.

[00:00:40]
That tells you where the form is gonna start. There are some additional attributes we need to put in this form in order to make the form actually do anything. We're gonna do that at the very end of this process. But for right now, just go ahead and put in that form tag to start this and guess where the ending tag for form is gonna go.

[00:01:00]
Anyone wanna guess?
>> Jen Kramer: No one has any idea where the ending form tag would go, yes?
>> Speaker 2: Right before the ending of the body.
>> Jen Kramer: Probably, well, it could go all the way down there by the end of the body, but it goes at the end of the form, right?

[00:01:19]
And the end of the forum is actually going to be inside of the section, because we put the form tag inside of the section, didn't we? Here's the section. We have some h1's in a paragraph and we put the form inside of that section. So the closing form tag should also be inside of the section, but it's probably after add me to your email list, right?

[00:01:40]
Yes?
>> Speaker 2: Is it best practice to always have form within a section?
>> Jen Kramer: No, this section has to do with the markup of the web page and what you're trying to communicate. Yeah, so we'll go ahead and say, /form down here just before slash section, okay? So that's how we designate what portion of the web page is actually going to be a form where we'll be collecting information.

[00:02:04]
And then after that, we're ready to go ahead and start putting in our form fields, okay? So scroll back on up the page and we are gonna start here on line 15. We're asking for your name, okay? And so we're gonna go ahead and put in a field to collect your name and the tag for this is called input, okay?

[00:02:26]
So this is an input tag. There are a bunch of different kinds of input tags, but the type that we're going to use here is the type that's called text. Because guess what this does?
>> Speaker 2: It's text.
>> Jen Kramer: You can collect text. That's a good match to a name, okay?

[00:02:48]
So that alone will go ahead and make a little box on your web page, but we're gonna need some additional pieces of information that are gonna help with the programming for this. And in this particular case, what we're going to need is we're gonna need an ID for name.

[00:03:06]
You remember ID's, we talked about them briefly on at the beginning of our CSS discussion. And we said, IDs are often used more often in JavaScript and in programming than they are in CSS styling. This is the ID, you're gonna see what the purposes in just a moment.

[00:03:24]
So we're gonna put an ID, you can call it anything you want. Generally speaking, they're self documenting. We're collecting names, let's call it name. All right and then sometimes we also have another attribute here called name, as well. The name for this field and the attribute name actually have nothing to do with each other, okay?

[00:03:47]
So we could actually call this name field. We could call it like full name or something that, if you find that confusing. We could actually call the ID for this field, we could call it George, okay? You might not know what George is. So it's probably better to call it something you actually know what it means, right?

[00:04:06]
Okay, so these IDs can be anything. I just happened to call my name. For the name portion of this form field, this is gonna be important for the script that will actually process our form. All right and we're also gonna call that name. We got a lot of names going on, right, and then go ahead and close that.

[00:04:29]
Now if you go ahead and save that and take a quick peek at that in your web browser, there's a box there that you can type in.
>> Jen Kramer: Did it work? Pretty cool.