web page design forms! website design. objectives what forms can do the attributes of the form tag...

Web Page Design

Forms!

Website Design

Objectives

• What forms can do• The Attributes of the form tag• Using

• Textboxes• Textareas• Checkboxes• Radio buttons• Select options

• Formatting Forms Cleanly

Competency Objectives

• Can use forms to 1. Send data via email 2. Create basic form elements3. Format forms properly4. Send forms to server side program

Competency Alert:You need to

know this!

Common Problem Area!

People seem to forget this

HTML Forms

• HTML Forms are used to:• Gather survey information on web• Submit passwords • Structure queries on a database• Submit orders

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., ecnu)

Your machine

Web Server

HTML Form Elements

Text Box

Radio Buttons

Check Box

Select Box

Text Area

Submit/Reset button

Objectives

• What forms can do• The Attributes of the form tag• Using

• Textboxes• Textareas• Checkboxes• Radio buttons• Select options

• Formatting Forms Cleanly

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!

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.

• http://www.w3school.com.cn/tags/html_ref_httpmethods.asp

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.

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:hzhou@dec.ecnu.edu.cn">

• 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.

Form tag with mailto: attribute

This form has the following form tag: <form method=post action=mailto:hzhou@ecnu.edu.cn>

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

Tag elements within <FORM>… </FORM>

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

Your Form Here

(Checklists, Text Boxes, Drop-down lists,

buttons, etc)

</FORM>

Objectives

• What forms can do• The Attributes of the form tag• Using

• Textboxes• Textareas• Checkboxes• Radio buttons• Select options

• Formatting Forms CleanlyCompetency

Alert:You need to

know this!

Creating Text Boxes

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

Text Box

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=“Zhou Hong" )

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=Zhou+Hong

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

Text Area: FormatJust like text box but bigger.

<textarea NAME="UNIT_COMMENTS"

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

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

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

Check Boxes

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

Checkbox

Check Boxes: General Format

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

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

<BR><INPUT TYPE=“checkbox” NAME="soccer" VALUE=“yes">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.

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.

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.

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.

Objectives

• What forms can do• The Attributes of the form tag• Using

• Textboxes• Textareas• Checkboxes• Radio buttons• Select options

• Formatting Forms Cleanly

Putting it all together<html>

<head>

<title>Survey Form</title>

</head>

<body>

<h1>Class Survey</h1>

<FORM METHOD="POST" ACTION="mailto:hzhou@dec.ecnu.edu.cn">

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

Cleaning it up with Tables<body>

<h1>Class Survey</h1>

<TABLE>

<FORM METHOD="POST" ACTION="mailto:hzhou@ecnu.edu.cn">

<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!

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

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 $name <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.

Summary

• What forms can do• The Attributes of the form tag• Using

• Textboxes• Textareas• Checkboxes• Radio buttons• Select options

• Formatting Forms Cleanly

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.

One possible solution

<html><head><title> form check </title></head><body><form action=mailto:hzhou@dec.ecnu.edu.cn 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>

Hands On Lab 2

• Create an HTML form that looks like the following: