Web Design Tutorials

 

HTML Forms

Forms are a very simple way to allow your visitors to send you simple information, whether it be for feedback purposes, subscription or purchase information, or any of the many other uses of forms. Using simple HTML forms is a very slick way of receiving information from your visitors. A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the <form> tag.

Forms

Form StructureJust like the rest of HTML, forms follow a structure. The <form> tag is a container tag. It holds all of the elements, such as text boxes and submit buttons, which we'll see below, inside it. Our form container will look like this:

<form method="post" action="mailto:you@address.com">


< /form>

This tag and its attributes start a new form; specify that the method the form will use is to post the information, and give the location that the information will be sent to with the action attribute — in this case your email address. Make sure you put your address in straight after the attribute, with no space in-between.

This method of sending the data will just send an e-mail. If you want the form to add a thank-you message afterwards, you need to use Perl to write a CGI Script, which is a bit more complicated. For your first form, just send it straight to your email address.

Once you've set down that a form is going here, you will need to populate it with some of the input elements and a submit button. Put the parts below between the form tags.

One-line Text Box

Text Boxes will probably be the main parts of your form. They allow the reader to input either a line or multiple lines of text. The first type of text box is a one-line box, suitable for information like their name or e-mail address. It looks like this:

Click inside the box and try it out. You can type anything you want. The code for one of these boxes is

<input type="text" name="name" size="50">

<input>
This is the tag name for many of the form elements that are there to collect user input.


type
The value of this attribute decides which of the input elements this one is. In this case, text is telling the browser that it's a single-line text-box.

name
When you get the results of this form in your e-mail, you're going to need to know which responses were placed in which boxes, as you just get back a load of text. This is where the name attribute comes in. With this, each line in the response will be given a label in the e-mail. If you used name="firstname", because you were using this box to find out the reader's first name, you would receive
firstname=Kirk
in the e-mail you are sent.


size
This specifies the length of the box on your page. If the box is not wide enough for the information that is entered, it will scroll across to allow more letters, but you should tailor this to the type of information being asked for so that most people can see their whole response at once.


Text Area Box

This box allows more than one line of text to be entered. It's suitable for comments, street addresses, that kind of thing. You don't need to press return at the end of each line, the browser will wrap the text automatically.

For some reason, text areas aren't specified as a value for input type="...", but instead have their own tag — <textarea>. The code is:

<textarea cols="50" rows="4" name="comment"></textarea>

Again, you'll have to change around the dimensions to suit your needs. cols and rows here mean COLumns and, ROWS respectively. Take note that this tag needs an end-tag too. Any text you put in there between the tags will appear in the box when the form is loaded.

Selection Boxes

These three elements give the reader a choice of options, and asks them to pick out one or more of them.

1. Radio Buttons

These small circular buttons can be used in polls or information forms to ask the user their preference. When you set up a group of them, you can only select one choice. Try it here:

1. 2. 3.

They're called radio buttons because they function like the buttons on a really old car radio. Remember, the guys who came up with this stuff have beards as long as your arm, so you're should expect things like that. The code for a radio button is:

<input type="radio" name="radio" value="choice1">

The code is about the same as the one you've seen before. type="radio" says that this is going to be a radio button. There is a new attribute here too — value. This is like the answer to a question. Say you were asking the reader what they liked most about your site. The name of this group of questions would be 'likemost' and there would be three choices, all radio buttons, all with name="likemost" in them, to show that they're all part of the same question. Then the three values could be 'layout', 'content' and 'graphics'. When you receive the results, you'll get something like: likemost=layout
depending on which button was checked. Now that you can add the value attribute to the single-line text box above to add in some text before the user even starts typing.

2. Check Boxes

Groups of check boxes are similar to radio buttons except multiple boxes from the same group can be selected at the same time. They are small squares that are marked with a tick when selected. Here's a few to play with:

1. 2. 3.

The code for these boxes is the same as for the radio buttons, with just the value of the type attribute changed:

<input type="checkbox" name="checkbox" value="choice1">

3. Drop-down Select Boxes

These are a cool way to get a user to select an option. They perform the same thing as radio buttons, it's just the way they look that's different. Most of the options available are not in view until the user gets intimate with the box and clicks on it. The rest of the options will then pop-up below the box.

The lengthy code is:

<select name="classes" size="1">
<option value="statistics">Statistics</option>
<option value="accounting">Accounting</option>
<option value="marketing">Marketing</option>
<option value="database">Database</option>
< /select>

select boxes are like textareas — they have their own tag, but these elements hold further tags inside them too. Each choice you give your reader is denoted by an option. The name/value system remains from the tags above. The size attribute sets how many lines of options are displayed. Setting this to anything over 1 (the default) is really defeating the purpose of having the options hidden away.
You can use these boxes as a link-chooser too, with the help of a bit of JavaScript. The code for that is on the drop-down link box page.

Send and Reset Buttons

Now that you've gotten the reader to fill in all the information you want, you need a finishing button to click on to send it all to your e-mail address (or wherever you've said at the start). You can also clear all the info in the form out with the reset button. They're both real easy to make, and look like this:

The simple tags for these two are:

<input type="submit" value="Submit">
< input type="reset">

The value attribute in this case sets the text that's displayed on the front of the button. When you click submit all the form information is sent to your target and the page (or following page) is loaded.

Take the Online Quiz for Web Design