Forms aren't utterly important to know about unless you're going to have some form of data entry into your web site, so feel free to skip this until you actually have a need for it.
The tag for a form is <form>. It has a number of relavent modifiers. The first of which is action. This modifier accepts a url that points to a CGI script, which will in turn handle the information entered into the form. The next one is method. It takes the values get and post, but that isn't of concern until you learn CGI scripts. So the next modifier is name. This is familiar from the links lesson, but it has very different uses. It is used by JavaScript, which I'll cover later. Now for some form elements...
Most form elements are created with the tag <input type="input_type">. All forms of input accept the align modifier. The first input_type is text. It makes a simple one line text field. You can modify the value in the field with the value modifier. The size modifier defines the visible size of the field. And the maxlength modifier puts a cap on how much people can type into the box.
<input type="text" name="textbox" size="20" maxlength="20" value="Text Box">
Produces this:
Other types of input are checkboxes and radio buttons. First we look at checkboxes. They accept the name and value modifiers. The following code produces the checkboxes:
<input type="Checkbox" name="checkbox1" value="value1" checked> Do you like cake?
<input type="Checkbox" name="checkbox2" value="value2"> Are you a student?
Do you like cake?
Are you a student?
Checkboxes act independently of one another - they're best used for yes/no decisions, such as those above. What the name and values do isn't important for HTML, so I'll discuss it when they become important in future tutorials!
Next are radio buttons. They are grouped together via the name modifier, and only one per group can be checked at a time. Example time!
<input type="radio" name="radio1" value="value1" checked> Are you a full time student? <input type="radio" name="radio1" value="value2"> Are you a full time worker? <input type="radio" name="radio1" value="value3"> Are you unemployed?
Are you a full time student?
Are you a full time worker?
Are you unemployed?
Radio buttons are good for multiple choice decisions that don't have much more than 2 choices. Oh, and notice that the checked modifier defaults the checkbox and radio button to "yes". So what do we use if we have a choice that has too many answers to display with radio buttons? Drop down menus!
Pulldown menus are surrounded with select tags, with the modifiers name, size, and multiple usable. Size says how many choices are visible at once, and multiple says whether multiple items are selectable (ctrl + mouse click allows multiple items to be selected). Inside of the select tags go option tags, which have the value modifier. The following code produces the drop down menu:
<select name="menu"> <option value="1">menu item 1</option> <option value="2">menu item 2</option> <option value="3">menu item 3</option> <option value="4">menu item 4</option> </select> |
<select name="menu" size=3 multiple> <option value="1">menu item 1</option> <option value="2">menu item 2</option> <option value="3">menu item 3</option> <option value="4">menu item 4</option> </select> |
The code above produces the table below it. Isn't that cool? There's just one thing missing...you guessed it! Buttons!
There are two buttons. Submit and Reset. They both use the input type tag. It's just easier to show yah:
<input type="submit" value="Submit Form"> |
<input type="reset" value"Reset Form"> |
<input type="image" src="http://reaperx90.com/background.jpg" alt="Submit!"> |
Again, the code above represents the button below it. The first two are as expected, but the third one is different. It uses an image as the submit button. Ain't that cool?
I do believe that's it for this lesson! Just remember to enclose all of this stuff inside the form tags. There can be multiple forms on the same page, but just be sure that all of your form elements are enclosed in a pair of form tags, or else the form element won't do anything.