chapter 9 quick links slide 2 performance objectives understanding forms planning forms creating...

73

Upload: francis-lee

Post on 17-Jan-2018

220 views

Category:

Documents


0 download

DESCRIPTION

Chapter 9 Quick Links Slide 3 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Performance Objectives  Understand forms and form objects.  Create forms and insert a table inside a form.  Create single-line, multiple-line, and password text fields.  Create hidden fields.  Create check boxes.  Create radio buttons and radio button groups.  Create menus.

TRANSCRIPT

Page 1: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating
Page 2: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 2

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Forms

DREAMWEAVER MX 2004

Page 3: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 3

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Performance Objectives Understand forms and form objects. Create forms and insert a table inside a

form. Create single-line, multiple-line, and

password text fields. Create hidden fields. Create check boxes. Create radio buttons and radio button

groups. Create menus.

Page 4: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 4

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Performance Objectives…/2

Create lists. Create jump menus. Use the image field form object to create

graphical form buttons. Insert a file field for file uploading. Create form Submit and Reset buttons. Attach Validate Form behaviors to forms

and form objects.

Page 5: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 5

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Understanding Forms Forms are created using paired form tags. The form tags define the form and contain

the form objects that form users will use to input data.

Input tags are used to insert form objects within the area defined by the form tags.

formtags

input tag

Page 6: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 6

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Understanding Forms…/2 Input tags contain type attributes that

indicate the type of form object being inserted.

Page 7: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 7

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Understanding Forms…/3 A Submit button must be added to the

form. You should also include a Reset button. When a form is submitted, the user’s

browser gathers the form answers and uses the URL specified in the form tag action attribute.

After the answers are processed, most scripts specify that an acknowledgment page be returned and opened specified by the form tag target attribute.

Page 8: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 8

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Form Tag AttributesAttribute Function

accept Specifies allowable file types for uploading when using the file input control.

accept-charset Tells the server which character sets it must accept from a client form.

actionSpecifies the URL that will direct the form to a CGI program or to an HTML page containing server-side scripts.

enctype Specifies a MIME type for the data being submitted with the form.

method Specifies whether a form will be submitted using GET or POST methods.

name Specifies a name for the form element.

target Specifies the window that an HTML document with form results will be loaded in.

Page 9: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 9

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Planning Forms Careful planning will save a lot of time and

will help ensure that your form gathers the information you are looking for.

Questions should be phrased as clearly as possible.

The choices for answering a question should be appropriate to the question being asked.

Make sure that the answers reflect all of the possible choices.

Labels for form objects should be clear. Questions should relate to form objects.

Page 10: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 10

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Planning Forms…/2 Clearly state the purpose of the questions. Instructions on how to complete the form

should be clear and easy to understand. Before a form is uploaded to a Web site, it

should be tested. Testing a form is a good way to make sure

that other users will understand your form and that the form will elicit the information you are seeking.

Page 11: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 11

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Planning Forms…/3 Consider including a privacy statement.

privacy statement with linkto detailed statement

Page 12: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 12

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Planning Forms…/4 One method for creating neat forms is to

use tables.

table used forform layout

form objectswithout table

Page 13: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 13

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Forms You can use Menu bar commands to create

forms and insert form objects.

click Insert

point to Form

select from submenu

Page 14: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 14

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Forms…/2 The Insert bar (Forms menu item or tab)

also can be used to insert forms and form objects.

FormText Field

Hidden Field

CheckboxTextarea

Radio ButtonRadio Group

List/MenuJump Menu

Image Field

File FieldButton

Label

Fieldset

Page 15: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 15

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Forms…/3 Dotted red lines represent the form borders. If the borders are not visible, click View

options on the Document toolbar, point to Visual Aids, and then make sure that there is a check mark beside Invisible Elements.

Page 16: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 16

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Forms…/4 A table can be inserted inside a form. Using a table affords better control over

form layout and design. If a form object is inserted outside a form, a

message appears. For best results, form objects should always

be contained inside form tags.

Page 17: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 17

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Forms…/5 The form can be selected by clicking its

border. The Form Property inspector then displays.

Page 18: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 18

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Form Property Inspector – Form name

A default name appears in the Form name text box.

This name is used for identification purposes with scripting languages.

If you type a new name, do not use spaces or special characters.

Page 19: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 19

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Form Property Inspector – Action

The Action text box is used to specify the path to the dynamic page or script that will be used to process the form.

Page 20: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 20

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Form Property Inspector – Method

The Method text box is used to specify the method for transmitting form data, GET, POST, or Default.

Page 21: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 21

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Form Property Inspector – Enctype

The Enctype text box is used to specify a MIME type for data submitted for processing.

The default setting is application/x-www-form-urlencode and is usually used with the POST method.

When you use a file upload form object, you should select multipart/form-data.

Page 22: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 22

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Form Property Inspector – Target

The Target text box selects the window that will be used to display data returned by the server processing the form.

The target names have the same function as they do in the other Property inspectors.

Page 23: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 23

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Text Fields Text fields allow form users to enter

alphanumeric data in a text box.

label text field

Page 24: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 24

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Text Fields…/2 When a form object is inserted, the Input

Tag Accessibility Attributes dialog box appears.

Page 25: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 25

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Text Fields…/3 The dialog box can be used to specify a label

and to indicate how the label is attached to the text field.

The dialog box also can be used to indicate an access key and a tab index.

Selecting a text field displays the Text Field Property inspector.

Page 26: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 26

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Text Field Property Inspector – TextField

Use the TextField text box to provide a unique name for the text field.

Page 27: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 27

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Text Field Property Inspector – Char width

The Char width text box default setting limits a text field’s visible length to 20 characters.

This has no effect on the information sent for processing.

If you want more characters to be visible, you can type a number greater than 20.

Page 28: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 28

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Text Field Property Inspector – Max Chars

The Max Chars text box can be used to specify a maximum number of characters that a user can enter.

Leaving this text box blank lets users enter an unlimited amount of characters.

Page 29: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 29

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Text Field Property Inspector – Single line and

Multi line Selecting the Single line radio button

creates a single-line text field. Selecting the Multi line radio button

displays the text field as a multiple-line text field.

Page 30: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 30

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Text Field Property Inspector – Wrap

When a multiple-line text field is created, the Wrap text box is enabled.

The Default setting prevents text from wrapping to a new line when the width of the text field is exceeded.

Off functions the same as Default. Virtual causes text to wrap to a new line

when the width of the text is exceeded. Physical allows text to wrap and also wraps

data sent for processing.

Page 31: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 31

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Text Field Property Inspector – Password

Clicking the Password radio button causes text entered in the text field to appear as bullets or asterisks.

This is not the same as encrypting information.

When the Password radio button is selected, the text field automatically appears as a single line.

Page 32: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 32

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Text Field Property Inspector – Init val

The Init val text box can be used to enter default text that will appear in the text field.

Default text is often placeholder text used to provide instructions.

Page 33: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 33

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Hidden Fields Hidden fields are used to transmit data that

is provided by the Web page, instead of data provided by the user.

A common use for hidden fields is to pass on instructions to a server, such as the e-mail address that processed form data should be sent to.

Hidden fields are not displayed in a browser, but they are visible in the Document window as a marker.

hidden field marker

Page 34: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 34

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Hidden Fields…/2 Selecting the marker displays the Hidden

Field Property inspector. You can type a name and a value for the

hidden field.

Page 35: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 35

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Check Boxes Selecting the check box displays the Check

Box Property inspector. You should enter a unique name in the

CheckBox name text box for scripting identification purposes.

The Checked value text box is used to enter a value.

The Checked radio button can be used to create a default answer.

Page 36: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 36

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Radio Buttons When radio buttons are inserted, they are

named radiobutton. When radio buttons have the same name,

only one of the radio buttons can be selected at a time.

If one of the two radio button names is changed, the buttons function like check boxes.

Page 37: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 37

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Radio Buttons…/2 Radio button groups are useful for

questions with only one correct answer in a list of possible answers.

The Radio Group dialog box allows you to choose whether you want radio buttons to be inserted using line breaks or a table.

Page 38: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 38

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Radio Buttons…/3 When an individual or grouped radio

button is selected, the Radio Button Group Property inspector is displayed.

This Property inspector is almost identical to the Check Box Property inspector, and it offers you the option of naming the radio button, specifying a value, and specifying an initial state.

Page 39: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 39

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Menus and Lists A menu displays a drop-down list when its

down-pointing arrow is clicked. A list allows users to use navigation arrows

to scroll through list items.

form menu

form list

Page 40: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 40

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Menus and Lists…/2

You can specify the number of items that will be visible in a list.

A list with a scroll bar is often used when there is not enough room on a page for a drop-down list to appear.

Lists also can be configured to allow users to select more than one item.

Selecting a list/menu form object displays the List/Menu Property inspector.

Page 41: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 41

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

List/Menu Property Inspector – List/Menu

The List/Menu text box can be used to provide a name for the list or menu for scripting identification purposes.

Page 42: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 42

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

List/Menu Property Inspector – List Values

Menu items and their values can be added by clicking the List Values button.

This button opens the List Values dialog box.

Page 43: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 43

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

List/Menu Property Inspector – Initially

selected The Initially selected list box displays the

menu items created for the list. Selecting one of these items causes it to be

the default item displayed when the menu is viewed in a browser window.

Page 44: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 44

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

List/Menu Property Inspector – Height

The Height text box is used to specify the number of items that will be displayed in a list without the need to scroll.

list with aHeight text box

setting of 3

Page 45: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 45

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

List/Menu Property Inspector – Allow multiple

The Allow multiple check box allows users to select more than one item in a list.

Page 46: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 46

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Jump Menus A jump menu has menu items that function

as hyperlinks. After inserting a jump menu, the Insert

Jump Menu dialog box opens.

Page 47: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 47

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Insert Jump Menu Dialog Box – Text

You can type jump menu items in the Text text box.

You can change the position of the items in the list by clicking the up- and down-pointing arrows.

Page 48: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 48

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Insert Jump Menu Dialog Box – Browse

You can click the Browse button to open the Select File dialog box.

You can use the Select File dialog box to browse and locate a file that will be linked to the list item.

Page 49: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 49

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Insert Jump Menu Dialog Box – Open URLs in

The Open URLs in list box lets you specify a window or frame that a linked file will appear in.

Page 50: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 50

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Insert Jump Menu Dialog Box – Menu name

The Menu name text box enables you to type a name for the jump menu.

Page 51: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 51

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Insert Jump Menu Dialog Box – Insert go button

after menu When selected, the Insert go button after

menu check box places a Go button to the right of the jump menu.

Page 52: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 52

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Insert Jump Menu Dialog Box – Select first item after

URL change The Select first item after URL change check

box should be selected if you want the jump menu to revert to displaying its default item after a selection has been made.

Page 53: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 53

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Editing Jump Menu Items Jump menu items can be edited by selecting

the jump menu and using the Jump Menu Property inspector.

To edit the jump menu behavior, go to the Behaviors panel to double-click Jump Menu Go.

Page 54: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 54

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Editing Jump Menu Items…/2

This opens the Jump Menu dialog box. This dialog box differs from the Insert

Jump Menu dialog box in that it does not contain a provision for inserting a Go button and lacks the Menu name text box.

Page 55: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 55

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Image Fields An image field is used to create a graphical

Submit button. After you have selected the image using the

Select Image Source dialog box, type submit button in the Image Field Property inspector ImageField text box.

You also can create an alternate description for the image.

Page 56: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 56

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating File Fields for File Uploads

The file field allows you to upload a file when a form is submitted.

Inserting a file field places a text box and Browse button in the document.

Page 57: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 57

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating File Fields for File Uploads…/2

Clicking the Browse button opens a Choose file dialog box used to browse and locate the file to be uploaded.

Page 58: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 58

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating File Fields for File Uploads…/3

Before inserting a file field, you must check with your server administrator to determine whether anonymous file uploads are permitted.

You should also find out about any special instructions necessary for making the file field work with the server.

The Form Property inspector Method text box should be set to POST.

The Max Chars text box should be left empty to ensure that a long file name will be accepted.

Page 59: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 59

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Creating Buttons Dreamweaver MX 2004 makes inserting

Submit and Reset buttons for forms very convenient.

After a button has been selected, the Button Property inspector appears.

Page 60: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 60

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Button Property Inspector – Action

The default Submit button can be changed to a Reset button by selecting it and then clicking the Reset form radio button.

When the form is viewed in a browser window, clicking the Reset button removes any data entered and restores the form to the way it appeared when it was first opened.

The None radio button can be used to create a button without any action.

Page 61: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 61

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Button Property Inspector – Label

The Label text box can be used to change the text that appears on a button.

Page 62: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 62

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Applying Labels to Form Objects

Clicking the Insert bar Label button wraps label tags around the form object.

If you have enabled the Form objects accessibility option in the Preferences dialog box Accessibility page, you already have the option of wrapping labels around form objects by using the Input Tag Accessibility Attributes dialog box.

The Label command or button does not add a for attribute or a label name, so those must be added in Code view or Code and Design view if desired.

Page 63: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 63

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Understanding the Fieldset Button

Fieldset tags are container tags that can be used to identify form objects dealing with related information.

Because the content of fieldset tags can be read by screen readers, their primary function is to improve accessibility for users with visual disabilities.

Page 64: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 64

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Understanding the Fieldset Button…/2

When the Fieldset button is clicked, the Document window changes to Code and Design view, and a Fieldset dialog box appears.

The dialog box contains a single Label text box that can be used to type text that can identify a group of form objects.

Page 65: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 65

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Attaching the Validate Form Behavior to Forms

You can attach a Validate Form behavior to a form object and/or a Submit button using the Behaviors panel.

The Validate Form behavior works only with text field form objects.

Every text field in a form must have a unique name for it to work properly.

When attached to a text field, the Validate Form behavior checks whether a user has entered data of the type specified.

Page 66: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 66

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Attaching the Validate Form Behavior to

Forms…/2 If the appropriate data was not entered, a

message box appears in the browser window when the user leaves the text field.

Page 67: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 67

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Attaching the Validate Form Behavior to

Forms…/3 The Validate Form behavior also can be

attached to a Submit button. The behavior operates when the Submit

button is clicked and determines whether text fields contain data as specified.

You can attach Validate Form behaviors to text fields and the Submit button at the same time.

This acts as a fail-safe measure, providing a reminder to users when they make a mistake in filling in a text field, and preventing them from submitting an incorrectly filled out form.

Page 68: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 68

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Attaching the Validate Form Behavior to

Forms…/4 The Validate Form behavior can be

attached to a text field by selecting the field, clicking the Behaviors panel Plus (+) button, and then clicking Validate Behavior from the drop-down list that appears.

Page 69: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 69

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Attaching the Validate Form Behavior to

Forms…/5 This opens the Validate Form dialog box.

Page 70: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 70

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

Attaching the Validate Form Behavior to

Forms…/6 The named fields in the form appear in the

Named fields list box. Clicking the Required check box indicates

that a value is required. One of the four Accept radio buttons can be

enabled to validate whether any data is acceptable (Anything), a number must be entered (Number), an e-mail address must be entered (Email address), or a number in a range must be entered (Number from).

Page 71: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 71

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

COMMANDS REVIEWHow do you insert a form?

click Insert

point to Form

click Form

Page 72: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 72

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

COMMANDS REVIEW…/2How do you insert form objects?

click Insert

point to Form

select from submenu

Page 73: Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating

Copyright 2005, Paradigm Publishing Inc.

Chapter 9

Quick Links

Slide 73

Performance ObjectivesUnderstanding FormsPlanning FormsCreating FormsCreating Text FieldsCreating Hidden FieldsCreating Check BoxesCreating Radio ButtonsCreating Menus and ListsCreating Jump MenusCreating Image FieldsCreating File Fields for File UploadsCreating ButtonsApplying Labels to Form ObjectsUnderstanding the Fieldset ButtonAttaching the Validate Form Behavior to FormsCommands Review

COMMANDS SUMMARY

Insert form Insert, Form, Form

Insert form objects Insert, Form, select from submenu