HTML Forms

Quick reference

• 00:05 In this video I wanna talk about HTML forms.
• 00:08 Anytime you've been to a webpage and
• 00:10 filled out some sort of form like a contact form or whatever, those are forms.
• 00:15 So, I've come to our second page, page two and I've pasted in this form.
• 00:19 And this is what I mean by form, you have First name, Last name,
• 00:23 area that you can type in, maybe a drop down box that you can select and
• 00:28 then a button that let you click it.
• 00:31 So this is the form, so how do we build this?
• 00:33 Let's open our page two and here is my form.
• 00:36 So all forms start with the form tag and
• 00:39 it opens with just form and closes like any other tag.
• 00:44 And then, there's a couple of different parts that go into the form tag.
• 00:47 The first thing is action.
• 00:48 And forms, well, we create them with HTML but in order for
• 00:52 them to actually do something, you need some sort of computer program behind them.
• 00:57 You need a script that you've written and often, you'll used PHP or Ruby or Python,
• 01:02 whatever programming language you're using on your server, that's what you'll use.
• 01:06 So that's beyond the scope of this course, we're not gonna get into PHP at all.
• 01:09 In this course, but this is where that goes.
• 01:11 It needs the point to the script that will run your form.
• 01:15 So that goes an action field.
• 01:17 And in the method, this also deals with this script too.
• 01:20 There's two types of methods you can get and you can post,
• 01:24 and you don't need to know what either of them are, this is something your back end
• 01:27 developer will deal with, but that's where it goes in this form field.
• 01:31 So, let's see, let's give this ops, I left out some trailing tags here.
• 01:38 So, let's give this another one here.
• 01:41 So next we have to create all of these fields,
• 01:44 we have these input tags because this is an input, you're inputting stuff, right.
• 01:50 So we use input tags, and so it's input type="text", and
• 01:54 this can change, there's different types here, we have text,
• 01:59 we can also have email, if it's asking for an email address,
• 02:03 the type would be email, if it's password, you can change that.
• 02:07 Now if we hit reload, now if I start typing stuff in,
• 02:10 you see these little dots appear, because we know, the form knows it's a password,
• 02:14 and so it automatically does that.
• 02:16 But for the most part you're going to use text, and
• 02:19 then it's important to name each input.
• 02:21 And you sort of just wanna name it what it is.
• 02:23 This is asking for a first name, so we'll name it first name.
• 02:26 You can name it anything you want, you could name it first if you want,
• 02:29 it doesn't really matter, just sort of logically try and match it up.
• 02:32 And finally, the value is empty, but I could put a value in here,
• 02:38 and it pre-prints it whenever the form loads.
• 02:41 Sometimes you want that, most times you don't.
• 02:44 So each name should be unique.
• 02:46 This one has first, this has one last name, this one has message.
• 02:50 No two of these can have the same name, cuz that's gonna screw things up.
• 02:53 Next we have this text area, it the same, it's given a name, and
• 02:56 then it's given a rows and a columns.
• 02:58 So, we can say 300 columns, and if we hit reload, boom, it becomes very,
• 03:03 very big, all right?
• 03:04 So that's how you can, that's an easy way that you can sort of size these things.
• 03:11 And it also has this little drag down things so
• 03:14 people can resize it themselves but that doesn't have anything to do with
• 03:17 these rows and columns thing, that's just a web browser thing.
• 03:21 So the text area tag open and closes.
• 03:24 If you type stuff, And save it, that stuff will appear inside of there.
• 03:33 Now this is space sensitive, so if we hit reload, boom, it pops it over.
• 03:40 That white space there is sort of like the pre-tag we talked about earlier, okay.
• 03:47 What else do we have?
• 03:47 We have the select drop down, this is the select tag, it opens and closes.
• 03:52 Each item in here, sort of like a list item, is an option and
• 03:55 you give it a value that's the same as name, and then type it out.
• 03:58 So each one of these becomes each one of these drop-down things.
• 04:02 And then finally we have a Submit button, and
• 04:04 it's just an input type submit, it does not have a closing tag.
• 04:08 It's just its own tag.
• 04:10 It's a type of submit, value Submit.
• 04:12 So, if we change this to Send Email, for instance, and save it,
• 04:17 it changes to Send Email.
• 04:20 So, lots of stuff you can do, you can style forms with CSS, obviously,
• 04:24 we're not gonna talk about that in this course, but this is the basic HTML form.
• 04:29 And like I said, you'll connect these to a script on your back end, your back end
• 04:33 developer guy will do that, or if you're using a template of some sort, it'll often
• 04:36 come with its own email script or form handling script, or something like that.
• 04:41 So, forms pretty important.
• 04:44 Every website has a contact form of some sort somewhere.
• 04:47 So, in the next video, we're gonna talk about some advanced features of HTML5,
• 04:50 some different elements and attributes.

Lesson notes are only available for subscribers.