Forms are fun!

In this tutorial, I hope to teach you how to make a simple MAILTO form. This is a form that allows your visitor to input whatever data you request, and mails it to you when they click on the submit button. It looks like this:

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

There's a catch though. You may not be able to read it, because it's encoded. Unless you own a Webtv, you'll need to install a program to read your forms with. If you're a webtver, The form will be decoded by webtv before it reaches your mailbox.

Coder.com offers a really great service called Mailform. If you register your email address with them, they'll give you a code to put into your form so that the data is sent to them. They decode it, and forward it to you in plain text. I've used their service before. It works great and it's free.

So Let's Get To It

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 mailable form, and the ACTION="MAILTO;your_address" denotes the address you want the data sent to.

I read somewhere that the MAILTO always has to be capitalized. I'm not sure if that's accurate, but I always do it just in case.

You'll want to end your form with a closing Form tag.

</FORM>

In between these two tags is where you'll place all your boxes and buttons.

Boxes

If you look at the top of this page, you'll notice two different types of boxes - a small one and a big one.

The small one is called a TEXT BOX. It's only one line tall, and is real handy for collecting names, email addresses, phone numbers, etc.

Here's the code for a text box:

Write Your Email Here <INPUT TYPE="text" NAME="email" SIZE="20">

Notice that the first part,"Write Your Email Here", isn't HTML, it's plain text. I put that there to show you that the tags for text boxes don't provide for headers or labels that are visible on the webpage. If it's a box for an email address, you'll have to write that out somewhere near the tag itself.

The next part of the example is the INPUT tag. This tag tells the browser to display a text box or button of some sort.

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 any one time on the page.

This particular box will look like this:

Write Your Email Here

The TEXTAREA box is very similar to the TEXT box. The major difference is that a bigger box is displayed, 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 I placed my heading 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.

Please note that the TEXTAREA tag doesn't use a SIZE attribute. Instead it uses ROWS and COLUMNS. ROWS specifies how tall the box will be, with one textline displayed for each row specified. COLUMNS determines the width. In this case, our textarea box is twenty characters wide.

 

 

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

Write your comments here

Buttons

There are 4 types of buttons we can use in forms. I'm going to cover two types in this section, and save the Submit and Reset buttons for last

For now, let's discuss RADIO BUTTONS and CHECK BOXES.

RADIO BUTTONS look like this.

YES     NO

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 can never get both of them activated.

Here's the HTML:

 

CHECK BOXES are a little different. You can activate as many check boxes on a form as you want, Click to your heart's content, and every single box will show a check mark. try it!

Send Me A Newsletter.

Please Call Me.

Cancel My Subscription.

Leave Me Alone.

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 back, you'll know what the viewer responded to. 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 neat way to present your visitor with several options to choose from.

The HTML is surprisingly simple:

Submit And Reset

The SUBMIT button is mandatory for your form to work. When the person filling out the form clicks on the Submit button, all the information they entered is bundled up and shipped off.

Use an input tag for the submit button. Here's the HTML

<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. In this case I used "Submit"

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="_">