Slacker's Guide to HTML: Forms in HTML

Forms allow your visitors to communicate with you. While you can analyze traffic patterns and make assumptions about the behaviors of your visitors from checking out your site's statistics, you cannot really get into their heads and know what they do and don't like. You can't always tell exactly how or why they came to your site, or why they left. By putting forms on your site you give the visitor the opportunity to tell you things that you want to know.

Keep in mind that, unless stated otherwise, the forms on this page will not work as they are there only to illustrate the form of a field. When I'm trying to illustrate how a form would function I will use working forms as examples.

The Basics of Forms

Forms consist of a number of different elements placed together in a logical order, inside the form tags. For example you might have a small text input field for the person's name, a drop-down menu for their age, a large text input for their comments, and a send button at the end to transmit the data to you.

<form> <input type="text" name="persons_name" size="30, 1"> Name: <select name="Choose Name"> Choose Age; <option>Choose Age <option>Under 12 </option> <option>12-16 </option> <option>17-21 </option> <option>22-29 </option> <option>30-39 </option> <option>40-59 </option> <option>60-99</option> </select> <br> Comments: <textarea name="comments" rows="4" cols="40"> </textarea> <input type="submit" value="send" action=""> </form>

Name:
Choose Age:
Comments:

Like I said earlier: most of the sample forms wn't work so don't bother hitting the send button on the above form. Just look at the HTML code and look at the form it produces. Notice a few things:

Each form object has a name associated with it
You can use line breaks br between tags to format your form
Each element of the form has different tags and attributes, for example input features both text and submit as available terms.

Starting Your Form

So now we've been over the basic sructure of a form (opening tag, form objects, closing tag) and it's time to delve a little bit deeper into the opening form tag.

The opening form tag has some attributes which go with it. Those attributes are:

action= and it should point to the URL of the query server where the form contents will be submitted. If there is no action= attribute then it will go to the URL of the document which the form is in by default. The action= attribute can have the choice mailto: if you do not want to run your form contents through a form handler. The mailto: option will cause the form's contents to be emailed to you upon submission. (I caution you, though, that the mailto: command doesn't always work and you should opt for one of the form handlers instead)
-Check with your server for a free CGI form-mailer script. There's a very good chance that they have a free CGI form-mailer script for you to use - and specific instructions for you.
method= and it is the method used to submit the form's contents to the server. method=can have two different choices, get or post.

Since the directions for how to configure the CGI form-mailer script will vary depending on what script you use I will show you how to have the form's contents emailed to you. The method I am going to teach is not the best way to do it - or the most reliable. But it is the easiest and it will probably work.

And you should know that you cannot nest forms! Nesting is the act of placing one object within the openig and closing tags of another object. So, when I say that you cannot nest forms I am saying that you cannot place one form inside another form. You can have multiple forms on one document, but they cannot be nested.

So, in the opening form tag (span id="tag"><form>) you will be including the attribute action="mailto:yourname@yourhost.com?subject=Form Results". The opening tag will look like this when completed with all that information:

<form action="mailto:yourname@yourhost.com?subject=Form Results">

You might recall from the section on links that you can designate a pre-filled subject for an email. Thatis whay I am doing with the ?subject=Form Results" attribute in the above code.

By using that code the results will show up in your email inbox, but it will show up pretty much unformatted and the only way to get any meaningful information out of the emailed form contents is to be sure to assign names to each element of the form.

Small Text Input Fields

Small text input fields are very useful when you wish to have someone input a small amount of text. Like a name or something like that. You can specify the number of columns you want in the text field (columns go from left to right - one letter is one column). When you select a size of 30 you are saying that the text input field should be 30 characters long.

The maximum length of the input can alsp be specified. For example, if you are asking for someone's last name you might want to make the limit 50 characters since just about nobody has a last name with more than 50 characters in it. You would include maxlength="50" in the HTML code. The small text input field can only be one line, though, so if you want to make it bigger you should use a large text input field. Here's a sample text box with a size of 30 columns and a max length of 50:

Name:

<form> Name: <input type="text" name="smallbox" size="30"> </form>

Large Text Input Fields

Large text input fields are for the entry of text which will comprise more than one line of text. Sometimes one sentence can't explain it, and that's when you need to large text input field. Here's a large text box and the code, side-by-side:

Sample text which will go inside the large text input field.

<textarea name="largebox" rows="4" cols="40">Sample text which will go inside the large text input field.</textarea>

Notice that you can specify the number of rows and columns in the larg text input box. Also notice that I have text already in the box. That is done by simply placing the desired text between the opening and closing textarea tag.

Radio Input

You can use radio input boxes (not exactly boxes - they're circular) to let your visitors choose between multiple options. For example, you might want them to check which color is their favorite. Something like that would look like this:

Red Green Blue Yellow

<form> <input type="radio" name="color" value="red" checked>Red <input type="radio" name="color" value="green">Green <input type="radio" name="color" value="blue">Blue <input type="radio" name="color" value="yellow">Yellow </form>

You must be sure to give them all the same name. Items with the same name will be mutually exclusive and no other item with that same name will be able to be checked at the same time. This way only one item can be chosen at once. This is good because you don't want someone to say they have two favorite colors, just one.

By placing the attribute checked within the input tag of one of the items you will make that item appear checkd by default when the page is loaded. If the visitor does not choose an altenate selection the default checked item will be selected.

Check-boxes

Check boxes are nearly identical to radio buttons except for the fact that check-boxes are meant to be inclusive - a user can select multiple items at the same time - unlike radio buttons.

Let's look at a sample of some check-boxes and some code.

Red Green Blue Yellow

<form> <input type="checkbox" name="color" value="red" checked>Red <input type="checkbox" name="color" value="green">Green <input type="checkbox" name="color" value="blue">Blue <input type="checkbox" name="color" value="yellow">Yellow </form>

This is identical to the code for radio buttons except for the fact that the word radio has been replaced with check.

Notice that the different items still have the same name, but now more than one can be selected at once. Also notice that I am still using the checked attribute to pre-select a default option.

Pull-Down Boxes

Let's look at a sample drop-down box and then the code:

My age is between:

My age is between: <select name="My age is"> <option>Choose Age <option>Under 12 <option>12-16 <option>17-21 <option>22-29 <option>30-39 <option>40-59 <option>60-99 </select>

Let's break it down. The select tag signifies the beginning of a drop-down list. Each option tag marks an option for the visitor to select. In the above case the options are various age ranges. I gave the select tag the attribue name and I made My age is the name. Naming your items properly is very important. If you don't name all your stuff consistenty then you should ust go to hell.

Read-Only Fields

You can make a form field unchangeable by adding readonly to the form field code. This way you can make certain things (such as information entered on previous pages of the same form) permanent.

This is the text that can't be changed.

<textarea name="TEST" rows="1" cols="40" readonly>This is the text that can't be changed. </textarea>

As you can see clearly the readonly attribute was dropped in to make a field unchangeable.

Send & Clear Buttons

Alright. Creating Send and Clear buttons is a lot easier than it is to understand them. Let's get started by first looking at the actual buttons and the code used to create them.

<form> <input type="submit" value="send"> <input type="clear" value="clear"> </form>

By changing the value, you change the words that appear on the button. If you are using a CGI form-mailer script then you will have to do some independent research about how your form content will be sent to you. Otherwise hitting the send button will send it via email to the address you provide in the opening tag.

You can also make your buttons images instead. It looks a lot nicer to have a nice picture instead of the usual gray button.

<input type="image" src="image.gif" height="10" width="10" border="0" alt="submit the form">

That above HTML would call for an image with the filename "image.gif" and a width and height of 10 pixels to appear in place of the Submit button.

And you can also use CSS to customize form buttons.

And that should cover all the bases.