Are
you confused about web page design and don't
know where to start? Feel free to learn HTML
and how to design your very own web site by
using our FREE Online HTML Tutorial.
HTML Tutorial Part 13:
Web Page 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 The Next Page
|