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

Setting Up a Web Site
1998 MSACROA Conference
Monday, November 30, 1998