Adobe Dreamweaver CS3 Unleashed- P11 docx

As you can see from Figure 9.2, numerous form objects exist in an effort to collect different types of
information from the seller. Text boxes, like the one used in the search form, are used to collect general
information such as first name, last name, address, city, email, and so on. Drop-down menus are used to
allow the user to choose from a predefined set of states and countries, and from lists of months, days, and
years for birthdays. In addition, if you scroll further down the page, a check box is used to collect a value
indicating that yes, the user accepts the user agreement when checked, or if left unchecked, no the user
does not agree with the user agreement. Finally, a button object is used to submit the information to eBay
for processing. (We'll get to processing the content of forms and form objects in Part V, "Dynamic Web Page
Development") Both models (buyer and seller) demonstrate forms and form objects used in a real-world
website that millions of people use daily. Of course, forms and form objects aren't exclusive to eBay.
Companies all over the web use forms and form objects so that users can interact with the services they
offer on their websites.
Even with this explanation, you still might be unclear about the differences between forms and form objects.
To clear up any misconceptions between the two, think of the process of registering for a driver's license at
your local Department of Motor Vehicles (DMV). You wait in line until it is your turn, you tell the usually
expressionless attendant that you'd like to register to receive a new driver's license, in which case, she
hands you a form. Think about what that form contains. Paper-based forms, like the one from the DMV,
contain places for you to enter your name, address, city, ZIP, phone number, car model, car type, and so
on. The places on that driver's license registration form can be considered form objects. You fill out the form
(that is, you fill in all the form objects, or fields) and hand it back to the attendant for processing. The Web
is no different: Forms on the web contain form objects and, in fact, are reliant on one another.
Now that you have an idea about what forms and form objects are and when and where they are used, let's
actually build them within the context of our project. Throughout the rest of the chapter, we'll dissect forms
and the various types of form objects you can use when working with forms in Dreamweaver.


Working with Forms and Form Objects
As I mentioned in the previous section, the addition of form objects begins with the addition of a form. You
can think of the form as the container for its form objects. When the user clicks the Submit button, the
entire form, along with all the data contained within the form objects in the form, are sent for processing. In
fact, the form contains numerous properties that tell the browser where and how the form will be sent for

processing when the Submit button is clicked. Before we jump too far ahead of ourselves, however, let's add
a simple form to a web page. To do this, follow these instructions:
1.
Open the contactus.html page located in the root of the project folder. For the most part, the design
has already been created for you. For now, we're concerned with adding a form and form objects so
that potential customers can contact the company.
2.
As a change of pace, we'll use the Forms category in the Insert bar to work with forms and form
objects. If your Insert bar is not open, choose Window, Insert. When the Insert bar opens, switch to
the Forms category.
3.
Place your cursor just under the Contact Us subheader image.
4.
Click the Form icon within the Insert bar to add a new form to the contactus.html page. As you can
see in Figure 9.3, the form is indicated by the red dashed box. Because a form is considered an
invisible element, you can choose to display it or hide it by enabling or disabling the Invisible Elements
option located in the Visual Aids menu in the Document toolbar.
Figure 9.3. The form is added to the page and is evident by the red dashed box.
[View full size image]
You'll also notice from Figure 9.3 that the form also changes the Property inspector. Like all elements that
you add to the Document window, the Property inspector tailors itself to support property modifications for
the form. The properties that become available include the following:
Form name— Enter a value into this text box to uniquely identify your form. Although this value isn't
required, it is highly recommended that you include one, especially when working with client-side
scripting languages such as JavaScript (covered in more detail as Behaviors in the next chapter). We'll
leave our form name as the default form1.
Action— Enter the path to the page that will process the data when the user submits the form. I'll
save the long-winded explanations for Part V, but for now, know that every form's submission requires
some sort of data collection endpoint. That endpoint is generally a database, text file, XML file, or even
a straight email to a recipient. To get the form into that data collection mechanism, an intermediary

file (containing functions with code) must process the form and perform the insertion into the data
collection mechanism. For this chapter, that page has been created for you. The path, and the value
you'll want to enter into this text box, is />Target— Select one of the four options from this menu to associate the action (mentioned previously)
with a particular link target. We'll leave ours blank.
Class— When working with CSS, select a class from this menu to set the overall style of the form.
We'll leave ours blank.
Method— Select one of the two options from this menu to set how the form should be sent to the
intermediary file for processing. Two options are available from this menu: POST and GET. POST,
which is the Dreamweaver and browser default, embeds the form within HTTP headers, essentially
unseen by anyone. Nine times out of ten, you'll use POST in your development efforts because it's a
much more secure alternative to GET. However, you can use GET to send the contents of all form
elements within the form, appended as parameters within the URL of the page. This is beneficial when
working with searches: The user can bookmark a recent search because the submitted search value is
appended to the URL of the page. As you can see from the callout in Figure 9.4, eBay uses GET when
submitting searches for processing. This allows the user to later bookmark popular searches.
Figure 9.4. Use GET within search forms to allow users to bookmark recent searches.
[View full size image]
Searches are about all you want to use the GET method for. Because of the potential security
vulnerability and the fact that URL strings are limited to 8,192 characters, longer forms, especially
those containing sensitive data such as usernames, passwords, and credit card information, should be
sent using POST. We'll leave our form's method set to POST.
Note
Even POST isn't entirely secure. When using POST, form data is embedded into the HTTP
headers—it is not encrypted. An attacker can still compromise sensitive information using an
HTTP packet sniffer. For this reason, sensitive data should always be transmitted using a secure
connection (SSL).
Enctype— Choose an option from this menu to specify the MIME encoding type of the data submitted
to the server for processing. By default, forms are sent using the application/x-www-form-urlencode
type, but it's not uncommon to use the multipart/form-data type, especially when uploading files using
the File Field form object. We'll leave this menu as is.

Now that you have an idea about how forms are inserted into the page, let's direct our attention to inserting
form objects into the form. The form objects you can insert in Dreamweaver include the following:
Text Fields, Password Fields, and Textarea
Check Boxes
Radio Buttons and Radio Groups
Lists and Menus
Buttons
File Field
Image Field
Hidden Field
Jump Menu
Text Fields, Password Fields, and Textarea
Arguably the most widely used form object is the Text Field. Because the Text Field is so versatile, it's the
perfect option when you need to create a plain text box, password text box, or a multiline text box where
users can enter large amounts of information. To see the Text Field in action, follow these steps:
1.
Place your cursor within the form and insert a new table by choosing the Table option from the Insert
menu. Give the new table 12 rows, 2 columns, a width of 479 pixels, and a border thickness, cell
padding, and cell spacing of 0 pixels. We'll use this table to cleanly position text labels and form
objects on the page.
2.
In the first six cells of the first column, add the text Name:, Company Name:, Address:, City:,
State:, and ZIP:, respectively.
3.
Place your cursor into the first cell in the second column and insert a new Text Field form object by
clicking the Text Field icon in the Insert bar (or choosing Insert, Form, Text Field). The new Text Field
will appear similar to Figure 9.5.
Figure 9.5. Add a new Text Field form object to the first cell in the second column of
the table.
[View full size image]

Note
After you've clicked to insert the Text Field, by default, Dreamweaver displays Accessibility options
as they relate to form objects. Remember, if you don't find yourself working with Accessibility
features at this point, this dialog can be turned off by navigating to the Accessibility category of the
Preferences dialog, (available from Edit, Preferences/Dreamweaver, Preferences) and unchecking the
Form objects check box. More information on accessibility can be found in Appendix A,
"Accessibility."
As you can see from Figure 9.5, selecting the Text Field within the form changes the Form Property
inspector to the Form Text Property inspector. This view exposes the following customizable properties:
TextField name— Enter a value in this text box to uniquely identify the Text Field form object on the
page. Although setting a value for this field isn't required, there isn't much you can do if you don't set
a value here. The application that processes our form must reference a specific Text Field by its unique
name in order to grab the value it contains. For our page, we'll name this Text Field object name to
correspond with the text label in the same row.
Char width— Enter a value in this text box to set the width in characters for the Text Field form
object. Leaving this field blank sets the default value, which is 20. We'll leave ours blank.
Max Chars/Num Lines— Enter a value in this text box to set the maximum number of characters
that this Text Field form object will accept. This is an excellent value to set when you want to limit
data entry within certain fields such as ZIP code (5 characters) or age (3 characters). When working
with the Multi Line type, the Max Chars text box becomes a Num Lines text box, which essentially sets
the height in character lines for the Multi Line Text Field. Because we can safely assume that most
people don't have names longer than 50 characters, enter 50 here.
Type: Single line— Choose this option button to set the Text Field type to a standard single-line Text
Field.
Type: Multi line— Choose this option button to set the Text Field type to a multiline Text Field. You'll
use this type when inserting the Questions Text Field later on in this section. This Text Field type
works well for collecting large amounts of data. It also allows the user to use simple formats such as
spaces and line breaks within the Text Field. The Multi Line Text Field can also be inserted by choosing
Insert, Form, Textarea.
Type: Password— Choose this option button to set the Text Field type to a password Text Field. Any

text entered within a Text Field that's been assigned this type shows as asterisks (bullets on a Mac).
Class— When working with CSS, select a class from this menu to set the overall style of the Text Field
form object. We'll leave ours blank.
Init val— Enter a value within this text box when you want a note or initial value to display within the
Text Field form object when the form page is first loaded within the browser.
Wrap— Available when the Multi Line type is selected, the Wrap menu provides options for setting
how text within the Multi Line Text Field should wrap as the user types. Options include Default, Off,
Virtual, and Physical. Selecting Off or Default prevents text from wrapping to the next line. When the
user's input exceeds the right boundary of the text area, text will scroll toward the left. Users must
press the Enter (Return) key to move the insertion point to the next line in the text area. Selecting
Virtual sets word wrap in the text area. When the user's input exceeds the right boundary of the text
area, text wraps to the next line automatically. When data is submitted for processing, word wrap isn't
applied to the data. It is submitted as one long string of data. Selecting Physical sets word wrap in the
text area, as well as to the data when it is submitted for processing.
Now that you have an understanding of the properties associated with Text Fields, let's add five more Text
Field form objects to handle the collection of the Company Name, Address, City, State, and ZIP code. Again,
place your cursor within the second cell of the second column and choose the Text Field icon within the
Insert bar (you can also choose Insert, Form, Text Field). After the Text Field appears, name the Text Field
companyname and associate a value of 50 for the Max chars property. Repeat this process four more
times, adding four more Text Fields within the third, fourth, fifth, and sixth cells of the second column and
adding Text Fields. Name the Text Fields address, city, state, and ZIPB respectively. You may also decide
to assign the Max chars value of 50 for address and city, 2 for state, and 5 for ZIP.
Finally, we'll add a seventh Text Field form object using the Textarea icon within the Insert bar. To do this,
place your cursor in the eleventh cell of the first column and add the text Questions?. Now place your
cursor in the tenth cell of the second column and choose the Textarea icon from within the Insert bar (or
choose Insert, Form, Textarea). Selecting the Textarea icon inserts a new Multi Line Text Field form object
within the cell.
For the Multi Line Text Field object, enter the name questions, assign a Char width of 30, Num Lines of 2,
Wrap of Physical, and set the Init Val to the text Enter your question here. The result of the form
additions will resemble Figure 9.6.

Figure 9.6. Insert Text Fields and a Multi Line Text Field (Textarea) onto the page.
[View full size image]
Check Boxes
Check boxes, like the ones that appear within the Property inspector, allow you to enable or disable
selections within forms. More importantly, however, check boxes allow you to select multiple options from a
group of options. For instance, in our Contact Us form, we'll ask inquiring customers to select the
infrastructure of their organization. Because an organization may employ various types of operating
systems, the check box becomes the perfect choice because multiple selections can be made. If the
customers' organizations employ one type of operating system, fine. But at the very least, we want to
provide them with the opportunity to select multiple items from a group of options. Collecting as much
information as possible from potential customers will help the sales representative better assess the
company's need for Vecta solutions.
To add and work with Check box form objects in Dreamweaver, follow these steps:
1.
Place your cursor in the eighth cell of the first column and enter the text Current Infrastructure:.
2.
Place your cursor in the eighth cell of the second column and click the Check box icon in the Insert bar
to add a new Check box form object to the table's cell. You can also insert a check box by choosing
Insert, Form, Check box.
3.
Place your cursor to the right of the check box and enter the text Microsoft.
4.
Repeat steps 2 and 3 three more times, entering a Check box form object and adding the text Mac,
Linux, and Unix. After you've finished, the page should resemble Figure 9.7. Remember, you can
press Shift+Enter (Shift+Return) to add a line break after the text. This will enable you to add the next
check box on the next line.
Figure 9.7. Add three more Check box form objects, complete with text.
[View full size image]
You'll also notice that selecting a Check box form object reveals the following set of customizable
properties in the Property inspector:

Check box name— Enter the unique name of the Check box form object within this text box. In most
cases, you'll want to enter the same name for all Check box form objects related to a specific group.
Because we have four Check box objects that relate to infrastructure, we'll name them all
infrastructure. This arrangement allows the application that will process this form to iterate through
the Check box group and return a list of checked values, covered next.
Checked value— The value you enter here is the value that will be sent to the server for processing.
For our Check box objects, we'll want to enter values of Microsoft, Mac, Linux, and Unix,
respectively.
Initial state— You can set the state of the Check box form object to either checked or unchecked
when the form loads for the first time. Because we can't guess which operating system the potential
customer will be using, don't set an initial state for any of the check boxes.
Class— When working with CSS, select a class from this menu to set the overall style of the Check
box object. We'll leave ours blank.
Radio Buttons and Radio Groups
Similar to check boxes, Radio Button form objects allow users to select options within a form. The difference
between Radio Buttons and check boxes, however, is that with Radio Buttons, users can select only one
option from a list of options. In our example, we'll want to ask potential customers what their organizations'
budgets are. Assuming that the potential customer has a set budget in mind, we can provide a list of
ranges, allowing the inquiring customer to select one. This functionality can easily be accomplished by
adding Radio Buttons, one for each budget range we think our inquiring customers will have.
To add and work with Radio Button form objects in Dreamweaver, follow these steps:
1.
Place your cursor in the tenth cell of the first column and enter the text Budget:.
2.
Place your cursor in the ninth cell of the second column and click the Radio Button icon in the Insert
bar to add a new Radio Button to the table's cell. You can also add a Radio Button by choosing Insert,
Form, Radio Button.
3.
Place your cursor to the right of the Radio Button and enter the text $1,000-$10,000.
4.

Repeat steps 2 and 3 two more times, entering a Radio Button form object and adding the text
$10,000-$50,000 and $50,000+. When you finish, the page should resemble Figure 9.8.
Figure 9.8. Add three Radio Button objects to represent a budget that an inquiring customer
might have.
[View full size image]
You'll also notice that selecting a Radio Button form object reveals a set of customizable properties within
the Property inspector. These properties include the following:
Radio Button name— Enter the unique name of the Radio Button form object within this text box.
For the most part, you'll want to enter the same name for all Radio Button form objects relating to a
specific group. Because we have three Radio Button objects that relate to a company's budget, we'll
name them all budget. This arrangement allows the application that will process this form to iterate
through the Radio Button group and return the checked value, covered next.
Checked value— The value you enter here is the value that will be sent to the server for processing.
For our Radio Button objects, we'll want to enter values of $1,000-$10,000, $10,000-$50,000, and
$50,000+, respectively.
Initial state— You can set the state of the Radio Button form object to either checked or unchecked
when the form page loads for the first time. Because we want to guarantee that a user selects one
option, we'll make the $10,000-$50,000 Radio Button checked initially.
Class— When you're working with CSS, select a class from this menu to set the overall style of the
Radio Button form object. We'll leave ours blank.
In our example, we've added two Radio Button form objects. However, suppose that you needed to insert a
large list of Radio Button objects on the page. Doing them individually would be tedious work and might
discourage you from using Radio Buttons. Instead of adding Radio Buttons individually, you might want to
consider using the Radio Group option available by clicking the icon next to the Radio Button icon in the
Insert bar (or by choosing Insert, Form, Radio Group). Selecting this option opens the Radio Group dialog as
shown in Figure 9.9.
Figure 9.9. Use the Radio Group dialog to add long lists of Radio Button form objects to your
form.
[View full size image]
As you can see from Figure 9.9, the Radio Group dialog reveals the following properties:

Name— Enter the unique name to be given to all Radio Buttons within this text box.
Radio buttons— Use this pane to add new or remove and/or reposition existing Radio Buttons within
the group. By default, the pane automatically includes two Radio Button form objects. To add a new
Radio Button to the list, click the Add (+) icon. To remove a Radio Button from the list, click the
Remove (–) icon. After the Radio Button is in the list, you can change the text label by clicking in the
area of the Label column for the specific Radio Button. Furthermore, you can change the checked value
by clicking within the area of the Value column for the specific Radio Button.
Lay out using— Choose an option from this radio button group to set the layout of the Radio Button
form objects on the page. Select the Line Breaks option to set the vertical positioning of Radio Buttons
so that each Radio Button is spaced from the previous Radio Button using a line break (<br> tag).
Select the Table option to position your Radio Buttons and text labels within an HTML table.
Lists and Menus
Aside from adding Check box and Radio Button form objects, you can also add Listboxes and Drop Down
Menus. The Listbox form object adds a boxed pane that contains numerous values; if you've got a lot of
values, and a small amount of space, you can choose to make the Listbox scrollable. Furthermore,
depending on how you configure the Listbox, users navigating it can hold down the Ctrl ( ) key and click
to select multiple options within the list. Listboxes are most commonly used. Alternatively, you can use the
Drop Down Menu form object as a way of storing numerous values in one expandable and collapsible menu.
If you choose a Drop Down Menu, the user will click one item and be presented with as many choices as you
want to make available. When the user clicks one, that choice is shown in the Drop Down Menu box and you
can make only one selection. Drop Down Menus are most commonly seen when you select your State or
Country on a form. To demonstrate the use of these form objects, follow these steps:
1.
Place your cursor in the ninth cell of the first column and enter the text Company Size:.
2.
Place your cursor in the ninth cell of the second column and click the List/Menu icon on the Insert bar
to add a new List/Menu to the table's cell similar to Figure 9.10. You can also add a List/Menu by
choosing Insert, Form, List/Menu.
Figure 9.10. Add a new List/Menu form object to the page.
[View full size image]

Because Drop Down Menu and Listbox form objects share common properties, they're added as a single
object and configured as either a Drop Down Menu or Listbox in the Type radio group. However, the Type
option isn't the only property outlined within the List/Menu Property inspector. The following represents a
complete list of properties:
List/Menu name— Enter the unique name to be given to the Drop Down Menu or Listbox form object
in this text box. Because we're going to be creating a Drop Down Menu that should represent the size
of the inquiring customer's company, let's name it companysize.
Type— Select an option from this radio group to convert the form object to a Drop Down Menu or a
Listbox depending on the selection. Selecting the List option enables the Height text box and Selection
check box. For now, we'll keep the object we're configuring as a Drop Down Menu.
Height— When the List Type is selected, enter a value in this text box to set the number of items
displayed within the list.
Selections— When the List Type is selected, enable this check box to indicate whether the user can
select multiple items from the list.
List Values— Click this button to launch the List Values dialog. In this dialog, you'll enter the list of
items that will be displayed within the List/Menu object.
Class— When working with CSS, select a class from this menu to set the overall style of the List/Menu
object. We'll leave ours blank.
Initially selected— The values you add in the List Values dialog also appear in this list box. You can
set which value should be initially selected when the form page loads for the first time by selecting
that value from this list.
Now that we've appropriately named our Drop Down Menu, let's add some values. To do this, click the List
Values button. The List Values dialog appears.
Similar to the Radio Group dialog, the List Values dialog allows you to Add (+), Remove (–), and reposition
values within the list. By default, the dialog loads with the first line in the Item Label column highlighted.
You can add the first item by typing into the outlined box. I'll add the text 5-50 as the first Item Label and
leave the Value column blank.
Note
Each item in the list has a label (the text that appears in the list) and a value (the value that's sent
to the processing application if the item is selected). If no value is specified, the label is sent to the

processing application instead.
Now add three more items by clicking the Add (+) icon and adding the text 51-500, 501-10,000 and
10,001+. When you finish, the List Values dialog will resemble Figure 9.11.
Figure 9.11. Add four total values to your Drop Down Menu.
[View full size image]
When you finish adding the values to the Drop Down Menu form object, click OK. You'll notice that the
values I've added in the List Values dialog also appear within the Initially Selected list box in the Property
inspector. It is from this menu that you're able to configure an initially selected value for the Drop Down
Menu. We'll leave ours as is.
Now that you have an idea how the Drop Down Menu form object works, let's add a Listbox form object. To
do that, follow these steps:
1.
Place your cursor in the seventh cell of the first column and enter the text Product Interest:.
2.
Place your cursor in the seventh cell of the second column and click the List/Menu icon in the Insert bar
to add a new List/Menu form object to the table's cell.
3.
In the Property inspector, name your Listbox object product.
4.
Check the List option from the Type radio group.
5.
Enter a height of 3.
6.
Because we'll assume that an inquiring customer might have interest in all Vecta Corp solutions, also
enable the Allow Multiple check box.
7.
Click the List Values button to open the List Values dialog. Add the values vProspect 2.0, vConvert
2.0, and vRetain 1.0.
8.
Click OK. The new, populated Listbox form object appears within the page similar to Figure 9.12.

Figure 9.12. The new Listbox appears within the page.
[View full size image]
Buttons
Possibly the simplest form object to understand is the Button. Although three types of Button objects exist,
the most widely used is the Submit Button. The Submit Button, when clicked, initiates the transfer of the
form to the processing application outlined in the form's action. You can insert a new Button form object by
simply placing your cursor into the last cell within the second column of the table and clicking the Button
icon in the Insert bar. By default, a Submit Button is inserted into the page (see Figure 9.13).
Figure 9.13. A new Submit Button is inserted into the page.
[View full size image]
As you can see from Figure 9.13, selecting the Button form object changes the Property inspector to the
Button Property inspector with the following customizable properties:
Button name— Enter the unique name to be given to the Button form object in this text box. Because
naming Button objects isn't the highest of priorities, we'll leave ours with the default value of Submit.
Value— Enter a name in this text box to set the text that will appear on the button itself. Because we
want to alert our users that clicking this button submits the form, we'll leave the default text (Submit)
alone.
Action— Sets what the button will do and how it will perform within the browser. For instance, the
Submit form action forces the form to submit to the intermediary file specified within the Action of the
form when the button is clicked. The Reset action causes all form objects to reset to their initial states
when the button is clicked. Finally, the None action does nothing. Typically you'd use the None action
when working with Behaviors (covered in the next chapter) so that when the button is clicked, it
doesn't submit or reset the form, but instead performs your custom action based on a behavior you
create within Dreamweaver.
Class— When you're working with CSS, select a class from this menu to set the overall style of the
Button object. We'll leave ours blank.
Now that you have a Submit Button object on the page, let's add a Reset Button next to the existing Submit
button. To do this, place your cursor next to the existing Submit button and click the Button icon in the
Insert bar. When your new Button object appears on the page, select it and change its Action to Reset form
in the Property inspector.

Test the Form
The form is taking shape nicely and is now ready for testing within the browser. To see how users will
interact with your form, save your work and preview the page in the browser. When the page appears, fill
out the form objects, entering text into the Text Fields, picking options from the Check boxes and Radio
Buttons, and making selections from the Drop Down Menu and Listbox. When you've finished, click the
Submit button. If you typed the path to the processing application correctly within the Action text box for
the form, the page should clear itself of the form objects and display what your selections and entries were.
At first glance, what happened in the background may seem confusing. The process of sending form
information to the server for processing will be cleared up in Part V, "Dynamic Web Page Development." For
now, we can cover the process at a basic level.
As mentioned in the beginning of the chapter, forms exist as a way for organizations to collect information
from their end users (clients). By clicking the Submit button, the user can send the form and its form object
values to an application (server), defined in the form's Action field, for processing. Figure 9.14 provides a
visual representation of this process.
Figure 9.14. The form and form object values are sent to the server-side application for
processing.
The approach in which you send data to a server for processing, also known as client-server architecture, is
central to the way thousands of organizations (also known as application service providers) do business on
the Web. In our scenario, the contactus.html form page, which is what the client interacts with, is what
you've just created. The application, contactus.asp, has already been created and resides on the server
(www.vectacorp.com). The application's sole purpose is to collect the values in the form objects and
redisplay them in the client's browser in a readable format. As you'll learn in Part V, these applications can
get much more complex than the simple example presented here. For now, this should give you an idea
about the role of forms and form objects.
Image Field
The drawback to using form buttons is that they all look alike. The only way to differentiate form buttons is
by their text labels. Although you can create CSS styles to reformat the look of form objects, including
buttons, there is a quicker way—the Image Field form object. The Image Field form object, which is
essentially an image you create and add into Dreamweaver, is treated just as a Submit Button form object
would be, but is customizable based on your design standards. To add an Image Field form object to the

page, follow these steps:
1.
Select and delete the Submit and Reset buttons located in the last cell of the second column.
2.
Click the Image Field icon located in the Insert bar (or choose Insert, Form, Image Field). Immediately,
the Select Image Source dialog appears.
3.
Browse to the Images folder of the project, select the imagefield_submit.gif image, and click OK.
The image appears in the cell similar to Figure 9.15.
Figure 9.15. The Image Field form object displays a custom image but is treated as a
Submit Button form object.
[View full size image]
Selecting the button reveals the following customizable properties within the Property inspector:
Image Field name— Enter the unique name to be given to the Image Field form object within this
text box. As with Button form objects, naming Image Field objects isn't the biggest of priorities, so
we'll leave ours with the default value of imageField.
Src— Displays the source path of the Image Field form object.
Alt— Like all images, you'll want to enter the alternative text to be associated with the Image Field
form object here. We'll add the text Click Submit. You can find more information on accessibility in
Appendix A, "Accessibility."
Align— Select an option from this menu to set the alignment of elements around the Image Field
object in relation to the Image Field. For instance, selecting Left from this menu aligns the Image Field
to the Left and all elements, including text, around the Image Field's right.
Edit Image— Click this button to launch the external editor specified for the Image Field's extension
type. Remember that these external editors are specified in the File Types/Editors category in the
Preferences window.
Class— When working with CSS, select a class from this menu to set the overall style of the Image
Field form object. We'll leave ours blank.
File Field
One of the most underused form objects available in Dreamweaver is the File Field form object. You can use

this form object as a way of enabling end users to browse their hard drives for a file in an effort to upload a
file to the server for processing. The File Field object, which is really just a Text Field with a Browse Button,
is shown in Figure 9.16.
Figure 9.16. Use the File Field form object to allow users to browse for and select files on their
hard drives for uploading to the server.
Note
Initially the File Field seems like an object that would be widely adopted by web developers. The
downside to the File Field is that it takes a lot of know how and code to get it to work server-side.
The difficulty in integrating the File Field with server-side applications is the primary reason this form
object is rarely used.
Hidden Field
The Marketing department's friend, the Hidden Field form object is a common way to persist client-side data
from page to page without the end user seeing or even realizing it. I say this form object is the Marketing
department's friend because this form object was used to death in the late 1990s dot-com web-marketing
crusade to sell unneeded and worthless software to unsuspecting web newbies. The scam was simple and
involved nothing more than forms, form objects, and a couple of Hidden Fields. Typically starting with an
email (spam) advertising the next best "free" software, unsuspecting users would click the accompanying
link to visit the site offering the "free" software. Initially, the offer seemed legitimate, asking the user only
for their email address with a button promising that the next step was the download. The unsuspecting user
would click the button to download and instantly be taken to a second page requiring more information such
as name, address, and so on. The user, believing that the company already had their email address and that
they would get spammed to the nth degree if they don't complete the process, cautiously enters more
information and clicks yet another button that promises the next step is in fact the download. But to no
avail; the user is now required to enter a credit card number and expiration date to purchase the $4.99
software that they initially thought was free. Fearing retaliation from the dastardly company, the user is left
feeling that $4.99 and worthless software is a fair trade for not sharing the personal information they just
entered into all the form objects.
We've all seen this before, right? Although not everyone is fooled into actually purchasing the software,
some inexperienced web users didn't know better and actually completed the purchase, much to their
dismay. Being a culprit at one time, I can tell you that you could have easily closed the browser and been

fine. The personal information was not actually sent to the server (and subsequently saved) when you
clicked the Continue button to move from page to page, but was, in fact, stored in Hidden Field form
objects. On the first page, the user would enter his or her email address and click Continue. The value (the
email address) was stored in a Hidden Field while the user entered more values. When the user clicked
Continue on that second page, the new information was stored in a new series of Hidden Field objects. The
process would go on until the last page, at which time the user would finally pay for the software and then
the personal information was taken from the Hidden Fields and stored by the company. Figure 9.17
diagrams the process.
Figure 9.17. Hidden Fields are used to collect information from page to page of a multipage form.
[View full size image]
Fortunately, this scam isn't widely used anymore. Now that we're in the twenty-first century, we've
graduated to pop-up ads and spyware!
Jump Menu
You can use a Jump Menu to create a quick, compact navigation option for the end user. Although a Jump
Menu is more of a prebuilt component than it is a form object, it does incorporate the use of the Drop Down
Menu and Button form objects to aid in its functionality. With a Jump Menu, you can easily add navigation
options within a Drop Down Menu that, when selected, "jumps" the page to a specified path. To insert a
Jump Menu, follow these steps:
1.
Create a new blank HTML page by choosing File, New. When the New Document dialog appears, select
Blank Page, HTML, <none>, and click Create.
2.
With your cursor on the page, click the Jump Menu icon in the Forms tab of the Insert bar (or choose
Insert, Form, Jump Menu). This action launches the Insert Jump Menu dialog box, shown in Figure
9.18.
Figure 9.18. The Insert Jump Menu dialog box offers options to link different menu
items to different pages.
[View full size image]
3.
Initially, you can add items to your new Jump Menu by clicking the Add (+) icon and typing the label of

the menu item in the Text text box. I'll add the text Go to Yahoo.
4.
Type the URL you'd like that menu item to link to. You can either browse for a local file or type an
absolute URL. I'll add the absolute path .
5.
Repeat steps 3–4, adding a few more selectable options. When you finish, your Jump Menu may
resemble mine (see Figure 9.19).
Figure 9.19. Add some selectable options to your Jump Menu.
[View full size image]
6.
Test your page in the browser by selecting the Preview in Browser option in the Document toolbar or
by pressing F12 (Option+F12). In the browser, you should be able to select an option from the menu
and automatically be redirected to the specific URL.
You may have noticed that the Insert Jump Menu component includes more customizable properties than we
actually used. The following is a complete list of available options within the Insert Jump Menu dialog (refer
back to Figure 9.18):
Menu items— Use this widget to add, remove, and reposition items within the Jump Menu. The Menu
Items pane displays the text of the item complete with the associated URL in parentheses.
Text— Enter the text to be associated with the Jump Menu item in this text box.
When selected, go to URL— Enter the URL to be associated with the Jump Menu item. This is the
path that the browser will navigate to when the item in the Jump Menu is selected.
Open URLs in— Use this menu to select where you want the link to open. You can target a frame in a
frameset or target the existing window (default).
Menu name— Enter the unique name to be given to the Jump Menu in this text box.
Options: Insert go button after menu— Select this check box to have the Jump Menu appear with
a Go button next to it. The Jump Menu uses the onChange event to trigger the browser redirection that
may not be supported in older browsers. The onClick event associated with the Go button, however, is
supported in all browsers.
Options: Select first item after URL change— Check this option when your Jump Menu resides in a
frame and the redirection occurs in another frame. Enabling this option guarantees that the item

selected is highlighted when the "jump" occurs.
Although there's no easy way to modify the Jump Menu after the Jump Menu dialog box has been
configured, modifying the Jump Menu's structure isn't entirely impossible. If you need to change some of the
menu items, you can highlight the Jump Menu and click the List Values button in the Property inspector. If
you need to make more advanced modifications, however, use the Behaviors panel. We'll discuss this option
with more detail in the next chapter.
Fieldsets
One of my favorite HTML design elements is the Fieldset. You can use the Fieldset as a handy way to group
similar form objects within a bordered container. The Fieldset helps users distinguish different form objects
as they relate to specific functionality on the page. To use the Fieldset, follow these instructions:
1.
Open the contactus.html page if it's not open already.
2.
Place your cursor in the form and select the <form> tag in the Tag Selector. The entire form should be
highlighted, as shown in Figure 9.20.
Figure 9.20. Select the form by clicking the <form#form1> tag in the Tag Selector.
[View full size image]
3.
Cut the form out of the page by choosing Edit, Cut or by pressing Ctrl+X on Windows ( +X on a
Mac).
4.
With your cursor now blinking in the cell, select the Fieldset icon from the Insert bar (or choose Insert,
Form, Fieldset). Clicking this icon opens the Fieldset dialog.
5.
Within the Legend text box, enter the text Contact a Sales Representative and click OK. The Fieldset
dialog will close.
6.
Place your cursor just to the right of the Contact a Sales Representative text (Legend) and click Enter.
Immediately paste your form back into the page. You can do this by selecting Edit, Paste or by pressing
Ctrl+V ( +V).

Preview your page in the browser by selecting the Preview in Browser option from the Document toolbar or
by pressing F12 (Option+F12). As you can see from Figure 9.21, the form objects are outlined with a pane
complete with the text label Contact a Sales Representative.
Figure 9.21. The Fieldset generates a clean border around your form objects.
[View full size image]
Labels
The final form element that you can use within your pages is the Label element available from both the
Insert, Form menu and the Forms category in the Insert bar. You can use this element as a way of defining
a unique association between text and a form element. For instance, if you haven't noticed already, the text
just to the right of both the option buttons and check boxes on our Contact Us form is selectable. Although
this doesn't seem to pose any concerns, it does bring up a usability issue. For users to select an option
button or check box, they must select the element directly in order to enable/disable the option button or
check box. Selecting the text next to the element does nothing. As a usability enhancement, we might
decide to make the text next to the element selectable as well. This would make it so that the text and
element can be selected to enable/disable the form object. Associating a Label with a form element is
simple and involves nothing more than selecting both the form element and associative text and choosing
Insert, Form, Label. Immediately Dreamweaver switches to Split view and adds code similar to the following
boldface code:
<form id="form1" name="form1" method="post" action="">
<input type="radio" name="nolabel" id="nolabel" value="No Label" />
Does not contain a label<br />
<label>
<input type="radio" name="label" id="label" value="Label" />
Contains a label
</label>
</form>
A <label> tag is added and wraps the selected form element. Although wrapping the form element within
the <label> tag may seem like enough, we must, in fact, perform one last step. To create the association
between the Label and the form element, we must add the form attribute to the <label> tag and apply the
form elements name/id as the attribute value, as follows:

<label for="label">
Now if you save your work and test the page in the browser, you'll notice that the first option button's text is
such that the user can directly select and copy the text. However, selecting that section of text, does
nothing to the selectable properties of the option button. The second option button, however,
enables/disables when either the element or the text next to it is selected.