Making
Forms
The
good thing about forms is that they are very easy to
make.
The
bad thing is that it takes a little bit more techno-knowledge
to actually get them to work.
This
is how forms work:
- You
create the form using HTML tags.
- The
user views the page with the form, fills out the
form and then hits the "submit" button.
- The
information in the form is sent to the server.
- The
server processes the information, per your instructions.
- The
data is usually sent to a database, or, in our case,
will be emailed back to us.
Let's
make a form first.
Forms
begin, logically enough, with the <Form>
tag.
<form
method="post" action="">
<input
type="text" name="name" size="x"
length="x">
<input type="radio" name="name"
value="text" checked >
<input type="radio" name="name"
value="text">
<input
type="checkbox" name="name" value="text"
checked>
<input type="checkbox" name="name"
value="text">
<input
type="submit" name="name" value="Send
the Form">
<input
type="reset" value="Clear the form and
start over">
<textarea
name="name" cols="x" rows="x"
wrap="physical"></textarea>
<select
name="sport">
<option value="name" selected>Name</option>
<option value="name">Name</option>
<option value="name">Name</option>
<option value="name" selected>Name</option>
</select>
</form>
<Input
type="text">
This
is to enter single lines of data.
- Give
the area a unique name.
- Decide
how many characters long you would like to have
visible (size).
- Decide
the maximum number of characters that can be entered,
but not seen at the same time (length).
<Input
type="radio">
These
are to enable the viewer to select one option and only
one option.
- Give
the area a unique name.
- All
radio buttons should have the same name.
- All
the radio buttons should have separate values. The
value is the information that will be sent back
to the server.
<Input
type="checkbox">
Check
boxes allow the viewer to select more than one option
at a time.
- Give
the area a unique name.
- All
checkboxes should have the same name.
- All
the checkboxes should have separate values. The
value is the information that will be sent back
to the server.
<Input
type="reset">
This
allows the user to clear the form and start over.
- All
values in all form fields are set to their original.
- The
"value" for the reset button will appear
on the button as text.
<Input
type="submit">
Pressing
this button sends the data to the server (to the specified
URL).
- You
can name the submit button, but it isn't necessary.
- Like
the "reset" button, the value appears
as a label on the actual button itself.
<Textarea></textarea>
This
is to enter multiple lines of data.
- Give
the area a unique name.
- Determine
how many columns across you would like the viewable
area.
- Determine
how many rows down you would like the the viewable
area.
- The
user can input more data that what is seen in the
viewable area. If fact, the amount of data one can
input is theoretically infinite.
- Textarea
text does not wrap by default, only when the person
entering the data hits return.
- Physical
wrap means that returns are inserted so that all
data fits in the window. These returns are transmitted
with the data.
- Virtual
wrap means that returns are inserted so that all
data fits in the window, but these returns are not
transmitted with the data.
- Wrap=off
means that the data entered will continue in one
infinite line (like in Notepad)
- You
need to close the textarea tag.
<Select></select>
This
is used to create lists in which the viewer can choose
one or more items in the list.
<Option>text</option>
This
is used to list the items which will appear in the menu.
- You
may use a value="name" for the option,
but if you do not, the text that you enter for the
option will be used as the value.
- You
may also choose one to be selected.
- It
is not necessary to close option, but you may.
Let's
look at how some of these form fields appear: