Interactive Web Site Forms

1
Interactive Web Site Forms
7

• Macromedia Dreamweaver MX

2
In this chapter, you will
7

• Learn about the Document Object Model (DOM),
  forms, and form elements
• Lay out and develop forms that accept user input
• Insert a jump menu with a Go button, so that
  users can easily select and open a new Web page
• Validate form data fields
• Use the Behaviors panel to give users feedback
  when they submit a form

3
Forms and Form Processing
7

• Forms use two components
• HTML source code that describes the form
• Either a server-side application or a client-side
  script that processes the form data
• Process
• Client requests an HTML page
• Web server downloads form to the client
• User fills in and submits the form
• Server-side program processes the data

4
Forms and Form Elements
7

• Forms on Web pages resemble paper forms
• HTML provides elements to hold form information
• Form elements are more limited than those found
  in C and Visual Basic
• Makes HTML forms easier to understand and use

5
Forms, Form Elements, and the DOM
7

• The Document Object Model (DOM) is a set of
  standards being defined by World Wide Web
  Consortium (W3C)
• Defines the attributes of HTML pages that can be
  programmed and manipulated
• The DOM provides a hierarchical structure

6
Forms, Form Elements, and the DOM
7

• An HTML document can hold more than one form
• Each form can hold one or more form elements
• An HTML form is processed in its entirety when
  the user clicks the forms Submit button
• The forms method attribute defines the
  processing task

7
Inserting Forms and Form Elements
7

• Form elements can be inserted via the Forms tab
  on the Insert bar or the Form and Form Object
  commands on the Insert menu

8
Inserting Forms and Form Elements
7
9
Inserting Forms and Form Elements
7

• According to the DOM, form elements belong inside
  forms
• Elements are usually processed when a form is
  submitted
• First insert the form, then insert the form
  elements inside it
• Dreamweaver does not allow you to insert form
  elements outside of a form
• Asks if you want to create a new form

10
Inserting Forms and Form Elements
7
11
Form Properties
7

• Dreamweaver surrounds the form with a red dotted
  line, an invisible element that viewers dont see
  in the browser window
• To view borders, click on the View, Visual Aids,
  Invisible Elements menu items

12
Form Properties
7

• The Property inspector displays the following
  properties for Forms
• Form Name
• Action server-side application name
• Method how the form data is handled
• GET appends form values to URL defined in the
  Action
• POST sends the form values in the body of a
  message together with a request to POST the data
  to the server URL defined in the Action
• Default uses the browsers default

13
Form Element Properties
7

• Forms tab on the Insert bar has a button for
  inserting a form and 13 form elements
• Form elements also have events and methods as
  defined in the DOM
• An event is some user activity that initiates an
  action
• An action is usually a block of JavaScript code

14
Form Element Properties
7

• Methods are also available to form elements
• focus() means form element is active and able
  to receive input
• blur() means form element does not have focus
• select() tracks elements selected on a list or
  menu
• Each form element has its own properties

15
Form Element Properties
7

• Two types of text fields
• Text field
• Text area
• Dreamweaver treats both as the same form element
• Password fields are text fields that display
  asterisks instead of echoing the text that the
  user types
• Contents of the password field are NOT encrypted

16
Form Element Properties
7
17
Form Element Properties
7

• Single line text field properties are
• TextField name of the field
• Char Width maximum number of characters
  displayed
• Type single line, multiline, or password
• InitVal initial block of text displayed in the
  field
• Text areas have two additional properties
• Num Lines how many lines to use for display
• Wrap how the multiline wraps
• virtual wraps the text in the display but not in
  the submitted data
• physical wraps the text in the display and in the
  submitted data

18
Form Element Properties
7

• Text areas have two additional properties
• Num Lines how many lines to use for display
• Wrap how the multiline wraps
• virtual wraps the text in the display but not in
  the submitted data
• physical wraps the text in the display and in the
  submitted data

19
Form Element Properties
7
20
Form Element Properties
7

• Hidden fields allow you to create elements that
  do not display on the form, but can hold
  information posted with the form
• Hidden fields have names and values that are
  passed to the server

21
Form Element Properties
7

• Checkboxes provide a yes/no choice
• Each checkbox has its own name and is independent
  of any other checkboxes
• The checkbox properties are
• Checkbox name of the checkbox
• CheckedValue value of the checkbox when it is
  checked used in form processing
• Initial State checked or not when the form
  first loads

22
Form Element Properties
7

• Radio buttons allow a user to select among a
  group of choices
• Radio buttons in a group are mutually exclusive
  only one can be selected at a time
• You can insert radio buttons one at a time or as
  a group

23
Form Element Properties
7
24
Form Element Properties
7

• Radio button properties include
• RadioButton the name of the radio button
• Buttons that are created as part of a group have
  the same name
• Checked Value the value of the radio button
  when it is selected
• Initial State state the button is initialized
  to

25
Form Element Properties
7

• List/menu makes setting up a scrolling list or
  pop-up menu easy

26
Form Element Properties
7

• List/menu properties include
• List/Menu list or menu name
• Type scrolling list or pop-up menu
• Height indicates how many items are displayed
  in a list at one time
• Selections Allow multiple allows more than one
  item to be selected from a list
• List Values opens the List Value dialog box for
  entering/editing list or menu items
• Initially Selected default value for the list

27
Form Element Properties
7
28
Form Element Properties
7

• Jump Menu is a Dreamweaver defined form element
  that inserts a drop-down menu
• Each jump menu item on the list of choices jumps
  to a predefined URL
• Action occurs when the user presses Enter or
  clicks an accompanying Go button
• When inserted, Dreamweaver displays a dialog box
  that lets you enter text names and URLS for each
  item

29
Form Element Properties
7
30
Form Element Properties
7

• Image fields work just like submit buttons
• They use images you insert on the form

31
Form Element Properties
7
32
Form Element Properties
7

• Image field properties include
• ImageField name of the image field
• W (Width)
• H (Height)
• Src source file for image
• Alt alternative text
• Align lets you align the graphic
• Edit Image launches the associated image editor

33
Form Element Properties
7

• A file field allows the user to attach a file
  stored on the users computer to the form and
  transmit it to the server

34
Form Element Properties
7

• Buttons are form elements essential for
  processing data
• Three types of form buttons
• Submit
• Reset
• Programmer defined
• Button field properties include
• Button name
• Label
• Action

35
Form Element Properties
7

• The label element is used to specify labels for
  controls that dont have implicit labels such
  as
• Text fields
• Checkboxes
• Radio buttons
• Menus

36
Form Element Properties
7

• Fieldset is a container tag for a logical group
  of form elements
• Allows you to group related form elements and
  labels
• Increases a forms accessibility
• Each fieldset has its own label

37
Layout and Development of Interactive Forms
7

• Form layout is important for the same reason page
  layout is important
• Increases the usability of the forms
• Tables are useful for aligning and balancing form
  elements

38
Behaviors in Dreamweaver
7

• A behavior includes an event and an action
• Events respond to user activity
• In Dreamweaver, an event initiates an action, a
  block of JavaScript code that does some task
• You can access the Behaviors panel by clicking
  Behaviors on the Window menu

39
Behaviors in Dreamweaver
7
40
Behaviors in Dreamweaver
7
41
Client-Side Scripting Feedback
7

• Form validation is an example of client-side
  feedback
• By writing your own JavaScript code you can give
  users other types of feedback
• For example, acknowledging that the user is
  submitting the form in a message box

42
Client-Side Scripting Feedback
7
43
Summary
7

• Understanding form elements and their DOM
  connections helps you to understand how forms
  work
• Form elements provide Web site visitors with a
  lot of options for interactivity
• Form processing usually occurs at the form level,
  when the user finishes filling out the form and
  clicks on the Submit button

44
Summary
7

• You can lay out forms using tables, layers, or
  both
• Dreamweaver can be used to automate form
  validation for individual fields
• Dreamweaver supplies standard Submit and Reset
  buttons, and also supports image buttons
• Dreamweaver manages text fields for input you
  can create single or mutliline text boxes

45
Summary
7

• Dreamweaver lets you generate jump menus as
  navigation tools
• The Behaviors panel lets you program events
  available to each element available on a Web page