Lesson 8:   HTML Forms

  1. Form
    The <form> tag has two attributes:
    The method attribute has two values:
    e.g. <form method="get" action="prog.asp">

  2. Input
    The <input> tag has six types:
  3. textarea
    A textarea is a box (who's dimensions you can set) in which the user can enter paragraphs of data. Unlike the input type="text" a textarea allows carriage returns within the data.
    (e.g. Comments: <textarea name="Comments" cols="70" rows="5">)

  4. Select Box
    A Select box is a dropdown list box with pre-set data to choose from.
    e.g. State: <select name="State">
                              <option value="AL">Alabama</option>
                              <option value="AR">Arkansas</option>
                              <option value="MS">Mississippi</option>
                              <option value="LA" selected>Louisiana</option>

    Note that Louisiana appears in the select box first. Take a closer look at the option for Louisiana. It has an added attribute selected. This attribute will make Louisiana the default choice. The following line will be sent to the next web page:
    State=LA (the value is sent not the text between option and /option.)
    To allow for multiple selections from the Select Box add multiple as an attribute:
    States visited:
    Hold down the Ctrl Key to select more than one.

Web Page Design: Exercise 8

Click StartComputer Double Click Local Disk (C:)
Double Click inetpub and wwwroot
Right Click in the wwwroot and choose NewText Document
Double click the New Text Document.txt and Enter the following code:
<!DOCTYPE html>
<html lang='en'>
<body bgcolor='cornflowerblue'>
<font size='3' family='verdana'>

<!-- * * * * * * * -->
<!-- * Echo.asp  * -->
<!-- * * * * * * * -->
Dim Item
For Each Item in Request.Form
    Response.Write Item & " = "
    Response.Write Request.Form( Item ) & "<br>"

<input type='button' value=' &laquo; Return'
Save it, close it, Right Click and Rename it echo.asp.

Now let's finish the Contact Us page with a form for visitors to fill out:

Replace ~under construction~ with the following:

      <form method='post' action='http://localhost/echo.asp'>
        <td align='right'> Your Name: </td>
       <td> <input type='text' name='Name'> </td>
        <td align='right'> E-mail Address: </td>
        <td> <input type='text' name='Email'> </td>
        <td align='right' valign='top'> Questions/Comments: </td>
          <td> <textarea cols='45' rows='8' name='Comments'></textarea> </td>
        <td align='right'> <input type='submit' value=' Send '> </td>
        <td> <input type='reset' value=' Clear '> </td>

Try it! The information you enter here will be displayed on the echo.asp Web page.

Try adding a checkbox, radio buttons, a select list of states with Louisiana as the default.