Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

11.3 Adding Form Elements

Unless you've never used a computer before, the different user interface elements
available for HTML forms should look familiar: text fields where people can type in
information (their names, addresses, phone numbers, and so on); checkboxes for making
multiple-choice selections; and menus for picking items from a list. The Forms tab
of the Insert bar lets you create all of these elements and more (see Figure 11-2).

Forms collect information using a variety
of different interface elements
like text boxes, password fields,
and pull-down (also called pop-up)
menus. You can even add a File Field
to let visitors select and upload a file
to your site.

11.3.1 What All Form Elements Have in Common

The routine for adding form elements to your document always follows the same
pattern:

In the document window, insert a form (see Section 11.2).

Or, if the page already has a form, click inside its red border.

If a text field is the first element of the form, you can skip this step. As soon as you add a form element, like a field, checkbox, or pop-up menu, to a page that doesn't yet have a form, Dreamweaver asks if you'd like to add the proper form tag. Click the Yes button, and Dreaweaver automatically creates the red dottedline form boundaries (and, behind the scenes, the corresponding <form> tags). You should ALWAYS click the Yes button. A form field that isn't surrounded by the proper form tag won't work.

Click the appropriate button on the Insert bar (see Figure 11-2).

Alternatively, use the InsertForm submenu. You'll soon discover that every form
object on the Insert bar is also represented by a command on the Insert menu (for
example, InsertForm ObjectsText Field).

Instead of just clicking a form-element button on the Insert bar, you may prefer to drag it off the tab and into a specific position on your Web page. This trick works with any of the user controls on the Insert bar, not just text fields.

Type a name for the freshly minted (and still highlighted) form element into the
Property inspector's name box (see Figure 11-5).

Dreamweaver automatically names the fieldfor example, it might propose
textfield, textfield1, and so on. It's a good idea, however, to give the field a new,
unique name, because this name will be submitted with the visitor's input as a
name/value pair.

The Property inspector looks slightly different
depending on the type of text field you choose.
Dreamweaver MX 2004 adds a new option to the
Property inspector. The Class menu (available to
all form elements) lets you apply a Cascading Style
Sheet class style (Section 6.2) to the selected form field.

Set the form element's properties.

For example, you may be able to specify its width, height, and other variables. The
following descriptions indicate which options are available.

11.3.2 Text Fields

When you need to collect a specific piece of information like a person's name, phone
number, or address, you'll use a text field (shown in Figure 11-4). Text fields accept
typed responses and are great for open-ended questions. They come in three different
flavors: single-line fields for short responses, password fields to hide user input from
snooping eyes, and multi-line fields for longer typed replies.

Once you've inserted the text field, you can adjust the following settings in the Property
inspector (see Figure 11-5):

Char Width. The width of a text field is measured in characters; so if you type 20
for the Char Width (character width), the text field will be as wide as necessary to
hold 20 typed letters. Be aware that the exact size can vary from browser to browser.
(You can use Cascading Style Sheets to set an exact width. You'll find an example
of this in the tutorial in Section 11.5.5.)

Type. A single line text field, of course, holds just one line of text. This is the most
common kind of text field; use it for collecting small pieces of information, like a
last name, social security number, or credit card number.

Multi-line fields provide a larger area for adding multiple lines of text. You'll need
to use this kind of text field when offering a place to type longer comments, such
as in a "Let us know what you think!" or "Nature of problem:" field.

Dreamweaver includes a separate button for adding a Multi-line text fieldcalled Textarea in HTML (see Figure 11-2).

Password fields hide a password being typed from the prying eyes of passing spies.
Whatever your Web visitor types appears as asterisks *** (Windows) or bullets
•••• (Mac) on the screen. (Of course, the information in the password field is still
transmitted as plain text, just like any other form field. The masking action takes
place only in your visitor's browser.)

Max Chars/Num Lines. Max Chars (maximum characters) is a text field that
lets you limit the number of characters that it will accept. It's a good way to help
ensure that guests type the right information in the right place. For instance, if
you use a field to collect the age of the visitor, odds are you won't need more than
3 characters to do it; very few 1,000-year-olds surf the Web these days (and those
who do don't like to reveal their ages).

When you've specified a Multi-line text field, the Max Chars box morphs into
the Num Line box. In this case, you can't limit the amount of text someone types
into the field. Instead this field lets you specify the height of the text field on the
screen.

NOTE

The limit you specify here affects only how tall the field will be onscreen. Your visitors can type as
many lines of information as they want. (A scroll bar will appear if the typing exceeds the size of the box
you've specified with the Num Lines option.)

Wrap. The often-confusing Wrap property specifies what happens when your
visitor types right to the edge of the text box. (Of course, it applies to Multi-line
text fields only.)

The Default value varies from browser to browser; you can't rely on it to produce
consistent results for all visitors.

The Off setting prevents sentences from wrapping inside the text field. When the
typed text exceeds the width of the field, a horizontal scroll bar appears at the bottom
of the field, and the text scrolls to the left. The text remains on a single line
until the visitor hits Enter or Return. You'll almost never want to use this option,
because it forces your visitor to scroll not only up and down, but left and right,
too, to see everything she's typed.

The last two options create a text field that works like most people would expect:
when the typing reaches the edge of the box, it automatically wraps to the next
line. To your visitor, there's no visual difference between the Virtual and Physical
options; these wrapping styles differ only in the way they format the text when
it's transmitted.

The Virtual setting displays line breaks only on the screen, in your visitor's browser;
when the text is actually submitted, it will appear as a single line (unless said visitor
manually inserted line breaks by pressing Enter or Return). If you create the
field using the Physical setting, on the other hand, the browser inserts line breaks
at the end of each line as it wraps. When transmitted, the text maintains these
line breaks.

In general, the Virtual setting is the best approach. It doesn't insert artificial line
breaks and maintains the integrity of the typist's input.

Init Val. Here, you can specify the Initial Value of the fieldstarter text that automatically
appears in the field, so that it won't be empty when the visitor begins
completing the form. You can use this feature to include explanatory text inside the
field itself, such as "Type your name in this box" or "Example: (212) 555-1212."

NOTE

If the page is one of the dynamic file types Dreamweaver works withASP, ASP.NET, PHP, Cold Fusion,
or JSPyou'll also see a small lightning bolt to the right of this box. This button lets you add dynamic datainformation
drawn from a databaseto the text field. (In-depth coverage of this feature starts in Section 23.3.1.)

After you've finished tweaking the text field's properties, don't forget to type a text
label next to the field in your document window to let your site's visitors know what
the text field is for. Short labels like "First Name," "Phone Number," or "Type your
comments here" will do just fine.

11.3.3 Checkboxes

Checkboxes (see Figure 11-4) are simple and to the point; they're either selected or
not. They're great for multiple-choice questions in which your visitor is allowed to
select more than one item in a group. For example, suppose you produce three different
email newsletters that you send out each month. In your form, you might include
some text"Check the boxes for the newsletters you'd like to receive"and three
corresponding checkboxes, so that each visitor can sign up for only the newsletters
he wants.

Once you've added a checkbox to a form, you can set up these options for it in the
Property inspector (Figure 11-6):

POWER USERS' CLINIC Giving Order to Your Forms If you're not careful, creating forms can quickly lead to visual chaos. The different shapes and sizes of text boxes, radio buttons, and other form objects don't naturally align well with text. One solution: Use tables to get a handle on the appearance of your forms. In the first picture above, form elements were added next to the text on each line, forcing your eye to follow a prominent zigzag pattern created by the form's text boxes. The result is not only ugly, but also hard to read. In the second picture, a table made of 2 columns and 13 rows (one row for each question) organizes the text and form elements into two columns. Notice that the text next to each form element aligns to the right, creating a clean edge that effectively mirrors the edge created by the form fields. To make this work most effectively, set each text field to the same width, using the Char Width property or Cascading Style Sheets (see Section 11.5.5 for an example of this). When using this technique, add the <form> tag first, insert the table inside the form's dotted red boundaries, and then add form elements inside the table. If you make a table first and then try to insert a form, Dreamweaver will only let you add it to a single cell of the table. See Chapter 7 for more on creating tables.

Checked Value. You're specifying here the information that, if your visitor turns
on this checkbox, will be submitted when the form data is sent to your processing
program. It doesn't necessarily have to match the checkbox's label (which you'll
create in a subsequent step); it could, instead, transmit some special coded response
to your processing application. Your visitors will never actually see this information.

Initial State. If you like, your checkbox can be already checked when your Web
page first appears. You may have seen this setup on sites that require you to sign
up for some service. Usually there's a checkboxalready checkeddown near the
bottom of the form, with fine print like this: "Check here if you want to get daily,
unsolicited email from our marketing department."

NOTE

As with many form elements, your checkbox can respond to information it retrieves from a database.
The Dynamic button on the Property inspectoronly available when you're working on a dynamic page (ASP,
PHP, and so on)lets you set the checkbox state (Checked or Unchecked) based on data in a database.
(See Section 23.3.1 for details.)

After adjusting the Property inspector, don't forget to return to the document window
to add a text label next to the field. Let people know what the checkbox is for: "Yes, sign
me up!" for example. Finally, you may want to insert another checkbox. Checkboxes
don't have to come in groups, but they often do.

The actual value of a
checkbox is defined by
the Checked Value property.
(The Dynamic button
is used for dynamic
pages only.)

11.3.4 Radio Buttons and Radio Groups

Radio buttons, like checkboxes, are very simple (see Figure 11-4); they're either selected
(represented on screen as a solid circle) or not (an empty circle).

But unlike checkboxes, radio buttons restrict your visitor to making only one choice
from a group, just like the radio buttons on an old-style automobile dashboard (or, if
you're too young to remember those car radios, like the buttons on a blender). Radio
buttons are ideal for multiple-choice questions. For example, "What is your income:
A. $10-35,000, B. $35-70,000, C. $70-100,000, D. None of your business."

You can set up these options for a radio button in the Property inspector (Figure
11-7):

Checked Value. This is the information that the form will submit when your visitor
selects this button. Once again, it doesn't necessarily have to match the radio
button's onscreen label.

Initial State. Often, when a form page first loads, one radio button in each set is
preselected. To do your visitors this timesaving courtesy, turn on Checked for the
button that holds the default valuethe one they'll choose most often.

Of course, if making a choice here is optional, then you can leave all of the buttons
unselected by setting their initial states to Unchecked. However, once somebody
does select a radio button, only the Reset button can make them all unselected
again (see Section 11.3.7 for information on creating a Reset button).

Radio buttons
offer answers to
a single multiplechoice
question.

Radio buttons come in groups; only one button in the group can be selected at the
same time. To achieve this effect, every button in the same group shares the same
name (although they should have different Checked values). If, when testing your
page, you notice that you can select more than one radio button at a time, you must
have given them different names. (Consider using Dreamweaver's Radio Group object,
described next. It acts as a wizard that simplifies the process of creating a group
of radio buttons.)

The final step in creating radio buttons is to add text labels for the entire group and
each button. Simply click in the document window and type, just as you'd add any
text to the page. Your whole-group-of-buttons label may take the form of a question
("How would you like to pay?"); the labels for the individual buttons might say, for
example, "Visa," "MasterCard," and "I.O.U."

11.3.4.1 Radio Group.

Although creating a group of radio buttons using the Radio Button object is easy,
Dreamweaver MX includes the Radio Group object to make it even simpler. The Radio
Group object provides a single dialog box for creating a group of radio buttons and
their labels in one fell swoop. To use it:

On the Insert bar, click the Radio Group button (see Figure 11-8).

The Radio Group window appears.

Type a name in the Name field.

This name covers all radio buttons in the group, saving you the trouble of typing
the name for each button yourself.

In the Label column, click on the top Radio label. Type a label for the first button.

This label will appear next to the button onscreen.

Hit the tab key to jump to the Value column for that button and type a value for
the first button.

This is the "checked value" of the button. Type what you want to be passed to the
Web server when somebody selects this button and submits the form.

The Radio Group dialog box
lets you quickly add multiple
radio buttons to a page. The
buttons form a single group
that lets visitors select one
of a group of options.

Repeat steps 3 and 4 for the second button in the group.

You can create additional radio buttons by clicking the + button. Follow steps 3
and 4 for each additional button you add in this way.

Select a layout option for the group.

Dreamweaver puts each radio button in the group on its own line. You can choose
whether Dreamweaver uses a line break (<br> tag) to separate each line, or whether
it uses a tableone radio button per row.

Don't care for either of these options? Pick one anyway. You can always redesign
the layout later.

Click OK to add the radio group to your page.

The radio buttons and their labels are essentially text and buttons on the screen.
You can move the buttons around, change their labels, and alter each button's
properties in the Property inspector.

11.3.5 Pull-down Menus and Lists

While checkboxes and radio buttons both provide ways to offer multiple choices, you
should consider them only when there are relatively few choices. A form can quickly
become overcrowded with buttons and boxes if there are too many options to choose
from. The beauty of lists and pull-down menus (usually called pop-up menus on the
Macintosh) is that they offer many choices without taking up a lot of screen space.
(Figure 11-9 shows an example.)

Once you've inserted a menu or list object onto your document window, here's how
to adjust the Property inspector settings:

Type. Menus and lists differ both in appearance (see Figure 11-9) and in function,
as described in a moment. Click the one you want (Menu or List).

Top: A menu is a single
compact line; a list can
take up any number of
lines on the page.

Bottom: Save visitors
time by filling in the
Initially Selected field.

Height. A list can be a single line tall (in which case you may as well use a menu),
or many lines (allowing your visitors to see a number of choices at once). The
number you type into the Height box (available for lists only) should reflect the
amount of space you wish the list to take up on the page. A vertical scroll bar will
appear automatically if the height you specify here is smaller than the number of
items in the list.

Allow multiple. Here's a key difference between menus and lists: If you turn on
this option, a visitor can select more than one item from a list, just by pressing the
Ctrl () key while clicking different options in the list.

List Values. This button opens the List Values dialog box (see Figure 11-10), where
you build the list of options in your list or menu. Each item is composed of two
parts: a label (the text that actually appears in the menu or list on the Web page),
and the value (the information that gets submitted with the form, which isn't
necessarily the same thing as the label).

To use this dialog box, type an item label. Press Tab (or click in the Value column)
and then type the value, if you like. (See Figure 11-10 for details.)

Including a value is optional; if you don't specify one, your form will submit the
item's label as the value. Still, setting up a separate value is often useful. Imagine
that you've designed a pull-down menu on an ecommerce site, so that your visitors
can select the month of their credit card's expiration. Figure 11-10 shows what
the items for such a pull-down menu might look like: The names of the months
would appear on the menu, but when a visitor selects, say, April, the number 4 is
what the form actually transmits to your form-processing program.

Since computer programs are often more comfortable with numbers than names
and humans often the exact oppositeit makes more sense to use numbers for
list values in this case.

Another example: When offering your visitors a pop-up menu of products from
which to choose, the label might be the human-friendly name of the product, like
"Blue Wool Cap." The value would be the model number that your form-processing
program can understand, like XSD1278.

Using the + button, you can
add an item to the end of a
list; when you click in the Value
column of the last item of the
list, pressing Tab creates a new
list item. To delete an item,
select it and click the - button.
You can move an item higher
or lower in the list of options by
selecting the option and then
clicking the up or down arrow
buttons. Like radio buttons,
pop-up menu and list items
always flock togethernobody
ever creates just one.

Dynamic values. Dreamweaver MX can also create a dynamic menu, where the
labels and values of the menu come from a database. This optionavailable only
when you insert a menu into one of the dynamic page types described in Part VI
of this bookis great when the menu items change frequently, as they would in
a list of employee names, for example. This feature is described in Section 23.3.3.

Click OK when you're finished building your menu or list. You can always return to
this screen and edit the list of options. To do so, click the menu or list in the document
window and then click the List Values button on the Property inspector. You return
to the dialog box shown in Figure 11-10.

As with other form elements, you can, and probably should, add some explanatory
text alongside the list or menu in the document window.

11.3.6 File Field

Receiving responses to checkboxes, radio buttons, and pull-down menus is all well and
good, but what if you'd like your visitors to submit something a little more meatylike
an entire file? Imagine a bulletin-board system, for example, that would allow guests
to post JPEG images of themselves, or upload word processing documents to share
with others. They can do just that, thanks to the File Field field (see Figure 11-2)and
a little magic from your Web server.

Before you get carried away with the possibilities the File Field offers, you'll need to do
a little research to see whether you can use it on your Web site. Although Dreamweaver
makes it easy to add a field for uploading image files, text files, and other documents,
you'll need to check with the administrator of your Web server to see if anonymous file uploads are permitted (some servers don't allow this kind of activity for fear of
receiving viruses or overly large files). Then, of course, you'll have to ensure that the
program that processes the form is programmed to do something with the incoming
filestore it somewhere on the server, for instance.

When you click the File Field button on the Insert bar (or choose InsertForm Objects
File Field), Dreamweaver inserts a text field and a Browse button; together, they
constitute a single File Field. When you click either one, you highlight both.

The Browse button, once it's posted on the Web and visible in somebody's browser,
opens up the standard Windows or Macintosh Open File dialog box, permitting your
visitor to navigate to and select a file for uploading.

The Property inspector offers only two settings to change (other than specifying a
more creative name):

Char Width. The width of a text field is measured in characters; if you type 20 for
the character width, the field will be 20 characters wide.

Max Char. Leave this blank, as shown in Figure 11-11.

Your File Field isn't finished until you've added a label to it in the document window,
something like "Click the Browse button to select a file for uploading."

Avoid the Max Chars Field. It's intended
to limit the number of characters that
the field will acceptwhich could pose
a problem if it prevents the full path to
the file from appearing. In that case, the
browser might not upload the file at all.

11.3.7 Hidden Field

Most form elements are designed to accommodate interaction from your visitors:
clicking radio buttons, typing into text fields, and making choices from menus, for
example. But there's one kind of field that your visitors won't even know about and
will never see: the hidden field.

Why, you're probably asking, would you need to submit a value you already know?
Hidden fields are intended to supply information to the programs that process
formsinformation that the program has no other way of knowing. For example,
most Web hosting services offer a generic form-processing program that collects
information submitted with a form and emails it to a selected person. But how does
the program know who to email the data to? After all, it's a generic program that's used
by hundreds of other people. The solution: a hidden field that stores the information
required for the program to properly process the formemail=me@mydomain.com,
for example.

To insert a hidden field, click the Hidden Field button on the Insert bar, or choose
InsertFormHidden Field. A gold shield icon appears on the page (this is Dreamweaver's
symbol for HTML, which won't be visible in Web browsers). Use the Property
inspector to give the field a name and a valuethat is, the value that will get submitted
to your form-processing program (in example above, your email address).

NOTE

The gold shield indicating a hidden field appears only if the Hidden Form Fields box is turned on in
the Invisible Elements category of the Preferences window (Section 1.3.5) and if Invisible Elements is turned on
in the View menu (ViewVisual AidsInvisible Elements).

11.3.8 Buttons

No form is complete without a Submit button for your Web visitors to click as a fi-
nal step (see Figure 11-2). Only then do their responses set out on their way to your
form-processing application. Another button worth including is a Reset button, which
your visitors can click when they've filled out a form and realize they've made an
error. The Reset button clears all of the form entries and resets all of the form fields
to their original values.

The Property inspector controls (Figure 11-12) for a freshly inserted button are:

Label field. The label is the name that appears on the button. Dreamweaver proposes
Submit, but you're free to substitute Do It, Make It So, or Send my data on
its merry way.

For buttons, the label is the value that will be submitted like other form data; that's
why there's no separate Value field on the Property inspector. This quirk opens
up some interesting possibilities. You could, for example, include several Submit
buttons, each with a different label. Maybe you're creating a form for a database
application; one button might say Delete, while another says Edit. Depending on
which button your visitor clicks, the program processing the form would either
delete the record from the database or modify it.

Action. These three buttons govern what happens when somebody clicks your
button. A Submit button transmits the form data over the Internet to the formprocessing
program. A Reset form button sets all the fields back to their original
values. (This doesn't mean that the fields, checkboxes, or menu items are left blank,
unchecked, or unselected. Instead, they return to their initial values, which you
specified when creating these various controls. For example, if you set the Initial
State property of a checkbox to Checked, and your visitor unchecks the box and
then clicks the Reset button, a checkmark will reappear in the box.)

Setting the button's action to None means that clicking on the button has no effect
on the form. "Gee that's useful," you're probably thinking.

But although the button doesn't submit the data or reset the form's fields, you'll
need to choose the None option if you want to add interactivity to the button using
Dreamweaver's built-in Behaviors (see the next chapter). In this way, you can use
a common user interface elementthe 3-D beveled look of a form buttonto
trigger any of many different actions, like opening a new browser window, starting
or stopping a Flash movie, or popping up a message on the screen. If you're a
JavaScript programmer, you can use the button to activate your own programs.

You can also use a graphic as a Submit button, thanks to something called an Image Field, thus freeing you to be more creative with the look of the button itself. Click the Image Field button on the Insert bar, or choose InsertForm ObjectsImage Field, to select a graphic you want to use as a button. When a Web visitor clicks the image, it submits the form and all its data. (Unfortunately, Image Fields only do one thing: submit form data. They can't be used as form Reset buttons.)

Buttons have just
three properties:
Name, Label, and
Action.

11.3.9 Labels and Fieldsets

Two additional form items appear on the Insert bar: Labels and Fieldsets. Unfortunately,
neither are intended to work with Dreamweaver's Design view. They're
essentially just shortcuts for entering code into Code view.

11.3.9.1 The Label tag

The Label tag lets you associate a label with a particular form elementa checkbox
or text field, for example. Of course, you can always do that by placing plain text next
to a form element on the page. But because a Label tag is "attached" to a particular
form element, it's more helpful in explaining the function and layout of your form to
people who use assistive technologies like screen-reading software for the blind.

To use the label tag, select a form elementcheckbox, text field, or whateverand
click the Label button in the Forms tab of the Insert bar (see Figure 11-2). You've just
wrapped the form field in a <label> tag. Now, in Code view (Chapter 10), type text
within the tag on either side of the form field like this:

<label>Please type a password: <input name="password"
type="text" id="password"></label>

You can find more information on the <label> tag and how to use it with Dreamweaver's built-in HTML reference. Chose WindowReference to open the Reference panel. Then select Label from the Tag menu to see a detailed discussion and sample usage for this tag. (If you selected a <label> tag on the page before opening the Reference panel, the panel will automatically display information about the tag.)

11.3.9.2 The Fieldset tag

The Fieldset tag is another form-organization tool, this time intended to let you group
related form fields. For example, if you're creating an online ordering form, you can
organize all of the "ship to" informationaddress, city, state, zip, and so oninto
a single set. Again, this arrangement can help those using assistive technology to
understand the organization and intent of a form.

In many of the latest browsers, the Fieldset tag also has a visual benefit. Internet
Explorer 4 and above, Navigator 6 and other newer browsers display an attractive
border around fieldsets and add a useful label to identify the fields.

To use this tag, select the related form fields. They must be next to each other on
screen, and can be organized within other HTML elements like a table. Then click
the Fieldset button on the Insert bar (see Figure 11-2). Type a label for the fieldset in
the Label window that appears, and then click OK.

You won't see much of an effect in Dreamweaverjust the new label you typed. So
preview the page (F12) in a recent version of Internet Explorer, Mozilla, Opera, or Safari
to see the both the label and a border surrounding the form elements in the set.