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
What forms can do The Attributes of the form tag Using
» Textboxes» Textareas» Checkboxes» Radio buttons» Select options
Formatting Forms Cleanly
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
What forms can do The Attributes of the form tag Using
» Textboxes» Textareas» Checkboxes» Radio buttons» Select options
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
What forms can do The Attributes of the form tag Using
» Textboxes» Textareas» Checkboxes» Radio buttons» Select options
Formatting Forms Cleanly
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
What forms can do The Attributes of the form tag Using
» Textboxes» Textareas» Checkboxes» Radio buttons» Select options
Formatting Forms Cleanly
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: