Tutorial #13:
Constructing Forms

Other tutorials
The Basics
The Basics - Part II
Working With Text
Text - Part II
Making Links
Images
Lists
Tables
CSS
CSS Text Control
CSS-P
Frames
Forms
JSS
Layers
Colors
Marquees

Forms are an important part of an advanced web page. Forms help with feedback. They can be used for surveys, e-mails, even a guestbook.

When using a form, you have to remember the golden rule: ALWAYS USE THE <FORM> and </FORM> TAGS!!
OK, that's over with. Now, I like to start with an example, so here it is:
Tell me your name:

Make any comments you'd like here:

How do you like my site?
I like it! I hate it!

So, what do you think? It is functional, but it is simple. Now, for the code.

<form action="mailto:administrator@htmlcentral.20m.com" method="post">
Tell me your name: <input type="text" name="username"><p>

Make any comments you'd like here:<p>
<textarea rows="7" cols="50" name="user_input"></textarea><p>

How do you like my site?<br>
<input type="radio" name="How_do_you_like_my_site?" value="I_like_it!">I like it!
<input type="radio" name="How_do_you_like_my_site?" value="I_hate_it!">I hate it!<p>

<input type="submit" name="submit" value="Send!">
<input type="reset" name="reset" value="Start Over">

</form>

Okay, let's take this from the top. First of all there's the <form> tag. But there's some other stuff in it. Remember way back in the links tutorial when I showed you the button links? It had the same thing. The action tag tells the form where to go after it is submitted. It doesn't always have to be a mailto:whatever. Depending on how you use the form, you can put a certain address, or you can direct the form to a CGI. There are two different methods, post and get. I haven't used get in any of my e-mail forms.

Now, we get into the form's content. Except for textarea, you're going to see the <input type> a lot. You can adjust the text box in diferent ways. You can type in size="1,2,etc. You can also adjust the maximum length by typing in maxlength="a number". And always remember to name your inputs. Otherwise, you won't be able to understand what is sent to you.

On to the textarea. They're a little weird because they're different, like I just said. When adjusting rows and columns, you have to remember that a column it the width of a letter, and a row is the height of a line. Therefore, you want to have more columns than rows. Remember to put </textarea> at the end.

Here's another input type: radio buttons. They differ from checkboxes, which I will show you later, in that you can only make one selection.

Two extremely important input types are the submit and reset buttons. You should have them on every form. Without the Submit button, you can't submit the form, and without the Reset button, people will have a tough time changing things.

There are other input types. I will show them to you and then explain them.

Which of these teams do you like?
Pittsburgh Penguins Pittsburgh Steelers Pittsburgh Pirates

These are checkboxes. To put them in, do the exact same thing as radio buttons, except type in "checkbox" instead of "radio" in the input type part.

This is a password box. Here's the code:
<form>
<input type="password" name="pswd">
</form>

If you learn JavaScript and you decide to write a JavaScript, then this is where a password box comes into play.

This is the last one I'm going to show you:
Here's the code:

<form>
<select name="favorite_color">
<option>Favorite Color
<option value="red">Red
<option value="orange">Orange
<option value="blue">Blue
<option value="green">Green
</select>
</form>

As you can see, this is simple and pretty much self-explanatory.
My JSS tutorial is here!