Beginners Guide to HTML Part 2

Written By: Kevin Jordan

- 30 Mar 2006 -

Description: This tutorial is designed for beginners who are just starting on the path to learning web programming. We'll start by describing the parts that every HTML document has and then move all the way through tables and forms.

Forms

Forms are used anytime you want to retrieve information from your users. As you get further into making web application rather than just web sites, forms will become invaluable.

The user can input data in a number or ways: text fields, password fields, radio buttons, check boxes, dropdown, and text areas. We'll also learn to create submit and clear buttons.

 method="post" action="formcheck.html">

All forms start out with the

tag, like you probably expected. There are two other options that must be set at the same time. The method can be set to get or post. Get is used when you just want to display information with a form, but aren't interested in having your users modify any of it. Post is what you'll typically see, and when the submit button is clicked the form will send the data to whatever action you specified.

The action is either another page that is supposed to handle that data, or can also be in the form of action="mailto:". This will send all the data to an email address.

Text and Password Fields

Text fields are the simplest and most common type of input field. You'll typically see this anytime someone needs a single line of text such as a name or email address.

 type="text" name="name" value="Default Text" size="30" />

When declaring the text field you must set the type="text" and make sure the name of the field is unique to any other fields in that form. Value and size are both optional. Value puts starting text in the field where as size specifies the length of the box, not how much you can type. You can set that by using the maxlength option.

Password fields are almost exactly the same as text fields. Just change the type to “password" and everything typed in that space will show up as stars.

Text Area

Text area is similar to the text field except that you can type more than one line. You call it like this:

 name="textName" rows="6" cols="4">Optional text here

Instead of specifying an input type you have a textarea tag. Rows are how wide the area is while cols sets the number of lines you can type. If you want any text to be in the box you can put it between the two tags, otherwise you can leave this empty.

Radio Button

Radio buttons are those little circles where you can only select one of the options. You'll use these for options where someone can be one thing or another but not typically both, like male or female, dog or cat, income ranges, junk like that.

 type="radio" name="buttonName" value="Option1" />
 type="radio" name="buttonName" value="Option2" />

Notice that the name of the two buttons is the same, but the values are different. If you make the radio name different then you'll be able to select more than one option, and this would really be the job for a checkbox.

Check Boxes

Replace the radio buttons with squares and make it so you can select more than one, and guess what? You've got a check box.

 type="checkbox" name="checkName" value="Option1" />
 type="checkbox" name="checkName" value="Option2" />

You can use checkboxes when more than one answer may be valid, such as: hobbies, pets, or software that you own.

Drop Down Menus

Ever had to select what state or country you live in. You probably did it with a drop down menu. These are used when the user should only select one option, but there are so many options that it just doesn't make since to use radio buttons.

 name="state" size="1">
         selected>Alabama
        Alaska
        Arizona

Start out with the