A great way to add interaction to your web page is with
a form. Forms can be used to create guest books, surveys, order forms, etc.
To actually run a form requires a programming language other than HTML such as
JavaScript, which we will begin discussing next. In the meantime, you need to
know how to design a form in HTML before you learn how to use it.
HTML (FORM) TAGS
|
|
TAG/ATTRIBUTE
|
DESCRIPTION
|
|
FIELDSET
|
For grouping form elements together into a set
|
|
FORM
|
For creating a form
|
|
ACTION
|
For specifying the URL or location of the forms script
|
|
METHOD
|
For determining how the form should be processed
|
|
INPUT
|
For creating form elements
|
|
CHECKED
|
For marking a radio button or check box by default
|
|
EVENT
|
For starting a script
|
|
MAXLENGTH
|
For specifying the maximum amount of characters that can be entered in a
text box
|
|
NAME
|
For identfying the data collected from the form element
|
|
SIZE
|
For specifying the width of a text or password box
|
|
SRC
|
For specifying the URL of an active image
|
|
TYPE
|
For determining the type of form element
|
|
VALUE
|
For specifying default value of a form element
|
|
LABEL
|
For labeling a form element
|
|
FOR
|
For specifying which form element the label goes with
|
|
SELECT
|
For creating a menu with a form
|
|
NAME
|
For identfying the data collected from the menu
|
|
SIZE
|
For specifying the height of the menu
|
|
TEXTAREA
|
For creating text block entries in a form
|
|
NAME
|
For identfying the data collected from the text block
|
Element Types
There are five main types of elements in forms that can be used in any
combination to create many different features. These parts are classified as
radio buttons, checkboxes, text
boxes, buttons, and images.
Radio Buttons
Radio buttons got their name from their simularity to old-fashioned car
radios, where each button was a different radio station and you could not
select more than one at a time. Radio buttons in HTML can allow the user to
select any of the options you give them, but only one at a time. These are
great when only one choice can be made. For example, if you were going to buy a
pizza, it cannot be small, medium and large; it can only be one size. Checkboxes
Checkboxes, like radio buttons, display several options, but unlike radio
boxes more than one option can be selected at a time. So referring again to
the pizza example, you can get pepperoni, meatballs and onions, or sausage and
peppers, or any combination of toppings you offer on your pizza. Text Boxes
Text boxes can allow as much or as little text as you want them to; the catch
is they only display on one line. This inhibiter keeps them usually limited to
things suchs as addresses, names, etc. If you want a larger text area use the
TEXTAREA tag.
Password Boxes
There is a preset text box called password, which is a text box
that displays what is typed in it as bullets or asterisks.
Buttons
Buttons are used to start an action. If you want to display the total cost
for the pizza, you could create a button to trigger a script that will total
and calculate all the information entered such as size and toppings. Submit Buttons
Submit buttons send the data selected in the form to where
you specify. If you want to gather data from your form you must use either a
submit button or a scripted equivalent.
Reset Buttons
Reset buttons return the form to its initial status. Images
Images can be used as a submit button or to collect data. If used for
collecting data, a click on the image will record x and y
cordinates. So if you would like to display what pizza resturaunts are in
major Virginia cities, the user can click on Richmond off a map of Virginia.
You then know to show them the pizza resturaunts in Richmond.
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1-frameset.dtd">
<html>
<head>
<title>My Sixth Page</title>
</head>
<body bgcolor="#d9d9d9" text="#333333">
<table width="500" align="center" bordercolor="#8f9faf" border="2">
<tr>
<td>
<p align="center">
<font size="4" color="#8f9faf">
<b>Whim's Pizza Palace - On-line Order Form</b>
</font>
</p>
<form method="POST">
<b>Select the size pizza you want:</b><br />
<input type="radio" value="V1" name="R1"> Small
<input type="radio" name="R1" value="V2"> Medium
<input type="radio" name="R1" value="V3"> Large
<br /><br />
<b>Select the toppings:</b><br />
<input type="checkbox" name="C1" value="ON">Pepperoni
<input type="checkbox" name="C2" value="ON">Olives
<input type="checkbox" name="C3" value="ON">Sausage
<input type="checkbox" name="C4" value="ON">Peppers
<input type="checkbox" name="C5" value="ON">Onions</p>
<p>To obtain the price of your order click on the price button below:</p>
<p>
<input type="button" value="Price" name="B3" style="font-weight: bold">
</p>
<p>
<input type="submit" value="Order" name="B1" style="font-weight: bold">
</p>
</form>
</td>
</tr>
</table>
</body>
</html>
|
|
You do not need to know languages other than HTML to build an interactive web
page, but it does help. There are many great free scrpts available online to
download. Try looking for something simple and play with it; try to alter the
appearence of it with your new knowledge of forms.
This concludes our lessons on HTML; next we will take on JavaScript. Now,
there is still more to HTML than we have covered, so look for a few bonus
articles that take some of the subjects we have covered more in depth. As we
move into other languages, try to think of how the different languages can
relate to each other, in particular how you can use other languages with HTML
fluidly.
Responses:
Refresh frame to view latest entries.
Name: Kevin
Comments:
heavens! I really should study these... i might learn something! Good Job Jonelle!
|
