Back to Main Page

E-mail me! Click here!

Fill In The Blank....

Everyone who uses the internet has encountered forms before, wether they are aware of it or not. Forms are a grouping of fields and buttons used to collect information (input from the user) that is applied to a script that in turn spits out a reply based upon what was typed by the user. This script is invisible to the user, but is the most important part; without the CGI (Common Gateway Interface) and SSI (Server Side Interface) scripts, all a form can do is look pretty.

There are five basic types of input devices that can be used in a form, and all have their own unique uses and degrees of usefulness. Each of these is detailed in it's own subsection below.

Basic Forms

The basic principles used in creating forms will always remain the same, no matter how large or small the complete form is. A form will always start with <form> and end with </form>; every form will have a "method" (post or get) that tells the server how to use the information. "Post" sends the information to another source, and no reply is returned. Examples of this in action are submiting your username and password to log into a file manager. "Get" will run the information you input through the script, and then return an answer. The most common example of this sort of form is a Search Engine. Every form also has an "action" this is almost always the location (URL) of the CGI script the form is related to. The basic format for opening and closing a form looks like this:

Just as there are certain attributes that all <form> tags posses, there is an attribute that all fields and buttons must have. This is "name="; without this attribute, the server will have no way of knowing what part of the script the input refers to, and thus no results will be generated. In the case of buttons, check boxes, and the like, there will often be several items with the same name. This is perefctly okay, as it allows the creator of the form to more acurately control the end-user's replies. More about this can be found in the sub-section detailing radio buttons. There is another attribute that can be added to text boxes; this is "value=". Anything entered as a value of this attribute will appear in the input field by default. For example:

One final note: No value of any attribute in a form may contain spaces; unless it is in quotation marks. If you need to use a space, and don't want to place values in quotes, replace it with and underscore.

The first type of field, and the most commonly used, is the text box. This is most frequently used as a place to enter one's username, password, age, or other short answer-type information. The HTML tags to create an input text box are <input> and </input>.

Several attributes can (and should) be applied to this tag. The first of these is "size="; as the name implies, this attribute sets the visible size of the text box. The value for this attribute is a number of characters. The second attribute is "maxlength" and again the name is pretty self explanatory. The user can type as much as they wish, but anything beyond the maximum length for the field will not appear. Let us suppose you are asking for the user's year of birth. For this purpose, you need a relatively short text box,and the maximum number of characters should be four. Thus, the following HTML:

The Text Area Field

This is the only other type of text field availible, and it is most often used when a lengthy respose is required. The most common use of this type of field is entering a descriptive paragraph or other message. The HTML tags are <textarea> and </textarea>. Any text typed between these two tags will show up in the text box by default.

The size of the field is set using two attributes "rows=" sets the height (number of lines of text), and "cols=" sets the width (a number of characters). Based on those two attributes, the following HTML:

Radio Buttons

Radio buttons are most commonly used in places where a simple yes or no answer will suffice, or for other similar occasions when there is a small number of possible answers to the particular question. These buttons also often find use in lists of options. The HTML to make radio buttons is a composite tag. By this I mean that the tag has several (three in this case) attributes that must be included. The complete HTML tag looks like this:

Do you remember the example above that showed you how to make text appear by default inside a textbox? If you recall, you used the value attribute. In the case of a radio button, the value replaces any text that would have been typed into a text box. For all of you visual learners out there, the following HTML snippet:

Play around with the above buttons for a second....notice that you can't select more than one? That's because they all have the same "name=" attribute, and therefore are all connected to one another. This also tells the CGI script that all of the buttons apply to the same section of the script.

The last attribute that can be applied to Radio Buttons is "checked". By adding this to one of the <input> tags, that Radio Button will be selected by default. Repeating the example from above:

Check Boxes

The check box is most often used when there is only a single option related to a section of your form; such as "Check here if you never want to hear from me again". The HTML is basically the same as a Radio Button, save that the value of "type=" should be "checkbox". Therefore, the following HTML:

The "checked" option can also be applied to check boxes:

Drop-Down Menus & Selection Boxes

These little beauties are best placed when you have a finite number of resposes to a question, but to many to use Radio Buttons or Check Boxes. The HTML tags used to generate these menus are <select> and </select>. Two different types of menus can be created in HTML 4.0. One that allows only a single selection, and one that allows multiple choices by holding down control while clicking on various choices in the menu.

Just like any other form item, a menu must have a name= attribute. The value= in this case is replaced by the choices in the menu; which are generated by a separate tag. The tag you need is <option>; the format looks like this:

Now lets review the types of menus one by one. If you add no attributes (other than name=) to the <select> tag, you will get the first type of menu. A drop down list that only allows one choice.

By typing the word multiple inside the <select> tag, you get the second type of menu. A box containing all the options in your list; this list will conform to the size of the list of options. This attribute has no value added to it.

Sometimes you may have a limited amount of space for a long list of options; the answer to this dilema is adding a scrollbar to the menu. This feat is accomplished using the size= attribute. The value attached to this attribute is a number of options that will be visible in the box. Should the number of options exceed the number of rows, a scrollbar will appear on the right side of the menu.

The Submit & Reset Buttons

On almost every form, you will see buttons at the bottom that (typically) offer to sumbit your input or reset the form. The functions of these two should be plainly obvious. How to create them however, may not be. This is yet another use for the ever-popular <input> tag. Depending upon which sort of button you wish to create, set the type= attribute equal to either "submit" or "reset". Following this pattern, the HTML should look like this:

<input type="submit">, which generates this:

If the button you wish to create is not a send or clear button, then make the value of type= "button".
For you visual types: <input type="button">

Don't for get to add the name= attribute, or your buttons will do nothing but take up space. If you want to change the word or words that appear on the face of the button, use the value= attribute. Like any other attribute, as long as the value is in quotes, spaces are okay.

Invisible Values

I can already hear you asking "Invisible values? What's the point of that". Before you discredit me as a crackpot however, I ask you to hear me out.

Now then....let us suppose that you need to track the source information you recieved from a form you created. With invisible values, you can add information that will be sent every time the form is completed. The end-user of the form has absloutely no control over the value associated with this part of the form, so you could enter the URL of the page the form can be found on. That way whenever you recieve input from the form, you will be able to tell which page it came from with no guesswork involved! For any system administrator, that would be great news indeed....

Obviously, I can't show you an example of what an invisible value looks like; you'll just have to trust me.