Collecting%20Data%20with%20Forms

1
Chapter 9
Collecting Data with Forms
2
Planning and Creating a Form

• A form on a web page consists of form objects
  such as text boxes or radio buttons into which
  users type information or from which you make
  selections.

3
Planning and Creating a Form

• Form labels identify the form object by its
  function, such as a First Name label beside a
  text box that collects the users first name.

4
Planning and Creating a Form

• Forms should be organized with the information in
  a logical order that will make sense to users.
• The most important information should be at the
  top.

5
Planning and Creating a Form

• Forms should have good contrast between the color
  of the text and the color of the form background.

6
Planning and Creating a Form

• The Form button in Dreamweaver can be used to
  create a form object on your web page.

7
Planning and Creating a Form

• Two methods to process the information collected
  in a form
• server-side scripting
• client-side scripting

8
Planning and Creating a Form

• Server-side scripting uses applications that
  reside on your web server and interact with the
  form information collected.

9
Planning and Creating a Form

• Client-side scripting means that the users
  computer processes the form. The script resides
  on the web page, rather than on the server.

10
Planning and Creating a Form

• You can process form information several ways
• Have the information collected from the form and
  emailed to the contact person on the website.

11
Planning and Creating a Form

• You can process form information several ways
• Have form data stored in a database to use at a
  later date.
• Have the application both collect the form data
  in a database and send it in an email message.

12
Planning and Creating a Form

• You can process form information several ways
• Have the form data processed instead of stored.
• Create forms that make changes to your web page
  based on information users enter.

13
Planning and Creating a Form

• You can use the Property inspector to specify the
  application that you want to process the form
  information and how you want it sent to the
  processing application.

14
Planning and Creating a Form
Form controls in the Property inspector
Form
Form properties
Form ID property
Method property
Action property
Form ID property
15
Planning and Creating a Form
Property inspector showing properties of selected
form
Method specifying data transfer method
Form name text box
Method list arrow
16
Planning and Creating a Form

• The Action property in the Property inspector
  specifies the application or script that will
  process the form data.
• The Method property specifies the HyperText
  Transfer Protocol (HTTP) used to send the form
  data to the web server.

17
Planning and Creating a Form

• The GET method specifies that ASCII data
  collected in the form will be sent to the server
  appended to the URL or the file included in the
  Action property.

18
Planning and Creating a Form

• The POST method specifies that the form data
  should be sent to the processing script as a
  binary or encrypted file, allowing you to send
  data securely.

19
Planning and Creating a Form

• The Form name property specifies a unique name
  for the form. The name can be a string of any
  alphanumeric characters and cannot include spaces.

20
Planning and Creating a Form

• The Target property lets you specify the window
  in which you want the form data to be processed.

21
Planning and Creating a Form

• CGI is one of the most popular tools used to
  collect form data.
• CGI allows a web browser to work directly with
  the programs that are running on the server and
  also makes it possible for a website to change in
  response to user input.

22
Planning and Creating a Form

• CGI programs can be written in the computer
  languages Perl or C, depending on the type of
  server that is hosting your website.

23
Planning and Creating a Form

• The resulting data is then stored in a database
  or sent to an email server, which then sends the
  information in an email message to a designated
  recipient.

24
Planning and Creating a Form

• You can use CSS or tables to help place page
  elements on a web page.
• You can also use CSS or tables to help lay out
  forms.

25
Planning and Creating a Form
Setting table and cell properties
26
Planning and Creating a Form

• To make sure that your labels and form objects
  appear in the exact positions you want on a web
  page, you can place them on the page using layout
  options such as div tags, tables, and lists.

27
Planning and Creating a Form
Setting table properties
Rows10
Columns2
Verify that these are blank
Top row header
28
Planning and Creating a Form

• When you create a form, you need to include form
  field labels so that users know what information
  you want them to enter in each field.

29
Planning and Creating a Form
Website with clear labels for form fields
30
Planning and Creating a Form

• You can add labels to a form using one of two
  methods
• type a label in the appropriate table cell of
  your form.
• use the Label button in the Forms category on the
  Insert panel to link the label to the form object.

31
Planning and Creating a Form

• With CSS3, many of the tags used to position
  table content are deprecated.
• If you use a table to position data in a form,
  you will need to create or modify CSS rules to
  format the labels and data fields, such as your
  horizontal and vertical alignment.

32
Working with Form Objects

• Form objects are the form components such as
  check boxes, text boxes, and radio buttons that
  allow users to provide information and interact
  with the website.

33
Working with Form Objects
Text field
Text area field
Menu list
Security challenge
Submit button
Website form with several form objects
34
Working with Form Objects

• Text fields are the most common type of form
  object and are used for collecting a string of
  characters, such as a name, address, password, or
  email address.
• A text area field is a text field that can store
  several lines of text.

35
Working with Form Objects
Form with single-line fields added
36
Working with Form Objects

• Text fields are the most common type of form
  object and are used for collecting a string of
  characters, such as a name, address, password, or
  email address.
• A text area field is a text field that can store
  several lines of text.

37
Working with Form Objects

• You can use check boxes to create a list of
  options from which a user can make multiple
  selections.
• A group of check boxes is called a check box
  group.

38
Working with Form Objects
Checkbox Group dialog box
Checkbox labels
Checkbox values
Layout using Line Breaks option
Checkbox Group dialog box
39
Working with Form Objects

• You can use radio buttons to provide a list of
  options from which only one selection can be
  made.
• A group of radio buttons is called a radio group.
  Each radio group you create allows only one
  selection from within that group.

40
Working with Form Objects
Checkbox Group dialog box
Second instance
Line breaks (ltbrgt tags) option button
Radio Group dialog box
41
Working with Form Objects

• Using hidden fields makes it possible to provide
  information to the web server and form-processing
  script without the user knowing that the
  information is being sent.

42
Working with Form Objects
Property inspector showing properties of selected
hidden field
Hidden Field text box
Hidden Field icon
Values
Hidden Field button
43
Working with Form Objects

• You can insert an image field into a form using
  the Image Field button on the Insert panel.
• You can use image fields to create buttons that
  contain custom graphics.

44
Working with Form Objects

• If you want your users to upload files to your
  web server, you can insert a file field.

45
Working with Form Objects

• All forms must include a Submit button, which
  users click to transfer the form data to the web
  server.

46
Working with Form Objects
New Submit and Reset buttons added to form
Button name text box
Button button
Value text box
Submit button
Reset button
47
Working with Form Objects

• You can also insert a Reset button, which lets
  users clear data from a form and reset it to its
  default values, or a custom button to trigger an
  action that you specify on the page.

48
Working with Form Objects

• Jump menus are navigational menus that let users
  go quickly to different pages in your site or to
  different sites on the Internet.

49
Working with Form Objects

• You can place a form label either before or after
  it by typing it directly on the form.
• If you only need words Yes and No beside two
  radio buttons, you can add the labels Yes and
  No using a form attribute called a label tag.

50
Working with Form Objects

• To obtain form controls designed for creating
  specific types of forms, such as online tests and
  surveys, you can visit the Adobe Marketplace
  Exchange, a central storage location for program
  extensions, also known as add-ons.

51
Working with Form Objects
Click to visit Dreamweaver Exchange
Using Adobe Marketplace Exchange
52
Testing and Processing a Form

• After you create a form, you should
• Test it to make sure that it works correctly and
  is easy to use.
• Verify that the fields are arranged to provide a
  logical flow of information, so the user is not
  confused about where to go next when completing
  the form.

53
Testing and Processing a Form

• Make sure that there is enough contrast between
  the form text and the table background so the
  text is readable.

54
Testing and Processing a Form

• When you are finished with your form, you should
  always have several people test it before you
  publish it.
• Then make any necessary changes based on any
  testing feedback that you receive and test it one
  final time.

55
Testing and Processing a Form
Link to feedback page
Viewing the feedback link