Bài giảng Thiết kế web Dreamweaver CS4 - Chapter 6: Form

In Dreamweaver, form input types are called form objects. Form objects are the mechanisms that allow users to input data. You can add the following form objects to a form: Text fields, note, buttons, check boxes, radio group, pull-down menus and lists,...

FORM

– The program collects the data and does something with it, Finally, the Web server returns

a page to the Web visitor

Adding Form Elements

In the document window, insert a form

Of the Insert panel’s Forms category, click the appropriate button (form element)

In the Input Tag Accessibility Attributes window, type an ID, Type a label, and then select label options

Type an “Access key” and a Tab Index number, and then press OK

In the Property inspector, set the form element’s properties

Adding Form Elements

Text Fields:

– Char Width: The width of a text field is

measured in characters (default 20 Char)

– Type: have three different types of text fields

• A single-line text field

• Multiline fields (Text area)

• Password

Adding Form Elements

– Max Chars/Num Lines: Max Chars lets you limit

the number of characters the field accepts

– Init Val: specify the Initial Value of the field

– Disabled and Read-only: prevents visitors from

clicking into the field, or even selecting any text that’s already there and any data in it isn’t submitted when the form is submitted

Adding Form Elements

Checkboxes and Checkbox Groups

– Checked value: specify the information that’s

submitted

– Initial state: checkbox be filled when your Web

page first appears

Adding Form Elements

Checkbox Groups: On the Insert panel, click the

Checkbox Group button

Adding Form Elements

– In the Name field, type a name

– In the Label column, click the top Checkbox label

– Hit the Tab key to jump to the Value column for that checkbox, and then type a value for the first checkbox

– Repeat for the second checkbox in the group

Adding Form Elements

Radio Buttons: radio buttons restrict your visitor

to making only one choice from a group

– In the Property inspector, you can set up the following options for a radio button:

Adding Form Elements

Pull-Down Menus and Lists: offer many choices without taking up a lot of screen space

Properties of the Menus and List:

• Type

• Height

• Allow multiple

• List Values

Adding Form Elements

File Field: you easily add a field for uploading

image files, text files, and other documents

– When you click the File Field button on the Insert panel’s Forms ,Dreamweaver inserts a

text field and a Browse button; together, they

constitute a single File Field

Adding Form Elements

Buttons:

– Submit button for your Web visitors to click as a

final step Only then do their responses set out

on their way to your form-processing application

– The Reset button clears all the form entries, and

resets all the form fields to their original values

Adding Form Elements

– Button name: provides the first half of the

“name/value” pair that’s sent when the form is submitted

– Value is the label that appears on the button

Adding Form Elements

<label> Tag: lets you associate a label with a

particular form element, like a checkbox or text field

<fieldset> Tag: is a form organization tool, intended to let you group related form fields

Validating Forms

Spry Validation Basics: The Spry validation

widgets let you validate input received via a text field, a text area, a pull-down menu, a checkbox, or

a group of radio buttons

The basic process for all form validation widgets is the same:

– Insert the Spry widget (seven types): select the form element on the page,

– On the Insert panel, clicking the appropriate Spry form button

Validating Forms

Assign a validation requirement: Use the

Property inspector to assign the type of validation

to the field

Select when validation occurs:

– A browser validates form fields when the

visitor submits the form

– Or when someone clicks the Submit button on the form, the JavaScript code in the Web page checks to make sure everything was filled out correctly

Validating Forms

– You dictate when a field is validated by turning

on one or both of the Property inspector’s

“Validate on” checkboxes

– Dreamweaver lets you validate a form field when the field is “blurred,” “changed,” or both

Validating Forms

– Modify the error messages:

• in Design view, select the text, and then type

a new error message

Validating Forms

Formatting Spry Error Messages and Fields:

– Open the CSS Styles panel  click the Current button

– Make sure the Cascade button is pressed

– Select the Spry validation widget

– From “Preview states” menu, select the preview state you wish to format

– In the document window, click inside the error message or select the form field you wish to

format Edit the style’s properties

Validating Forms

Spry Text Field includes Validation types:

– None This option is the default setting: no

validation

– Integer Use this option to verify that a whole

number was typed into the field

– Email This option looks for a validly formatted

email address

– Date: To specify the format of the day

– Time This option validates a time in one of

several different formats

Validating Forms

– Custom validation:

• Select a Spry text field widget,

• From the Property inspector’s Type menu, choose Custom, and then into the Pattern field, type the pattern

Validating Forms

Spry Text Area:

– Specify content is required;

– Dictate the minimum and maximum number of characters

Validating Forms

Spry Checkbox: The Spry validation checkbox lets

you make sure a particular checkbox has been selected

– To add a single Spry checkbox, choose Insert ➝Form ➝ Spry Validation Checkbox,

– Or, on the Insert panel’s Forms category, click the Spry Validation Checkbox button

– The Spry checkbox that appears on the page already has the “Required” option selected in the Property inspector

Validating Forms

To create a group of related Spry checkboxes:

– Insert a Spry checkbox

– Click the label text

– Press the <label> tag disappears from the Tag selector

– Insert a regular (non-Spry) checkbox

Validating Forms

Spry Select: validates the selection of pull-down

menus, and has two options to determine whether

or not a selection in the menu is valid

– Do not allow: To prevent a visitor from submitting the form without selecting options

Validating Forms

Spry Password: This helpful tool lets you enforce

a set of rules for naming passwords so that visitors don’t create easily hacked credentials

Validating Forms

Spry Confirm: works only with text fields, and

pops up an error message, if the value in the text field doesn’t match the value in another text field

on the page To use this widget

– First, you add a text field That field is the original “Type your email” or “Create a password” box

– Next, from the Insert Panel’s Forms category, add the Spry Confirm widget, or choose Insert ➝Form ➝ Spry Validation Confirm

Validating Forms

Spry Radio Group: To add a Spry Radio Group,

use the Insert panel’s Forms category or Insert ➝

Form ➝ Spry Validation Radio Group

– Use the Property inspector to set up the validation options

– The other two options—Empty Value and Invalid Value—produce error messages when a

particular radio button is selected

Validating Forms

– In either of these boxes, enter the value you assigned when you first created the radio button Selecting the radio button with the specified value produces one of two errors when the form is submitted

– For the Empty Value, the error informs the

visitor that he hasn’t made a selection

– For the Invalid Value, the error announces that the choice he made was invalid