1 web page design forms! website design. 2 objectives l what forms can do l the attributes of the...

1

Web Page Design

Forms!

Website Design

2

Objectives

What forms can do The Attributes of the form tag Using

» Textboxes» Textareas» Checkboxes» Radio buttons» Select options

Formatting Forms Cleanly

3

Competency Objectives

Can use forms to 1. Send data via email

2. Create basic form elements

3. Format forms properly

4. Send forms to server side program

Competency Alert:You need to

know this!

Common Problem Area!

People seem to forget this

4

HTML Forms HTML Forms are used to:

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

5

HTML Forms When submit a form it can be sent:

» to a script (program) on a web server for processing

» via email to a valid email address

HTML Form

Submit

Program or database

on Webserver (e.g., condor)

Your machine

Web Server

6

HTML Form Elements

Text Box

Radio Buttons

Check Box

Select Box

Text Area

Submit/Reset button

7

Objectives




8

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://indellible-learning.com/stuff.cgi”

METHOD=”POST”> . . ---(Your FORM elements

here) .

</FORM> Competency Alert:You need to

know this!

9

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.

10

Some Form Tag Examples Send the results to a program:

<FORM METHOD=POST ACTION="http://mysite/receivedata.php"><FORM METHOD=POST ACTION=“receivedata.php">

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

» Most sites don’t use email address submission:– The email you get is a messy email. – Requires client (end-user) to have correct default email defined– Usually want more control, (e.g., send email to multiple addresses or

log email to a file, or hide precise location of where email goes)

Look over internet for this program

Sends results via email to this email address.

Look in my current directory.

11

Form tag with mailto: attribute

This form has the following form tag: <form method=post action=mailto:[email protected]>

Pre-addressed mail is created. Here with Mozilla email (even though it is not set up properly on this computer.)

12

Tag elements within <FORM>… </FORM>

<FORM METHOD=“POST” ACTION="save_it.php”>

Your Form Here

(Checklists, Text Boxes, Drop-down lists,

buttons, etc)

</FORM>

13

Objectives



Formatting Forms Cleanly Competency Alert:You need to

know this!

14

Creating Text Boxes

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

Text Box

15

Text Box: Format

Please 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" )

16

Text Box: Format

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

Where » Name= The name identifier passed to the email program.

Note: If the above was sent via the mailto: attribute, the resulting email would look like:fullname=Dave+Lash

17

Text Box: Password

Can also create a password text box that: » Works like a text box except input is shown as asterisks,

– For example: *******

Note: Most sites do NOT use this mechanism to transmit password because:

• It transmits passwords in clear text over internet (anyone who can tap physical network can view it.

Please Enter you password <Input Type=“password" SIZE=20 MAXLENGTH=30 Name=“user_password">

18

Text Area: FormatJust like text box but bigger.

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

19

Check Boxes

Check boxes are pre-defined optional

input that you check.

Checkbox

20

Check Boxes: General FormatPick 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

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.

21

Radio Buttons: General Format Radio Boxes –

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

For radio buttons to cooperate together, must use same name.

22

Selection Lists 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.

23

Submit Buttons Submit - (send the form)

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

Can also reset <INPUT TYPE="reset" VALUE="Erase This Form“>

Create a submit button

Put this text on the button.

24

Objectives




25

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>

Common Problem Area!

People seem to forget this

26

Cleaning it up with Tables<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>

Competency Alert:You need to

know this!

27

Sending Data to Scripts

As previously mentioned can set up forms to send data to scripts: » Need to know URL of script on webserver» Need to coordinate webserver script with

your form– E.g.,if use <input type=text name=in_name>

then the receiving script must be looking for

input variable in_name

28

Example form sending to script

<html><head> <title>Forms Example </title> </head><body><form action=receiving.php method=post>Please pick a color . . . <input type=radio name=color value=red> Red<input type=radio name=color value=blue> Blue<input type=radio name=color value=green> Green<br>

Please provide your name<Input Type="name" sIZE=20 MAXLENGTH=30 Name="yourname"><br><Input Type="submit">

</form></body></html>

<html><head> <title>Password Example </title></head><body><?php $color = $_POST[color]; $name = $_POST[yourname];

print "<font color=$color> "; print "Hello, your name is $yourname <br>"; print "</font>";?></body></html>

receiving.php

set_color.html

Name must match

Note: for this example to work correctly both set_color.html and receiving.php must be in the same folder on the webserver.

29

Summary




30

Hands-on Lab

Create an HTML form that looks like the following: » Use the mailto form attribute to mail the

results to an email address.

31

One possible solution

<html><head><title> form check </title></head><body><form action=mailto:[email protected] method=post> Pick you favorite sports Team: <input type=radio name=sport> Bears<input type=radio name=sport> Cubs<input type=radio name=sport> Sox<input type=radio name=sport> Bulls<br><input type=text name=name> Your Name<br> <INPUT TYPE="submit"> </form></body></html>

32

Hands On Lab 2

Create an HTML form that looks like the following:

1 web page design forms! website design. 2 objectives l what forms can do l the attributes of the...

Documents

forms html forms

text box slide

form arguments

valid email address

format forms

formatting forms cleanly

following form tag

form tag examples