Setting up a Web Site - HTML

Description

Form Tags

<FORM METHOD="POST" ACTION="demo1.cgi"> </FORM>
Sets up a form in an HTML document

<INPUT>
Defines an input field

<SELECT> </SELECT>
Selection from a list

<TEXTAREA> </TEXTAREA>
Start and end of text input area

Input Fields

This is the basic input field:

     Name: 
  Address: 
     City: 
    State: 
      Zip: 
      SSN:
Comments or questions:
The HTML for this is:

<FORM METHOD=POST ACTION="demo.cgi"> <PRE> Name: <INPUT SIZE=35 NAME="name"> Address: <INPUT SIZE=35 NAME="addr1"> City: <INPUT SIZE=25 NAME="city"> State: <INPUT SIZE=4 NAME="state" VALUE="PA"> Zip: <INPUT SIZE=10 NAME="zip"> SSN: <INPUT SIZE=9 MAXLENGTH=9 NAME="ssn"> </PRE> Comments or questions: <BR> <TEXTAREA NAME="comments" ROWS=4 COLS=50> </TEXTAREA> </FORM>

Radio Buttons

Radio buttons let you select one item:

Student type (please choose one): Freshman Transfer Readmit

Degree program (please choose one): B.A. B.S. B.S.Ed.

Tags for these buttons:

Student type (please choose one): <INPUT TYPE="radio" NAME="status" VALUE="Fresh" CHECKED> Freshman <INPUT TYPE="radio" NAME="status" VALUE="Trans"> Transfer <INPUT TYPE="radio" NAME="status" VALUE="Read"> Readmit <P> Degree program (please choose one): <INPUT TYPE="radio" NAME="deg" VALUE="BA"> B.A. <INPUT TYPE="radio" NAME="deg" VALUE="BS"> B.S. <INPUT TYPE="radio" NAME="deg" VALUE="BSED"> B.S.Ed. <P>

The Select Tag

Can create pull-down boxes to make selections:

Choose a semester:

Area of interest (choose as many as you are interested in):

Tags for this:

Choose a semester:<BR> <SELECT NAME="sem"> <OPTION VALUE="S97">Spring 97 <OPTION VALUE="F97" SELECTED>Fall 97 <OPTION VALUE="S98">Spring 98 <OPTION VALUE="F98">Fall 98 </SELECT><P> Area of interest (choose as many as you are interested in):<P> <SELECT NAME="pgms" MULTIPLE SIZE=5> <OPTION>Art <OPTION>Biology <OPTION>Business Information Systems ... </SELECT>

Checkbox Input

Can also be used for multiple selections:

Please send the following:

Application
Financial Aid Form
Scholarship Information

How did you hear about us?

Friend
Teacher
Magazine

The tags for these fields:

Please send the following:<P> <INPUT TYPE="CHECKBOX" NAME="send" VALUE="App"> Application<BR> <INPUT TYPE="CHECKBOX" NAME="send" VALUE="Aid"> Financial Aid Form<BR> <INPUT TYPE="CHECKBOX" NAME="send" VALUE="Scholar"> Scholarship<BR> <P> How did you hear about us?<P> <INPUT TYPE="CHECKBOX" NAME="friend"> Friend<BR> <INPUT TYPE="CHECKBOX" NAME="teach"> Teacher<BR> <INPUT TYPE="CHECKBOX" NAME="magazine"> Magazine<BR>

Buttons

Buttons signal an action to take to process the form:

Select term to schedule:

These use the input tag:

<INPUT TYPE=SUBMIT VALUE="Submit Application"> <INPUT TYPE=RESET VALUE="Reset"><P> Select term to schedule:<P> <INPUT TYPE=SUBMIT NAME=ACTION VALUE="Term 3"> <INPUT TYPE=SUBMIT NAME=ACTION VALUE="Term 4"> <INPUT TYPE=SUBMIT NAME=ACTION VALUE="Term 5">

Processing Form Data

Data from the form is sent to the server in this format:

name=John+Doe&addr1=123+Main+Street&city=Shippensburg
&state=PA&zip=17257&ssn=123456789&status=Trans
&dgree=BS&sem=F97&send=App&send=Aid&teach=on
&pgms=Finance&pgms=History
&comments=Send+work+study+form.%0D%0AThank+you
May then be processed by programs on the server.

   

   

Go to Top of Page

Back to Contents Page On to Next Section

Web Development Workshop
1999 MSACROA Conference
Sunday, November 28, 1999