Think about the forms you've filled in. Chances are, the most common kinds involved entering some text, maybe a username and password and then submitting it. So, how do you make a form like this yourself? The form element has quite a few different elements, unique to it. We'll go into these in some detail later. But, for this form, we'll need to use one in particular, which is actually one of the most commonly used tags.

The input tag. The input tag has a few attributes and you'll need to use different ones for different inputs, in the form. These include type, size, name, and value attributes. OK, that's enough theory for now. Let's jump straight into an example. First up, I need to open up a form. Next, I want to add in a username field. I'll start with some standard text that I want to display to the user, something like, "Please enter your username". Text like this is usually put into a label tag, with a form attribute that is usually set to the same as name and I'll give my input.

Next, I'll add a line break, because I want the username entry field to display below the text. So, I'll use the line break tag. Now it's time to use the input element I mentioned earlier. So, first I'll open the input tag then add the type. Because this is a username, I want the user to be able to see what they're writing, of course. So, I'll use text type. The last attribute I need here is the name attribute. This one's really important as this is what the data is called when it gets sent to the database.

So, without a name, the request wouldn't know what to call this data and it would be sent as part of a form data instead. I'll set the name as username for now, and then close the input tag. Next, I'll insert a line break and add a similar label tag, but now for a password. Something like, "Enter your password". The input tag for this field will look a lot like the last one, but this time my type attribute will be different. If I had it as text, it would be visible to the user, but for security reasons, best practice is to use the password type, which keeps text the user is entering hidden.

So, let's enter all that information quickly, and close the tag. OK, so, we've got all the fields that we need for a login page now. All we need to do is give the user a submit button, which is a kind of push button in HTML. This is similar to our text entry but with a few differences. First, I'll open the input tag then give it a submit type. This type tells the browser that the information that has been entered by a user needs to be set to a form handler which is just a page within the server that deals with this kind of data.

Anyway, let's keep going and we're almost done anyway. Last up, I need to give this button a value, which is just how I will create the text, in the button, that the user can see, which of course will be submit, for this one. And that's the push button done. So, I can close the tag and with all I've done, I can close my form. OK, so I know this video's already been a long one, but I wanted to quickly tell you about multi-line text inputs. Because, it's kind of similar to the standard text entry fields used for the username and password.

You'll be using multi-line text input fields when you want users to have the freedom to type, whatever they want. This is especially useful for feedback, for instance. The main difference with this, is that it has an opening and closing tag and can have default sizes for rows and columns attributes given as numbers. Most browsers these days will allow users to resize these by clicking and dragging the bottom right-hand corner out.

Lectures

• Introduction to Forms
• Checkbox and Radio Buttons
• List Boxes and Drop Down Lists
• Input Types
• Form Validation
• Submitting Forms, Server Scripting Mechanisms, and Security Issues