Building Forms Tutorial 

How do you know what your visitors think? Simple - ask them. And provide them with a form so they can easily pass along their thoughts, concerns, even requests or orders, to you. The elements making up forms are diverse, but creating your own forms is not hard at all. Read Matt Doyle's "Building Forms" to learn how the basic elements of forms work. Go ahead – add a form to your site. Forms add interactivity to a static Web experience and put you in touch with your public.

Once you get the basics down cold, move on to Steve Adcock's "Five Basic Tips for your Forms." Short and to the point, you'll see how to get the most out of your forms and maybe even improve your response rates through better usability design. Your HTML might be technically correct, but your responses will dwindle if your forms are unprofessional or boring.

Enjoy the issue!

Building Forms
This tutorial will show you how to create forms in your Web pages using HTML. Forms allow you to make your site interactive - your users can use the forms on your site for giving you feedback via email, navigating your site, posting messages and other content to your site, voting and polling, and almost anything else you can dream of!

In this tutorial, we'll start off by looking at the <form> tag, the basic building block of Web forms. Then we'll look at 8 different types of fields that you can place in your form, including text fields, checkboxes, radio buttons, list boxes, text areas, hidden fields, password fields and file upload fields.

After that, we'll show you how to use the submit, image and reset buttons, and how to create generic form buttons. Buttons are needed to "activate" your form, for example, to enable the user to send the form after they've filled it in.

Finally, we'll briefly look at ways to process the results of your forms after they've been submitted.

The FORM tag
All HTML forms are created using the <FORM> tag:

<form method="xxxx" action="xxxx">

(form fields in here)

</form>

The method attribute controls how the information that the user enters in the form is sent to the server. The two options are:

GET

Sends the form data as part of the URL (e.g. script.cgi?name=Joe&email=joe@joe.com). This is the default option. It's useful and efficient for small amounts of data (e.g. a search engine query) and it's easy for the user to refresh the results of the form by just pressing the browser's refresh button. However it cannot be used for large amounts of data (more than a few hundred bytes).

POST

Sends the form data encoded in the HTTP data stream. This is recommended for most types of forms (e.g. feedback forms and form mailers). The user will not see the form data in the URL. Large amounts of data can be sent this way. Unlike the GET method, the user cannot easily refresh the form results page - they usually see a dialog asking if they want to resend the form data - but this is often a good thing!


The action attribute specifies where the form data submitted by the user will be sent. Usually this is the URL of a script on the server - for example, http://www.yoursite.com/cgi-bin/feedback.cgi or http://www.yoursite.com/poll.asp.

Form Fields
Now that we've covered the basic FORM tag, it's time to put some fields in our form!

Form fields include things like text boxes, checkboxes, radio buttons, and drop-down lists. Each form field has a name and a value. The name is used by the server-side script or other program to identify the field, and the value is the data that is entered by the user.

We'll look at each of the available form field types in turn, and show examples of each field.

Text Fields
Possibly the most widely used form field is the text entry field. This is a simple box into which the user can enter small amounts of text data, such as their name or email address. It takes the format:

<input type="text" name="xxxx" value="xxxx"
size="xxxx" maxlength="xxxx">

The name attribute is the name of the field (for example, email_address or age). The value attribute allows you to provide a default value that will appear in the box (the user can change the value if they want). This is optional - to leave the field blank, use value="" or miss out the value attribute altogether.

The size attribute specifies the physical size (width) of the form field, in characters. You can miss out this value in which case the browser's default field size will be used.

Finally, the maxlength attribute allows you to limit the amount of characters the user can enter. If you leave this value out, then the user can enter as much as they like.

Example:
<form>
Email Address: <input type="text" name="email_address" value="" size="30" maxlength="50">
<form>

Email Address:


Checkboxes
Checkboxes are simple fields that can be toggled on or off with a mouse click. A checkbox can have only one value - for example, yes, or true.

These fields are great for allowing the user to specify a single item of data - for example, whether they want to receive your newsletter or not, or to indicate that they have read your terms and conditions.

The checkbox field takes the format:

<input type="checkbox" name="xxxx" value="xxxx" checked>

The name attribute is the name of the field (for example, newsletter). You can specify multiple checkboxes all with the same name, in which case they will belong to the same group. When the form is submitted, the values of all the checkboxes will be sent using the same field name.

The value attribute specifies the value that will be submitted if the user checks the box. If the user clears the box (so that it has no check mark in), then a null (empty) value will be submitted.

The checked attribute, if present, will display the checkbox already selected. If checked is not present in the tag, the checkbox will be displayed empty.

Example:

Would you like to be added to our mailing list?
<form>
<input type="checkbox" name="mailing_list" value="yes" checked> Yes
</form>

Would you like to be added to our mailing list? Yes


Radio Buttons
Radio buttons are similar to checkboxes, except that only one radio button in a group can be selected at any one time. (As with checkboxes, a radio button group is a collection of radio buttons with the same name attribute.)

Radio buttons are useful for getting a user to pick from a choice of options. (If you have a lot of options, consider using a list box instead.) The radio button tag has the same attributes as the checkbox tag:

<input type="radio" name="xxxx" value="xxxx" checked>

The name attribute is the name of the field (for example, favorite_color). You can specify multiple radio boxes all with the same name, in which case they will belong to the same group. Only one radio button in the group can be selected at any one time.

The value attribute specifies the value that will be submitted if the user selects this radio button.

The checked attribute, if present, will display the radio button already selected. If checked is not present in the tag, the radio button will be displayed empty.

Example:
What is your favorite color?
<form>
<input type="radio" name="favorite_color" value="red" checked> Red
<input type="radio" name="favorite_color" value="orange"> Orange
<input type="radio" name="favorite_color" value="pink"> Pink
</form>

What is your favorite color? Red Orange Pink


List Boxes
List boxes allow the user to select one or more items from a list of available options. A list box takes the format:

<select name="xxxx" size="xxxx" multiple>
<option value="xxxx" selected>Option Text</option>
<option value="xxxx">Option Text</option>
...
</select>

The <select></select> tag defines the list box. The name attribute is the name of the list box (for example, favourite_sport).

The size attribute specifies how many list items will be displayed at once. If this attribute is not present or is set to 1, then a drop-down box will be displayed.

The optional multiple attribute, if present, will allow the user to select more than one option in the list by holding down the Shift or Control keys.

Inside the <select></select> tag, one or more <option> tags are placed. Each <option> tag represents an item in the list box. The value attribute is the value that will be submitted if the user selects this option. The optional selected attribute will pre-select this option when the form is first displayed.

In between each <option></option> tag, you can place the text label that you would like to be displayed for that option. Note that the text label does not have to be the same as the option's value attribute. The text label is not submitted with the form; it's just to guide the user.

Example 1: Drop-Down List

What is your favorite sport?
<form>
<select name="favourite_sport" size="1">
<option value="all" selected>I love all sports!</option>
<option value="cricket">Cricket</option>
<option value="football">Football</option>
<option value="ice_hockey">Ice Hockey</option>
</select>
</form>

What is your favorite sport?


Example 2: 3-Line List

What is your favorite sport?
<form>
<select name="favourite_sport" size="3">
<option value="all" selected>I love all sports!</option>
<option value="cricket">Cricket</option>
<option value="football">Football</option>
<option value="ice_hockey">Ice Hockey</option>
</select>
</pre>
<form>

What is your favorite sport?


Text Areas
If you need the user to input a large amount of text (more than a single line), use the text area field. It takes the format:

<textarea name="xxxx" rows="xxxx" cols="xxxx" wrap="xxxx">
(default text here)
</textarea>



Five Basic Tips for Your Forms

On the World Wide Web, forms are the essence of communication, and yes, there is a method to its madness. Presentation is everything on the web, and if you want feedback from your visitors, you need to conform to their visual biases and expectations on how forms should both look and act. Let's take a quick look at 5 basic form tips.

1. Do not bore them. Include what you need, throw away the rest.
Do not make your visitors write a book to send you feedback. Keep your forms short, simple and to the point. Not only do your visitors have more to do than fill out a lengthy form, they are sensitive to the information they provide others, especially over the Internet. If this is a comments form, ask their name, e-mail address and comments. You do not need their location, date of birth or their favorite color.

2. Create data restrictions
Have you ever received a blank form? What about a name that spans out 100 characters? To prevent these common occurrences, place data restrictions upon your form. For example, require certain form fields (refer to this Javascript or PHP article for more on requiring fields), or restrict the available character count for a text box. How is this done? Let's take a look:

<input type="text" name="Name" size="20" maxlength="10">

This is a typical text box named Name, with a size of 20 and a maxlength of 10. This means that although the text box will span 20 character positions to the right, only 10 characters will be allowed in that text box. This type of restriction would work well with middle initial fields or state code fields.

3. Start them off on the right track
Is it so much to ask that the user must click in the first box to begin filling out the form? Yes! Well, this could be debatable, but a nice feature none the less. Here is how you'd automatically place the cursor in a particular text box.

<body onLoad="document.forms[0].fieldname.focus();">

How's this? If you already have a body tag, simply copy and paste from onLoad to the right. What this says is place the cursor in the 'fieldname' text box in the first form of the page. Note, you can place the cursor, by default upon page load, in any text box, but logically, you'd place it in the first text box the user would fill out, like Name, for example.

4. Organize the form data
Another good practice of forms is the use of a table to organize the text and input elements. A common use is a simple two-column table, the left column supplying the question or criteria and the second column providing the actual form element.

5. Give them a confirmation
Okay, it's simply a matter politeness to thank the visitor for taking the time to fill out your form, so after submission, the user should be presented with a thank you page. Many server-side scripts written in ASP, Cold Fusion, Perl, or PHP have this feature built in.

In short, these 5 easy and basic tips can improve your response frequency and make your forms look and act more professionally. Remember, forms are your best friend, so treat them well.

Download This File Free 

Building Forms Tutorial

Name    

Email     

Website 

                  

 

 

Traffic- Magic Inc.

  Now you can send unlimited followup emails with file attachments automatically from your website. Make as many sequential letters as you need and send them at the interval you specify. Unlimited autoresponders, unlimited followups, unlimited users. One-click "remove-me" link. Easy to set-up and configure in 10 minutes. FollowUp works without CRON jobs (which are not allowed on many servers). It's simple, efficient, and Automatic!