HTML Tutorial

Chapter 13: Forms

Forms

Forms allow you to add interactivity to your web documents by way of the <form> tag. With the form tag you can add to your web pages a guestbook, order forms, surveys, get feedback or whatever.

The basic construction of a html form is this...

<form> begin a form
<input> ask for information in one of several different ways
<input> there can be as many input areas as you wish
</form> end form

The <input> tag provides the user with various ways of inputting information. There are several different <input> tags.

Text

The most common type of form <input> is text.

<input type="text">

Name

Every input needs a name

<input type="text" name="tutorial">

When the user types in his address (for example 1313 Mockingbird Lane), it will become the input's value and be paired with ADDRESS so the end result after running it through Mailto Formatter will be ADDRESS=1313 Mockingbird Lane.

Value

We can if we want, type in a value

<input type="text" name="address" value="Input With A Value">

This will automatically pair the value Input With A Value with the name input, unless the user changes it. Note- be sure to use quotes where I've specified.

Size

We can specify the size of the text input box.

<input type="text" name="address" size="10">

<input type="text" name="address" size="20">

<input type="text" name="address" size="30">

The default value is 20.

Max Length

If we want, we can specify how many characters a user can input. Go ahead and try to input more than 10 characters in the text box below:

<input type="text" name="input" maxlength="10">

Password

Very similar to the TYPE=TEXT is the TYPE=PASSWORD. It is exactly the same, except it dispays *** instead of the actual input. The browser will send you the input, it just won't display it.

<input type="password" name="password">

Radio Buttons

Radio buttons allow the user to choose one of several options.

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

Now add 2 more.

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

Note that each input has the same name. The reason will become apparent very shortly.

Each of the Radio Buttons must be assigned a value, and then you can label each button.

Radio Button 1

Radio Button 2

Radio Button 3

<p><input type="radio" name="radio" value="1">Radio Button 1</p>
<p><input type="radio" name="radio" value="2">Radio Button 2</p>
</p><input type="radio" name="radio" value="3">Radio Button 3</p>

You can also modify these labels with other html tags if you wish.

Check Boxes

Check Boxes allow the user to choose one or more or all of the options. Building Check Boxes is pretty much the same as radio buttons. Start with this.

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

Add 3 more, but this time give each one a different name. (Also add in line breaks if you want). Each Check Box gets the same value.

<input type="checkbox" name="checkbox 1" value="same">
<input type="checkbox" name="checkbox 2" value="same">
<input type="checkbox" name="checkbox 3" value="same">

Note - For Check Boxes the NAME changes and the VALUE stays the same and with Radio Buttons, the VALUE changes but the NAME stays the same. Don't feel bad, my simple mind still gets confused.