• To begin a form, use the form element. Then include the input element. Here's a list of the input attributes.

<input>
            type = determines what kind of control you want
            name = names the control
            value = labels for radio buttons or checkboxes
            size = width in pixels
            maxlength = maximum # of characters available
            checked = pre-selects a radio button or check box
            src = for graphical buttons
            alt = alternative text for graphical buttons

• To get on of those large areas of space where people can type anything into, use the textarea element. Using rows and cols specifications, you can modify the size of your textarea.

<textarea cols='25' rows='5'></textarea>

• Want to give your audience more choices to choose from in a drop-down menu kind of thing? You'll need the select element. You'll also need the option attribute to specify the choices.

<select>
<option>First choice</option>
<option>Second choice</option>
<option>Third choice</option>
</select>

First choice Second choice Third choice

• To make more than one selection available, put the multiple in the select element.

<select multiple>
<option>First choice</option>
<option>Second choice</option>
<option>Third choice</option>
<option>Fourth choice</option>
<option>Fifth choice</option>
<option>Sixth choice</option>
<option>Seventh choice</option>
<option>Eighth choice</option>
</select>

First choice Second choice Third choice Fourth choice Fifth choice Sixth choice Seventh choice Eighth choice

• To make group headers for the menu selections, use the optgroup element and its label attribute.

<select>
<optgroup label='First four'>
<option>First choice</option>
<option>Second choice</option>
<option>Third choice</option>
<option>Fourth choice</option>
</optgroup>
<optgroup label='Second four'>
<option>Fifth choice</option>
<option>Sixth choice</option>
<option>Seventh choice</option>
<option>Eighth choice</option>
</optgroup>
</select>

First choice Second choice Third choice Fourth choice Fifth choice Sixth choice Seventh choice Eighth choice

• Here's a list of different values you can choose from for the type attribute in the input element.

<input type=' '>
                  text - a text box
                  password - same as a text box but characters are turned into **
                  checkbox - more than one box can be selected
                  radio - creates a set of radio buttons, only one can be selected
                  submit - creates a submit button
                  reset - creates a reset button
                  file - creates an upload file box
                  hidden - shows no box, but sends data about the computer
                  image - insertion of an image
                  button - creates a push button

• Now, to see some of these different controls in action.

A RADIO BUTTON

<form>
What is your gender?
<input type='radio'>Male
<input type='radio'>Female
<input type='radio'>Prefer not to disclose
</form>

<form>
Do you like reading? (Please select only one)
<input type='checkbox'>Yes
<input type='checkbox'>No
<input type='checkbox'>It's okay.
</form>

<form>
What is your name?
<input type='text' maxlength='999'>
</form>

A PASSWORD TEXT BOX

<form>
What is your password?
<input type='password' maxlength='999'>
</form>

TO UPLOAD A FILE BOX

<form>
<input type='file'>
</form>

AN IMAGE FORM

<form>
Click on the picture to refresh the page.
<input type='image' src='hello.gif'>
</form>

A BUTTON FORM

<form>
<input type='button' value='PUSH ME'>
</form>

<form>
<input type='submit' value='Submit'>
</form>

A RESET BUTTON

<form>
<input type='reset' value='Reset'>
</form>

• I do believe I included an example of all the different types of forms. I will go on to explain a important part of the form element. The attributes method and action. The attributes method and action are required for the form to really work. Together, they either post entries to guestbook or send whatever information you put on the form. Take a look at the example below of these two attributes.

<form method='post' action='http://us.geocities.yahoo.com/forms?login=divinehostdestiny'>

• The post value ensures the fact that the the action is directed to a specific script on the server. As you can see above, geocities keeps certain scripts on its server to direct the submissions on the form. You'll have to either contact your host to see what your address is or you can make your own. This form will not send because there is no site to receive it on the other end.

• We have come to an end to the forms tutorial and you will move on to the images tutorial when you are ready. Remember, forms can be a little difficult to begin with so it might be best for site builders to make the forms for you in the beginning at least until you get used to them.