Designing and Creating Forms

1
Designing and Creating Forms

• SI 539
• Fall 2004
• Sandra L. Bartlett

2
What is a form?

• A conversation between the page and the user
• User may not understand the question
• Major Religious Superior of Congregation
• Answer space is too big or too small
• Unsure what answer is appropriate
• What medicine do you take?
• Jump from one topic to another and back
• Order of topics
• "Hi" before "Bye", Name before Address

3
Designing for usability

• Identify the users critical tasks
• 80 of users use 20 of features
• Optimize around those tasks
• Put controls front and center
• Minimize number of steps
• Eliminate distractions
• Move rarely used things to another page
• Make separate views for groups with different
  critical tasks
• What is most important to you may not be what is
  most important to the user

4
Tricks to help

• Reduce the number of fields
• Use drop down menus, instead of making the user
  type in the information (states)
• Group and label like fields (address)
• Put most important fields at the top
• Place buttons after the fields on which they act
  (submit, reset)
• Align fields and field labels
• Before After

5
Do it with tags!!

• ltform action"fileWithWhatToDo"
• method"post"gt
• lt/formgt
• ltform action"doFred.php"
• method"post" gt
• lt/formgt
• A form is a container for controls.

6
Action attribute

• ltform action"fileWithWhatToDo"
• method"post"gt
• lt/formgt
• Value is a URI that references a server side form
  handler
• .php (fred.php)
• .asp (fred.asp)
• .cgi (fred.cgi)
• .jsp (fred.jsp)
• etc.

7
Method attribute

• ltform action"fileWithWhatToDo"
• method"post"gt
• lt/formgt
• Value tells how to send data from the form to the
  server
• GET / POST
• GET is the default
• GET
• Appends ? to the action URI and then lists the
  names and values of the form elements in pairs
• New URI is sent to the server
• POST
• Name/value pairs are sent in the message body of
  an HTTP POST request

8
Which Method to use?

• GET
• You can see the data in the URL
• Limit on how many characters can be sent
• Can't send files
• Can be bookmarked and revisited
• POST
• You can't see the data in the URL
• No limit on how much info can be sent
• Can send files
• Can't be bookmarked or revisited

9
Where is the info in PHP?

• On projects (newest)
• _POSTcontrolName
• _GETcontrolName
• On skinner (old)
• controlName (not preferred)
• HTTP_POST_VARScontrolName
• HTTP_GET_VARScontrolName

10
Forms contain controls

• Buttons
• Regular, submit, reset
• Checkboxes
• Radio buttons
• Menus
• Text input
• Hidden
• etc.

11
Example

• Form
• PHP form handler
• Note names of controls in HTML must follow PHP
  naming rules in this class no matter what you see
  in example code.

12
INPUT controls

• ltform action"fred.php" method"post"gt
• ltinput type"text" name"aName"gt
• ltinput type"password" name"aName"gt
• ltinput type"hidden" name"aName"gt
• ltinput type"submit" name"submit"
• value"submit"gt
• ltinput type"reset" name"reset"
• value"reset"gt
• lt/formgt

13
INPUT controls (checkbox)

• ltform action"fred.php" method"post"gt
• ltinput type"checkbox" name"check1"
• value"c1"gtCheckbox1 text
• ltinput type"checkbox" name"check2"
• value"c2"gtCheckbox2 text
• Checkbox3 text
• ltinput type"checkbox" name"check3"
• value"c3"gt
• lt/formgt
• (Lets the user see meaningful values, but return
  the primary key.)

14
INPUT controls (radio buttons)

• ltform action"fred.php" method"post"gt
• ltinput type"radio" name"group"
• value"r1"gtRadio1 text
• ltinput type"radio" name"group"
• value"r2"gtRadio2 text
• Radio3 text
• ltinput type"radio" name"group"
• value"r3"gt
• lt/formgt
• (all radio buttons in a group must have the same
  name)

15
TEXTAREA

• ltform action"fred.php" method"post"gt
• lttextarea name"aTextArea"
• rows"2"
• cols"20"gt
• lt/textareagt
• lt/formgt

16
SELECT control (drop down menu)

• ltform action"fred.php" method"post"gt
• ltselect size"1" name"aName"gt
• ltoption value"v1"gtChoice onelt/optiongt
• ltoption value"v2"gtChoice Twolt/optiongt
• ltoption value"v3" selectedgt
• Choice
  Threelt/optiongt
• lt/selectgt
• lt/formgt
• (Size 1 and not multiple makes it display as a
  drop down menu)

17
SELECT (list box)

• ltform action"fred.php" method"post"gt
• ltselect size"3" name"aName"gt
• ltoption value"v1"gtChoice onelt/optiongt
• ltoption value"v2"gtChoice Twolt/optiongt
• ltoption value"v3" selected"true"gt
• Choice Threelt/optiongt
• lt/selectgt
• lt/formgt
• (size gt 1, so options are displayed in a list
• size number of options, so no scroll bar)

18
SELECT (list with scroll bar)

• ltform action"fred.php" method"post"gt
• ltselect size"2" name"aName"gt
• ltoption value"v1"gtChoice onelt/optiongt
• ltoption value"v2"gtChoice Twolt/optiongt
• ltoption value"v3" selected"true"gt
• Choice Threelt/optiongt
• lt/selectgt
• lt/formgt
• (size gt 1, so options are displayed in a list
• size lt number of options, so scroll bar appears)

19
SELECT (multi-line)

• ltform action"fred.php" method"post"gt
• ltselect size"3" name"aName" multiple"t"gt
• ltoption value"v1"gtChoice onelt/optiongt
• ltoption value"v2"gtChoice Twolt/optiongt
• ltoption value"v3" selected"true"gt
• Choice Threelt/optiongt
• lt/selectgt
• lt/formgt
• (multiple, so options are displayed in a list.
• Name must be an array so it can return all the
  values.
• Hold down the shift key and click to select more
  than one option)

20
Example

• Form
• PHP form handler
• Note names of controls in HTML must follow PHP
  naming rules in this class no matter what you see
  in example code.

21
PHP for forms

• The names of your HTML controls are used to index
  the _POST array nameaName -gt _POSTaName
• The values of the variables come from the user
  interaction with the control, or defaults you
  have set using the value or selected attributes
  in the HTML
• Use them to make queries to your database

22
Example

• Choose a table to view
• ltform action"fred.php" method"post"gt
• ltselect size"3" name"fred"gt
• ltoption value"t1"gtt1lt/optiongt
• ltoption value"t2"gtt2lt/optiongt
• ltoption value"t3"gtt3lt/optiongt
• lt/selectgt
• lt/formgt
• query "select from _POSTfred"
• result mysql_query(query)

23
More on Forms after the midterm

• Be sure all the information has been entered
• Be sure all the entered information is the right
  type