Chapter 13:
Forms
Forms...
Forms allow you to add interactivity to your web documents
by way of the <FORM> tag. With the form
tag you can add to your web pages a guestbook, order forms,
surveys, get feedback or whatever.
The basic construction of a html form is this...
<FORM>
begin a form
<INPUT>
ask for information in one of several different ways...
<INPUT>
...there can be as many input areas as you wish
</FORM>
end a form
The <INPUT> tag provides the user with various ways
of inputting information. There are several different
<INPUT> tags.
Form Input...
Text
The most common TYPE of form
<INPUT> is TEXT.
<INPUT
TYPE=TEXT>
Every input needs a NAME.
<INPUT TYPE=TEXT NAME="ADDRESS">
When the user types in his address (for example 1313
Mockingbird Lane), it will become the input's
value and be paired with ADDRESS so the
end result after running it through Mailto Formatter will
be ADDRESS=1313 Mockingbird Lane.
We can if we want, type in a VALUE.
<INPUT TYPE=TEXT NAME="ADDRESS"
VALUE="44 Cherry
St">
This will automatically pair the value 44 Cherry
St with the name ADDRESS, unless
the user changes it. Note- be sure to use quotes where I've
specified.
We can specify the size of the text input box.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry
St" SIZE=10>
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry
St" SIZE=20>
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry
St" SIZE=30>
The default value is 20.
If we want, we can specify how many characters a user
can input.
Go ahead and try to input more than 10 characters in the
text box below:
<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30
MAXLENGTH=10>
Very similar to the TYPE=TEXT is the
TYPE=PASSWORD. It is exactly the same, except it
dispays *** instead of the actual input. The browser will
send you the input, it just won't display
it.
<INPUT
TYPE=PASSWORD>
Remember that each <INPUT> must have a
NAME.
<INPUT TYPE=PASSWORD NAME="USER PASSWORD">
SIZE, VALUE, and
MAXLENGTH modifiers/attributes work here also.
By the way, a <TAG> tells the browser to
do something.
Radio Buttons and Check
Boxes
Radio buttons allow the user to choose one of several
options. Check Boxes allow the user to choose one or more
or all of the options.
First let's build some Radio Buttons.
<INPUT TYPE=RADIO
NAME="POSITION">
Now add 2 more.
<INPUT TYPE=RADIO NAME="POSITION">
<INPUT TYPE=RADIO
NAME="POSITION">
<INPUT TYPE=RADIO
NAME="POSITION">
Hmmm... I suppose we should put a line break after each
one.
<INPUT TYPE=RADIO
NAME="POSITION"><BR>
<INPUT TYPE=RADIO NAME="POSITION"><BR>
<INPUT TYPE=RADIO NAME="POSITION"><P>
Note that each input has the same name. The reason will
become apparent very shortly.
Each of the Radio Buttons must be assigned a
VALUE.
<INPUT TYPE=RADIO NAME="POSITION"
VALUE="PB"><BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA"><BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"><P>
Now label each button.
<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB">
Powerbuilder
Developer<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA">
Database
Administrator<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA">
None of the
above<P>
You can also modify these labels with other html tags if
you wish.
Essentially your Radio Buttons are done. You can tidy
things up by adding a statement above the buttons, and if
you want, choose a default selection (optional).
What is your position within
the company?<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB"
CHECKED> Powerbuilder
Developer<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA">
Database Administrator<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"> None
of the above<P>
The user of course can only choose 1 option. Their
choice will be returned to you as the name/value pair
POSITION=PB (or whichever they pick).
Building Check Boxes is pretty much
the same thing. Start with this.
<INPUT TYPE=CHECKBOX
NAME="PB">
Add 3 more, but this time give each one a different
NAME. (Also add in line breaks if you want)
<INPUT TYPE=CHECKBOX
NAME="PB"><BR>
<INPUT TYPE=CHECKBOX
NAME="DBA"><BR>
<INPUT TYPE=CHECKBOX
NAME="NOTA"><BR>
Each Check Box gets the same VALUE.
<INPUT TYPE=CHECKBOX NAME="PB"
VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="DBA" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="NOTA" VALUE="YES"><BR>
Note- For Check Boxes the NAME changes
and the VALUE stays the same and with Radio
Buttons, the VALUE changes but the
NAME stays the same. Don't feel bad, my simple
mind still gets confused.
OK, let's label each box.
<INPUT TYPE=CHECKBOX NAME="PB" VALUE="YES">
Powerbuilder
Developer<BR>
<INPUT TYPE=CHECKBOX NAME="DBA" VALUE="YES">
Database
Administrator<BR>
<INPUT TYPE=CHECKBOX NAME="NOTA" VALUE="YES">
None of the
above<BR>
And lastly, you may want to add a little something above
your check boxes and maybe pick a couple defaults.
What positions do you occupy
within the company?<BR>
<INPUT TYPE=CHECKBOX NAME="PB" VALUE="YES"
CHECKED> Powerbuilder
Developer<BR>
<INPUT TYPE=CHECKBOX NAME="DBA" VALUE="YES"
CHECKED> Database
Administrator<BR>
<INPUT TYPE=CHECKBOX NAME="NOTA" VALUE="YES"> None of
the above<BR>
The user can choose 1, 2, none or all of the
options. Their choices will be returned to you as the
name/value pairs...
PB=YES
DBA=YES
(or what ever they choose... if they choose nothing,
nothing will be returned to you)
Your own HTML
page...
We will now construct the feedback page we created in
Chapter 11. Open the blank page "feedback.htm" in Notepad,
and add the following (the blue text is what to add).
<html>
<body background="bgnd.gif" bgcolor=#FFFFFF>
<center><h1>Feedback
Form</h1></center>
<br>
<form>
<b>My name is: </b><input type=text
name="name">
<p>
<b>I work as a:</b><br>
<input type=radio name="position" value="Developer"
checked>Developer<br>
<input type=radio name="position"
value="ProjMan">Project Manager<br>
<input type=radio name="position"
value="TechMan">Technical Manager<br>
<input type=radio name="position" value="NOTA">None
of the above
</p>
<p>
<b>When it comes to web
browsers:</b><br>
<input type=checkbox name="Netscape" checked>I use
Netscape Navigator<br>
<input type=radio name="NetscapeVer"
value="2.0">version 2.0<br>
<input type=radio name="NetscapeVer"
value="3.0" checked>version 3.0<br>
<input type=checkbox name="IExplorer">I use Microsoft
Internet Explorer<br>
<input type=radio name="IEVer"
value="2.0">version 2.0<br>
<input type=radio name="IEVer"
value="3.0">version 3.0<br>
</p>
</body>
</html>
Save the file.
Go To Chapter 14
Return to index
