Web Page Design

1
Website Design

• Web Page Design
• Forms!

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
• Send data via email
• Create basic form elements
• Format forms properly
• 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

Your machine
HTML Form
Web Server
Program or database on Webserver (e.g.,
condor)
Submit
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 ltFORMgt
  and lt/FORMgt tags.
• Within these tags, you place various HTML form
  elements, such as text areas, check boxes, and
  radio buttons.
• For example,
• ltFORM ACTIONhttp//indellible-learning.com/stuff
  .cgi METHODPOSTgt
• .
• . ß---(Your FORM elements here)
• .
• lt/FORMgt

Competency Alert You need to know this!
9
Two primary ltFORMgt arguments

• ltFORM
• ACTIONhttp//perl-pgm.com/cgi-bin/stuff.cgi
• METHODPOSTgt
• 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
• ltFORM METHODPOST ACTION"http//mysite/receivedat
  a.php"gt
• ltFORM METHODPOST ACTIONreceivedata.php"gt
• Send the results via email
• ltFORM METHOD"POST ACTION"mailtodlash_at_condor.d
  epaul.edu"gt
• Most sites dont 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
Look in my current directory.
Sends results via email to this email address.
11
Form tag with mailto attribute
This form has the following form tag ltform
methodpost actionmailtodlash_at_indelible-learning
.comgt
Pre-addressed mail is created. Here with Mozilla
email (even though it is not set up properly on
this computer.)
12
Tag elements within ltFORMgt lt/FORMgt

• ltFORM METHODPOST ACTION"save_it.phpgt
• Your Form Here
• (Checklists, Text Boxes, Drop-down lists,
• buttons, etc)
• lt/FORMgt

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 ltInput Type"Text"
  SIZE20
• MAXLENGTH30 Name"fullname"gt
• 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 ltInput Type"Text"
  SIZE20 MAXLENGTH30 Name"fullname"gt
• 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 fullnameDaveLash
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

Please Enter you password ltInput Typepassword"
SIZE20 MAXLENGTH30 Nameuser_password"gt

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

18
Text Area Format

• Just like text box but bigger.
• http//www.depaul.edu/dlash/website/TextInput.htm
  l
• lttextarea NAME"UNIT_COMMENTS"
• ROWS4 COLS70 gtYour comments herelt/textareagt
• Name The name identifier passed to the email
  program. (E.g., nameUNIT_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 Format

• Pick your favorite
• ltBRgtltINPUT TYPEcheckbox NAME"baseball
  VALUELike bball"gtBaseball
• ltBRgtltINPUT TYPEcheckbox NAME"hockey"
  VALUELike hockey"gtHockey
• ltBRgtltINPUT TYPEcheckbox NAME"soccer"
  VALUELike soccer"gtSoccer

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. NAMEsoccer" - a name (e.g., soccer)
to the checkbox that will be passed to the email
software. VALUELike 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 ltbgtltigtWeb Site Design Goinglt/igtlt/bgt
• ltbrgtltinput TYPE"radio" NAME"variable1"
  VALUEsleep"gt
• I get my extra sleep in class.
• ltbrgtltinput TYPE"radio" NAME"variable1"
  VALUElost"gt
• I get so confused I get lost trying to find my
  car after class.
• ltbrgtltinput TYPE"radio" NAME"variable1"
  VALUEgaveup"gtI gave up and copy my answers from
  my neighbor.
• ltbrgtltinput TYPE"radio" NAME"variable1"
  VALUEgreat" checkedgt Great class can't wait for
  the movie.

For radio buttons to cooperate together, must use
same name.
Variable1 is set to great if this item is
picked
Specifies to create a radio button
Logical name is variable1
22
Selection Lists

• Use ltselectgt tag to create scrolling and
  pull-down pick lists.
• ltselect name"extras" size"3" multiplegt
• ltoption selectedgt Electric windows lt/optiongt
• ltoptiongt AM/FM Radio lt/optiongt
• ltoptiongt Turbo Charger lt/optiongt
• lt/selectgt
• 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)
• ltINPUT TYPE"submit" VALUE"Submit It"gt
• Can also reset
• ltINPUT TYPE"reset" VALUE"Erase This Formgt

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

• lthtmlgt
• ltheadgt
• lttitlegtSurvey Formlt/titlegt
• lt/headgt
• ltbodygt
• lth1gtClass Surveylt/h1gt
• ltFORM METHOD"POST" ACTION"mailtodlash_at_condor.de
  paul.edu"gt
• Name ltINPUT TYPEinput NAME"Name" gt
• ltbrgtClassltINPUT TYPEinput NAME"Class" gt
• ltbrgtClass Evaluation
• ltBRgtltINPUT TYPEradio NAME"Eval"
  VALUE"Y"gtGreat
• ltBRgtltINPUT TYPEradio NAME"Eval"
  VALUE"Y"gtAverage
• ltBRgtltINPUT TYPEradio NAME"Eval"
  VALUE"Y"gtFair
• ltBRgtltINPUT TYPEradio NAME"Eval"
  VALUE"Y"gtPoor
• ltbrgtCommentsltINPUT TYPEinput NAME"Comments" gt
• ltbrgtltINPUT TYPE"submit" VALUE"Submit"gt
• ltINPUT TYPE"reset" VALUE"Erase"gt
• lt/formgt
• lt/BODYgt

Common Problem Area! People seem to forget
this
26
Cleaning it up with Tables

• ltbodygt
• lth1gtClass Surveylt/h1gt
• ltTABLEgt
• ltFORM METHOD"POST" ACTION"mailtodlash_at_condor.de
  paul.edu"gt
• ltTRgtltTDgt
• Name lt/TDgtltTDgt ltINPUT TYPEinput NAME"Name"
  gt
• lt/TDgtlt/TRgtltTRgtltTDgt
• Classlt/TDgtltTDgtltINPUT TYPEinput NAME"Class"
  gt lt/TDgt
• lt/TDgtlt/TRgtltTRgtltTDgt
• Class Evaluation lt/TDgtltTDgt
• ltINPUT TYPEradio NAME"Eval" VALUE"Y"gtGreat
• ltINPUT TYPEradio NAME"Eval"
  VALUE"Y"gtAverage
• ltINPUT TYPEradio NAME"Eval" VALUE"Y"gtFair
• ltINPUT TYPEradio NAME"Eval" VALUE"Y"gtPoor
• lt/TDgtlt/TRgtltTRgtltTDgt
• Commentslt/TDgtltTDgtltINPUT TYPEinput
  NAME"Comments" gt
• lt/TDgtlt/TRgtltTRgtltTDgt
• ltINPUT TYPE"submit" VALUE"Submit"gt
• lt/TDgtltTDgt

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 ltinput typetext namein_namegt
• then the receiving script must be looking
  for
• input variable in_name

28
Example form sending to script
set_color.html
lthtmlgt ltheadgt lttitlegtForms Example lt/titlegt
lt/headgt ltbodygt ltform actionreceiving.php
methodpostgt Please pick a color . . . ltinput
typeradio namecolor valueredgt Red ltinput
typeradio namecolor valuebluegt Blue ltinput
typeradio namecolor valuegreengt
Green ltbrgt Please provide your name ltInput
Type"name" sIZE20 MAXLENGTH30
Name"yourname"gt ltbrgt ltInput Type"submit"gt lt/for
mgt lt/bodygt lt/htmlgt
Name must match
receiving.php
lthtmlgt ltheadgt lttitlegtPassword Example
lt/titlegt lt/headgt ltbodygt lt?php color
_POSTcolor name _POSTyourname
print "ltfont colorcolorgt " print "Hello,
your name is yourname ltbrgt" print
"lt/fontgt" ?gt lt/bodygt lt/htmlgt
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
lthtmlgt ltheadgtlttitlegt form check
lt/titlegt lt/headgt ltbodygt ltform actionmailtodlash0
1_at_yahoo.com methodpostgt Pick you favorite
sports Team ltinput typeradio namesportgt
Bears ltinput typeradio namesportgt Cubs ltinput
typeradio namesportgt Sox ltinput typeradio
namesportgt Bulls ltbrgt ltinput typetext
namenamegt Your Name ltbrgt ltINPUT TYPE"submit"gt
lt/formgt lt/bodygt lt/htmlgt
32
Hands On Lab 2

• Create an HTML form that looks like the
  following