Web.Wizard HTML tutorial series

Tutorial 10

Forms

It always nice to receive feedback about your Web site :) HTML forms provide a way to prompt the reader for information such as "Do you like my site?", "How do I become a millionaire?", "Does anyone know the meaning of life?" - you get the idea!

A HTML form is contained between the tags, <FORM> and </FORM> Between these tags, one or more <INPUT>, <SELECT> or <TEXTAREA> tags should appear. All of these tags have associated attributes which are shown in the example below. I have found the best way to understand how HTML forms work is by example, so here goes...

Surname: First name: Address: Postcode: Country: Email: URL: Age: under 25 over 25 I use a : Atari ST Atari STe Falcon030 Milan Hades Phenix OS: Password: Rate my site: Message:

Here is the HTML souce code for the above form. NB: if you do not include a Submit button then your form cannot be transmitted. The destination Email address for the form appears after MAILTO:

<PRE>
<FORM ACTION="MAILTO:cadenza@cyberstrider.org" METHOD="POST">
      Surname: <INPUT NAME="surname" SIZE=30>
   First name: <INPUT NAME="firstname" SIZE=30>

      Address: <INPUT NAME="address1" SIZE=30>
               <INPUT NAME="address2" SIZE=30>
               <INPUT NAME="address3" SIZE=30>
     Postcode: <INPUT NAME="postcode" SIZE=15>

      Country: <SELECT NAME="country">
<OPTION>FRANCE
<OPTION>GERMANY
<OPTION>ITALY
<OPTION>SPAIN
<OPTION>SWEDEN
<OPTION>UK
</SELECT>

        Email: <INPUT NAME="email" SIZE=30>
          URL: <INPUT NAME="url" SIZE=30>

          Age: <INPUT NAME="age" TYPE="RADIO" VALUE=1> under 25  <INPUT NAME="age" TYPE="RADIO" VALUE=2> over 25

     I use a : <INPUT NAME="computer" TYPE="CHECKBOX"> Atari ST  <INPUT NAME="computer" TYPE="CHECKBOX"> Atari STe
               <INPUT NAME="computer" TYPE="CHECKBOX"> Falcon030 <INPUT NAME="computer" TYPE="CHECKBOX"> Milan
               <INPUT NAME="computer" TYPE="CHECKBOX"> Hades     <INPUT NAME="computer" TYPE="CHECKBOX"> Phenix

           OS: <SELECT NAME="os" MULTIPLE>
<OPTION>TOS 1.0
<OPTION>TOS 1.2
<OPTION>TOS 1.4 Rainbow TOS
<OPTION>TOS 1.6x
<OPTION>TOS 2.06
<OPTION>TOS 3.06
<OPTION>TOS 4.x
<OPTION>MagiC
<OPTION>Geneva
<OPTION>Dolmen
</SELECT>

     Password: <INPUT NAME="password" TYPE="PASSWORD" SIZE=30>

 Rate my site: <SELECT NAME="rate">
<OPTION>10/10
<OPTION>9/10
<OPTION>8/10
<OPTION>7/10
<OPTION>6/10
<OPTION>5/10
<OPTION>4/10
<OPTION>3/10
<OPTION>2/10
<OPTION>1/10
</SELECT>

      Message: <TEXTAREA NAME="message" COLS=30 ROWS=4></TEXTAREA>

               <INPUT TYPE="Submit">  <INPUT TYPE="Reset">
</FORM>
</PRE>

END OF TUTORIAL

Go back to Contents Back|Next


Please direct any comments to Matthew Bacon at: cadenza@cyberstrider.org
Copyright © Matthew Bacon - Last updated on: 10-07-99

This page was created using Web.Wizard v3.10 © 1997-1999 Cadenza Software