David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.

David Lash

DePaul University SNL 262

Web Page Design

Forms! - Chapt 7

Instructor: David A. Lash

2David Lash

HTML Forms HTML Forms are used to:

Gather survey information on web Submit passwords Structure queries on a database Submit orders

Click Here for an example http://www.depaul.edu/~dlash/extra/Webpage/

examples/08survey.htm

3David Lash

HTML Forms

When submit a form it will be sent to a server script for processing

HTML Form

Submit

Program or database

on Webserver (e.g., condor)

4David Lash

HTML Form Elements

Text Box

Radio Buttons

Check Box

Select Box

Text Area

Submit/Reset button

5David Lash

Starting and Ending Forms

HTML forms are created by using the HTML <FORM> and </FORM> tags. Within these tags, you place various HTML form elements, such as

text areas, check boxes, and radio buttons. For example, <FORM ACTION=”http://nwswww.ih.lucent.com/~dlash/stuf

f.cgi” METHOD=”POST”> . . ---(Your FORM elements here) .

</FORM>

6David Lash

Two primary <FORM> arguments <FORM

ACTION=”http://perl-pgm.com/cgi-bin/stuff.cgi” METHOD=”POST”>

– get appends the form arguments to the end of the Web address.

– post sends the data as part of the body of the HTML document.

– Will use post since get method may limit the amount of data you can send.

ACTION= - Specifies the URL of the receiving file/program to start when the form is submitted

METHOD= - Defines the argument format that will be used to send data to the receiving program/file.

7David Lash

Some Form Tag Examples< FORM METHOD=POST ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-

query" >

Sends the results to a program at http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query.

<FORM METHOD="POST“ ACTION="mailto:[email protected]"> Sends the results to via email to [email protected]

The email you get is a messy email (Click here for example.) For that reason, most sites don’t submit directly but execute a program first.

8David Lash

The Big Picture For Forms<FORM METHOD=POST

ACTION="http://condor.depaul.edu/~dlash/save_it.php”>

Your Form Here

(Checklists, Text Boxes, Drop-down lists, buttons, etc)

</FORM>

9David Lash

Creating Text Boxes

Text boxes are those input areas on a form where the customer can input free-format typing. For example click here.

10David Lash

Text Box: FormatPlease Enter Your Full Name <Input Type="Text" SIZE=20 MAXLENGTH=30 Name="fullname">

Where Please Enter Your Full Name - is text to display immediately before

the text box. Input Type - A keyword that says how input will come in. You can say

"Text" - for text boxes with characters displayed in box as typed. "Passwd" - For text boxes with asterisks "*" displayed in box as typed.

SIZE= Width of (in chars) the input box. MAXLENGTH= - The max number of characters the user can type into

box. Name= The name identifier passed to the email program. (E.g.,

name="David Lash" )

11David Lash

Text Box: FormatPlease Enter Your Full Name <Input Type="Text" SIZE=20 MAXLENGTH=30

Name="fullname">

Where Name= The name identifier passed to the email program. (E.g.,

name="David Lash" )

The resulting email might look like:fullname=Dave+Lash

12David Lash

Text Area: FormatJust like text box but bigger. Click here

http://www.depaul.edu/~dlash/website/TextInput.html

<textarea NAME="UNIT_COMMENTS" ROWS=4 COLS=70 >Your comments here</textarea>

Name= The name identifier passed to the email program. (E.g., name=”UNIT_COMMENTS”)

ROWS, COLS = Number of cols and rows of text box

13David Lash

Check Boxes

Check boxes are pre-defined optional input that you check.

Click Here for example

14David Lash

Check Boxes: General Format

Pick your favorite: <BR><INPUT TYPE=checkbox NAME="baseball” VALUE=“Like bball">Baseball

<BR><INPUT TYPE=checkbox NAME="hockey" VALUE=“Like hockey">Hockey

<BR><INPUT TYPE=checkbox NAME="soccer" VALUE=“Like soccer">Soccer

Click Here for what it looks like:

Pick your favorite: - This is a string of characters the shows up before check box. input TYPE="checkbox" - Says create a checkbox within the form. NAME=“soccer" - a name (e.g., soccer) to the checkbox that will be passed to the email software. VALUE=“Like soccer" - Specifies the initial value of the control (all set to “like soccer”) Note: you can include a checked attribute that checks the box initially.

15David Lash

Radio Buttons: General FormatRadio Boxes - (just like checked boxes - click here)

http://www.depaul.edu/~dlash/website/radio1.html

How is <b><i>Web Site Design Going</i></b>: <br><input TYPE="radio" NAME="variable1" VALUE=“sleep">I get my extra sleep in class. <br><input TYPE="radio" NAME="variable1" VALUE=“lost">I get so confused I get lost trying to find my car after class. <br><input TYPE="radio" NAME="variable1" VALUE=“gaveup">I gave up and copy my answers from my neighbor.

<br><input TYPE="radio" NAME="variable1" VALUE=“great" checked> Great class can't wait for the movie.

Specifies to create a radio button

Logical name is “variable1”

Variable1 is “set” to “great” if this item is picked

16David Lash

Selection ListsHere is an example http://www.depaul.edu/~dlash/website/examle.html

Use <select> tag to create scrolling and pull-down pick lists.

<select name="extras" size="3" multiple> <option selected> Electric windows </option> <option> AM/FM Radio </option> <option> Turbo Charger </option>

</select> name = the label shown from the mail. size =number of selections shown multiple = allow multiple options to pick option = the option to pick options selected = pre-selected option.

17David Lash

Submit ButtonsSubmit - (send it on down - click here) http://www.depaul.edu/~dlash/website/radio1.html

<INPUT TYPE="submit" VALUE="Submit">

<INPUT TYPE="submit" SRC="button.gif">

Can also reset <INPUT TYPE="reset" VALUE="Erase">

<INPUT TYPE="reset" SRC="button.gif">

Create a submit button

Put this text on the button.

Use this gif image for button.

18David Lash

Putting it all together<html><head> <title>Survey Form</title></head><body><h1>Class Survey</h1><FORM METHOD="POST" ACTION="mailto:[email protected]"> Name: <INPUT TYPE=input NAME="Name" ><br>Class:<INPUT TYPE=input NAME="Class" ><br>Class Evaluation: <BR><INPUT TYPE=radio NAME="Eval" VALUE="Y">Great <BR><INPUT TYPE=radio NAME="Eval" VALUE="Y">Average <BR><INPUT TYPE=radio NAME="Eval" VALUE="Y">Fair <BR><INPUT TYPE=radio NAME="Eval" VALUE="Y">Poor<br>Comments:<INPUT TYPE=input NAME="Comments" ><br><INPUT TYPE="submit" VALUE="Submit"><INPUT TYPE="reset" VALUE="Erase"></form></BODY></HTML>

http://condor.depaul.edu/~dlash/extra/Webpage/examples/form1.html

19David Lash

Putting it all together<body><h1>Class Survey</h1><TABLE><FORM METHOD="POST" ACTION="mailto:[email protected]"><TR><TD> Name: </TD><TD> <INPUT TYPE=input NAME="Name" ></TD></TR><TR><TD> Class</TD><TD><INPUT TYPE=input NAME="Class" > </TD></TD></TR><TR><TD> Class Evaluation: </TD><TD> <INPUT TYPE=radio NAME="Eval" VALUE="Y">Great <INPUT TYPE=radio NAME="Eval" VALUE="Y">Average <INPUT TYPE=radio NAME="Eval" VALUE="Y">Fair <INPUT TYPE=radio NAME="Eval" VALUE="Y">Poor</TD></TR><TR><TD>Comments</TD><TD><INPUT TYPE=input NAME="Comments" ></TD></TR><TR><TD><INPUT TYPE="submit" VALUE="Submit"></TD><TD><INPUT TYPE="reset" VALUE="Erase"></TR></form></BODY> http://condor.depaul.edu/~dlash/extra/Webpage/examples/form2.html

20David Lash

In Summary

We spoke about What are forms? The Form tag and arguments How to create

Radio buttonsChecklistsSelection listsText boxesText areasSubmit buttons

How to format it all nicely.

21David Lash

Before We Leave

Homework Review

Test Review