HTML Forms

Forms are used in a myriad of applications across the web, and anyone who uses HTML as their main source for producing web pages should know a few basics.

Here is how to make a simple MAILTO form. This is a form that allows your visitor to input whatever data you request, and email it to you when they click on the Submit button:

Once your visitor clicks on the Submit button, the data collected in the form is emailed to you.

There's a catch: You may not be able to read it, because it is encoded. Unless you own a WebTV, you'll need to install a program to read your forms. If you use WebTV, the form will be decoded by WebTV before it reaches your mailbox.

You can place a form anywhere on a web page. Once you decide where you want it, you'll start with a form tag. Here's what it looks like:

<FORM METHOD="POST" ACTION="MAILTO:me@myserver.com" >

The METHOD="POST" attribute makes this a form capable of mailing, and the ACTION="MAILTO;your_address" denotes the address you want the data sent to.

You will want to end your form with the closing form tag: </FORM> In between these two tags is where you will place all your boxes and buttons.

Boxes
If you look at the top of this page, you will notice two different types of boxes - a small one and a large one. The small one is called a TEXT BOX. It is only one line tall, and is handy for collecting names, email addresses, phone numbers, etc.

Here's the code for a text box: Write Your Email Address Here<INPUT TYPE="text" NAME="email" SIZE="20">

The INPUT tag tells the browser to display a text box or button.

The TYPE=text attribute tells the browser that this is a single line textbox.

NAME=email gives this box a name. When the completed form is mailed to you, the data collected from this particular box will show up on the document you receive labeled as "email."

SIZE=20 tells the browser that the text box will be 20 characters long. You can type more than 20 characters into the box, but only 20 will show at one time on the page.

This particular box will look like this:

The TEXTAREA box is very similar to the TEXT box, but will display a larger box, allowing for several lines of text, as opposed to the single line of the TEXT box.

Here's the HTML for a TEXTAREA box:

In this example, the heading was placed above the box.

The TEXTAREA has its own tag, rather than using an input tag like most other elements of a Form. Notice that you must use a closing TEXTAREA tag as well. If you type any text between these two tags, it will show up in the TEXTAREA box when the page is viewed.

NOTE: The TEXTAREA tag does not use a SIZE attribute. Instead, it uses ROWS and COLUMNS. The ROWS attribute specifies how tall the box will be, with one text line displayed for each row specified. The COLUMNS attribute determines the width. In this case, the TEXTAREA box is twenty characters wide.

Here's how the above example looks when displayed by a browser:

Buttons
There are four types of buttons we can use in forms. We will cover two types in this section, saving the Submit and Reset buttons for last.

RADIO BUTTONS look like this:

When you place a string of radio buttons in a form, only one button can be clicked ON at a time. If you try clicking on the buttons above, you'll notice that you cannot activate both.

Here is the HTML:

CHECK BOXES are a little different. You can activate as many check boxes on a form as you want and every box will show a check mark.

Like the Radio Buttons, the CHECKBOX uses an INPUT tag.

<INPUT TYPE="checkbox" NAME="_" VALUE="_">

Again, the NAME="" attribute allows you to name this field of your form, so that when you receive the data, you will know what your visitor checked. The VALUE="" attribute allows you to pick a word that will appear on the data you receive (next to the name you choose for this checkbox ) to show you that the visitor marked that particular box.

Pull Down Boxes
PULL DOWN BOXES are a efficient way to present your visitor with several options.

Web Hosting ISDN eCommerce

The HTML is simple:

Submit And Reset
The SUBMIT button is mandatory for your Form to work. When your visitor fills out the form and clicks on the Submit button, all the information he or she entered is bundled up and shipped off.

Use an input tag for the submit button:

<INPUT TYPE="submit" VALUE="Submit">

Whatever word you place between the quote marks in the VALUE="_" attribute is the word that will appear on the button itself when your web page is viewed.

The RESET BUTTON will clear all the data from a form when clicked.

The HTML tag for a RESET BUTTON is almost identical to the Submit button:

<INPUT TYPE="Reset" VALUE="_">

This is the HTML for the form at the top of this page.

<FORM ACTION="mailto:you@yourdomainname.com" METHOD="POST">
Your Name : <INPUT TYPE="text" NAME="_" SIZE="20" MAXLENGTH="80">
<p>
Email Address :<INPUT TYPE="text" NAME="_" SIZE="20" MAXLENGTH="80">
<P>
Rate this FAQ
<P>
<INPUT TYPE="radio" NAME="_">
</TD>
<TD>
Excellent!
<INPUT TYPE="radio" NAME="_" VALUE="_">
Okay, I guess...
<INPUT TYPE="radio" NAME="_">
Keep your day job!
<P>Describe yourself
<SELECT NAME="_">
<OPTION>A seeker of truth
<OPTION>Head in the sand
<OPTION>Hungry
<OPTION>Falling asleep quickly
</SELECT>
<p>How do you like my site?
<p>
<TEXTAREA NAME="_" ROWS="5" COLS="40" value="Place your comments here">
</TEXTAREA>
<P>
<INPUT TYPE="submit">
 
<INPUT TYPE="Reset">
</FORM>