CGS 3063 HTML tutorial QuickRead 17

QuickRead 17: Forms

What is a Form?

Forms are a way of getting information from the person viewing your web page. A user (for this QuickRead by user we mean someone viewing your webpage, not you as the person creating the webpage) inputs things into the form and it is sent to the web server. There are two parts to any form. First there is the html part that involves making the input boxes and buttons for the user. The second part is the script, or program, which is on the server. The script is a program that runs on the server and processes the information from the user. Web based scripts are commonly written in Java, Javascript, Perl, or C. We will not be teaching you how to write scripts, only how to write the form code for other scripts to use. If you are interested in learning scripting we suggest you look into a programming course for Java, Perl, or C++ or search the Internet for free tutorials (there are a lot out there).

We use several forms in this class to get information from you. The box at the bottom of these tutorials (get behind the wheel) that allows you to enter in code is an example of a form. Other forms you have seen for this class include: Addme, parts of MAX, and Webgrades. Outside of this class, you have seen them on search engines and they are used in E-commerce (Internet sales) in large amounts.

The <form> Tag

The <form> tag is very similar to the other tags you have learned. An HTML form begins with a <form> tag and ends with a </form>. You can have more than 1 form on a page, but that means you may need more than 1 scripts and you need multiple "submit" buttons (more on that later) and it is generally not a good idea. Between the form and /form tags you can put most any normal html code (to change fonts, bold, <br>, etc), usually used to format the input boxes and buttons in an organized fashion. A form can be placed anywhere between the <body> and </body> tags (it doesn't go in the head section at the top like Javascript). There are two attributes for the <form> tag: action and method. The method attribute has a value of either "post" or "get", and determines how the form and the script will communicate. The method attribute doesn't affect how the form looks on the web, it only affects the interface and protocol between the form and the script.

The "action" attribute on the <form> tag is very important. Its value is a URL that tells the webpage where the script to run for this form is located (like action="http://some_website.com/somescript"). Don't worry about the script writing now--just know that the "action" attribute allows a form to designate which script to run for the form. The script isn't executed (meaning the program isn't run) until the user presses the "submit" button (but we'll get to that in a bit). For example:

<form action="http://grove.ufl.edu/tutorial/mc17.cgi" method=post>.
This tells the browser that the script to run is "mc17.cgi" located in the "tutorial" directory. The guts of the form are in the tags that occur inbetween the <form ..> tag and </form> tag.

The cgi extention (on mc17.cgi) signifies that this is a "Common Gateway Interface" file (similar to how .html in index.html signifies that it is a webpage file). Don't worry too much about the details--just know that "cgi" tells the server that this file is a script (or program), and that it will be executed from the web. CGI is the interface between web pages and scripts and is how the information gets from the webpage form elements into the script to be processed. A form allows people to transfer information to the script through CGI. The URL to a script for a form will often contain directories with names like "cgiwrap" or "cgi-bin". This is just a fairly common practice that helps organize files.

The Guts--Input tag

First we'll deal with the <input> tag, as it is the most commonly used tag and can do alot for us. It defines a place for the user to to input some type of information. It has an attribute called type that defines which kind of input the user can provide. The valid values for the type attribute are:

(This form doesn't actually do anything because there is no script at the other end. We are just showing you the type s of inputs.)
text--Just a normal one line text field like this (called a "textbox"):
checkbox--A checkbox that can be clicked on or "checked". Example of a checked box:, or unchecked:
radio--A radio button that allows the user to pick exactly one choice out of several, ie a multiple choice question. 1 2 3
submit--The button that sends the info to the script

Each of the input tags (with the exception of type radio, more on that later) also needs a name attribute with a unique value for its name, ie don't use a particular name more than once in a form. In fact, don't use a name more than once in an entire HTML page (names for pictures, form parts, frames, etc can be confused if you use one name for more than one thing). So if you name a checkbox "mycheck" as in
<input type=checkbox name="mycheck">
then you can't name anything else "mycheck" or the script won't know which is which. The name tells the script which input it is dealing with.

For type=radio, the situation is a little different. Here, several radio buttons are given the SAME name. This sounds weird, but there is a reason. A group of radio buttons which have the same name function like a multiple choice question in that you may only select ONE button of a single radio group. Try it with the group above. Click on the first button and a dot appears showing that you selected that radio button. Now click on one of the other buttons. It now has a dot in it and the first dot goes >poof<. Why? because you may only select ONE button in that group (Checkboxes don't work this way as they allow you to select several boxes which means that they each need their own unique name.)

Inputs of type radio or checkbox also have two other optional attributes: value and checked. Value lets you assign a value for that box/radio button that will be sent to the script if it is selected by the user. Value could be a number, a word or a whole sentence (in quotation marks).
Checked allows you to preselect one of the radio buttons (or the checkbox) automatically for the user. This is called a default choice because if the user does nothing, this is the choice that will be sent to the script.

Here's an example of some checkboxes.:
Tick the magazines you'd like to subscribe to:
Time Vanity Fair Biker's guide
Tick the magazines you'd like to subscribe to:
<input type = checkbox name=checking1>Time
<input type = checkbox name=checking2>Vanity Fair
<input type = checkbox name=checking3 checked>Biker's guide
Notice that Biker's guide is pre-checked for you.

Now for radio group examples: 1 2 3
See how the first one is already selected (unlike the earlier example)? Here is what that code looked like do that:
<input type=radio name=r2 value=first checked>1
<input type=radio name=r2 value=2>2
<input type=radio name=r2 value="I am the third value">3
We have three buttons in this group, and the group is named "r2". If the user selects the second button, a value of 2 is sent to the script. If the user selects the third button then a value of "I am the third value" is sent to the script. Otherwise, a value of "first" is sent to the script for the name "r2". A radio group can have however many buttons it wants. Notice that the value of button doesn't have to be the same as the text outside the button. The third choice is labeled "3" (you see a 3 beside the button which a user sees as a kind of label for that button), but the value sent for that button is "I am the third value". Weird, but it has its uses for people writing scripts.

Inputs with type=text have an attribute size that determines how wide the text box will be. It does not affect how much the user can type in (it will scroll if needed). For example:
<input type=text name=text1 size=10>
<input type=text name=text1 size=20>
You just have to play with the number to get the size you want. Usually you want to make it about the size of the input you expect the user to type in. For example, if you ask for a local phone number, make the size equal to 7. This can make it more clear to the user that you wanted 3926857 instead of 392-6857 (which would cause the box to scroll). There is also an attribute called maxlength which will limit how much the user can type in. For example:
<input type=text name=text1 size=20 maxlength=20>
This won't let the user type in more than 20 characters (different font sizes can make this look funny).

Finally you need a submit button. This is an important button. When the user clicks the submit button the information is actually sent to the script from the form. If you don't have a submit button, the form can't do anything because the user's input will never be sent to the script. Use the input tag with the type attribute set to submit:
<input type=submit>
If you want you can change the text the button has on it with the value attribute. So <input type=submit value="GO!">
The input tag for a submit button doesn't usually have a name. This is because the information isn't sent to the script until the user hits this button, so the script already knows that the user must have clicked it. All of the input elements and the submit button need to occur between the <form ..> and </form> tags, otherwise they may not work correctly as the web browser will think they are part of different forms.

Other types of inputs

Though input tags are the most common, there are some other types that can be used in forms.

<textarea> is a tag that allows a big block of space for the user to type in instead of the one line the textboxes use. For example:

It has a name attribute just like the other input tags, which must be unique, as well as rows and cols attributes that determine how big the box will be shown as. Also, note that you MUST have a </textarea>tag because by default whatever follows the <textarea> tag will be put in the box to start with.
<textarea name="bigtext" rows=4 cols=30></textarea> will display

<textarea name="stuff" rows=4 cols=30>This is in the box </textarea> will display

See how the words "This is in the box" started out in the box? If you see your box with a bunch of stuff in it, you probably forgot the </textarea> tag.

To create a drop down list (a standard looking Windows drop down list where you click a little down arrow and a list shows up to choose from), we use the select and option tags.
This was done with:

<select name="mylist">
 <option value=hello>First choice
 <option value="another choice">Second thing in the list
 <option value=3>Last thing </select>

This is some what like a radio group, only instead of selecting a button, we select a line from the list. Each optiontag defines a choice. The text outside of the tag ("First Choice" and so on) is what will be displayed on the web page. The value attribute determines what will be sent to the script if the user selects this choice ("hello" and so on). The select tag may also have an attribute size with a numerical value that is the number of choices to be shown (it is one if you don't give it a value), so if you changed the select tag in the same code above (and added a few more options) to
<select name="mylist" size=3>
You would get:
This makes the list into a scrollable window, as opposed to a drop down list.

A Note about Style

The parts of a form (textboxes, check boxes, radio buttons, submit buttons) are kinda like pictures. You don't want to put them jumbled up all in a row. Arrange them in some manner that is pleasing to the eye as well as understandable to the user. You can center the buttons, put text around them (to tell the user what they are entering or ask questions). You can also put pictures among the form elements. They can be in a table etc. The basic idea here is that form elements are just another part of your web page to arrange how you see fit.

Get behind the wheel!

<html><body>

<form action ="testform.cgi">
A check box: <input type=checkbox name=c>

<br> A textbox: <input type=text name=t>

<p> Submit it now<input type=submit>

</form> </body> </html>

Index