Forms
A form allows customized feedback from a webviewer to the webmaster or web
designer. For example, you may ask for the viewer's name, address, and
phone number and have it all sent to your email address, with out the user
having to type an long email to you. Forms are to be used as a
user-friendly way to contact you, spicing up the boring '<a
href="mailto:>'
tag.
Many websites become boring due to the lack of interactivity. Also, email
becomes a redundant chore to offer feedback to the web designer. Forms
offer you the flexibility and interactivity one needs to keep up with the
fast paced mainstream of web design. In order to set up a form, you need
to set up a cgi (common gateway interface) script, which is usually
accessable from many internet service providers.
If you find yourself groaning when a web designer asks for feedback, but
you don't know what to say...then most likey, people do that to yours to.
If you are taking a survey or poll, a form is a simple way to ask for
imformation you want, and getting it quickly.
Usually, one puts a form on it's own page. After the viewer is done and
sends the form to your email address, the form will automatically send
your viewer another page...most likely a 'Thank You For Filling out my
very long and crazy form' page.
A form exists between the <form> and </form> tag. The <form> tag
has this syntax:
<form method="get|post" action="scriptURL">
If method is not specfied, it is set to the default, get. Data
sent using get is appended to the script URL. When it arrives to
the server, there are two variables, the script URL, and the data from the
form. Using the post method, data is sent as a separate stream of
information to the script. Allowing the script to directly receive
information without passing through a decoding process in the server.
Confused? Here's a little rule-of-thumb: use get if the data is
small. Alright, you've set up the <form> tag, now what? Well you have
to set up the things that will promt the user for input, which is the
<input> tag. Syntax for the input tag is:
<input type="inputType" name="inputName">
Where inputType is graphical interface you want the user to use,
and inputName is the name the Web author (you) give it, just to
keep things organized. Remember, the <input> tags that appear between
any given set of <form></form>tags are assigned to that particular
form. If a <input> is not within <form> and </form> it won't be
sent to the server. Here are examples of the input types:
There's one input type I did not show you, because it cannot be shown. It
is the hidden type, used to pass information to the CGI script. Each of
these input types have their own additional attributes. Here's the syntax
for each:
Now what does each do? Alright, the text box is where you have the user
send you information in characters. Easy enough. The maxlength attribute
sets the maximum number of characters allowed (by you). The size attribute
sets the size of the text box. The value attribute sets what appears in
the text box. The password input type has the same attributes as the text
box. The hidden input has one extra attribute, value. The value
attribute, in the hidden input, is the information passed to the CGI
script. The checkbox type has two extra attributes, value and checked,
value is what is sent to the script if the box is checked and checked is a
toggle that determines if the box is checked when the user loads the page.
Radio buttons have 1 attribute of their own, value. The value attribute
is what is sent to the script if that particular button is selected. The
submit and reset buttons both have 1 attribute of their own, the value
attribute. The value attribute (for submit and reset) is what appears on
the button itself. The image input has one attribute, src. Src is the
location and name of the image file.
Notice how all of the input forms have a name attribute? Well they do.
The name attribute is the "variable" that is assigned to that input. That
way the script knows what to process the information as. If you swap the
name values for the text box and the password box (and text was the
username and password was the user password), then the script would
interpret the username as the password and the user password as the name.
So the names of the input boxes do matter. They will determine what the
script does with the information. Of course, it also depends on what the
script is told to do with what information.
There are two other input types, each with its own tag. <textarea> and
<select> Syntax for each:
<textarea name="bigtext" rows="50" cols="50">Type in here
<select name="pizzaType" size="1">
<option selected>Normal
<option> Thin and Crispy and Burnt
<option> Thick and Gooey and Undercooked
<option> Old, Moldy, Rotten, Spoiled, Stale and Worm-ridden
</select>
<select name="toppings" size="7" multiple>
<option selected>Cheese
<option selected>Pepperoni
<option>Pineapple
<option>Rat hair
<option>Mold
<option>Flesh eating bacteria
<option selected>Escargo
</select>
Shown here:
Alright, <textarea> is simple enough, a big text box, just you can't
set value within the tag, you do it between <textarea> and
</textarea>. <select> is pretty easy. The size attribute
determines how many selections the user can see at one time. The multiple
toggle determines if the user can choose more than one thing or just one.
Don't forget the ending tag: </select>
Next lecture