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

FORM


Form basic
 A form is form-processing program running on the
Web server. The operations of the form follow those
steps:
– First, someone fills out a form on your Web page,
and then clicks the Submit button.
– Next, the Web browser transmits the form data
over the Internet to a program on your Web
server.
– The program collects the data and does
something with it, Finally, the Web server returns
a page to the Web visitor.


Form basic
In the document window, click where you’d like to
insert the form.
On the Insert panel, select the Forms category.
Click the Form icon.
Click the dotted red line to select the form, type a
name for your form into the “Form ID” field.
Into the Action field, type a URL, or select a file by
clicking the tiny folder icon
Select method in the method pop-up menu.


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:
• Name

• Checked value.
• Initial state.
Radio Group: provides a single dialog box for
creating a group of radio buttons.


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.
– Action:
• Submit form: transmits the form data over
the Internet
• Reset form: sets all the fields back to their
original values.
• None: activate your own programs.


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