Adobe Dreamweaver CS3 Unleashed- P11 docx

Radio Buttons and Radio GroupsLists and Menus Text Fields, Password Fields, and Textarea Arguably the most widely used form object is the Text Field.. Place your cursor into the first ce

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 generalinformation such as first name, last name, address, city, email, and so on Drop-down menus are used toallow the user to choose from a predefined set of states and countries, and from lists of months, days, andyears for birthdays In addition, if you scroll further down the page, a check box is used to collect a valueindicating that yes, the user accepts the user agreement when checked, or if left unchecked, no the userdoes not agree with the user agreement Finally, a button object is used to submit the information to eBayfor processing (We'll get to processing the content of forms and form objects in Part V, "Dynamic Web PageDevelopment") Both models (buyer and seller) demonstrate forms and form objects used in a real-worldwebsite 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 theyoffer 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 atyour local Department of Motor Vehicles (DMV) You wait in line until it is your turn, you tell the usuallyexpressionless attendant that you'd like to register to receive a new driver's license, in which case, shehands 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'sactually build them within the context of our project Throughout the rest of the chapter, we'll dissect formsand 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 Youcan think of the form as the container for its form objects When the user clicks the Submit button, theentire form, along with all the data contained within the form objects in the form, are sent for processing Infact, the form contains numerous properties that tell the browser where and how the form will be sent forprocessing 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 designhas already been created for you For now, we're concerned with adding a form and form objects sothat 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 tothe 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 cansee 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 Elementsoption 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 thatyou add to the Document window, the Property inspector tailors itself to support property modifications forthe 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-sidescripting languages such as JavaScript (covered in more detail as Behaviors in the next chapter) We'llleave 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 requiressome 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 intermediaryfile (containing functions with code) must process the form and perform the insertion into the datacollection mechanism For this chapter, that page has been created for you The path, and the valueyou'll want to enter into this text box, is http://www.vectacorp.com/vc/scripts/contactus.asp

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, essentiallyunseen by anyone Nine times out of ten, you'll use POST in your development efforts because it's amuch more secure alternative to GET However, you can use GET to send the contents of all formelements within the form, appended as parameters within the URL of the page This is beneficial whenworking with searches: The user can bookmark a recent search because the submitted search value isappended to the URL of the page As you can see from the callout in Figure 9.4, eBay uses GET whensubmitting 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.

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, especiallythose containing sensitive data such as usernames, passwords, and credit card information, should besent 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-urlencodetype, but it's not uncommon to use the multipart/form-data type, especially when uploading files usingthe 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 insertingform 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

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 theperfect option when you need to create a plain text box, password text box, or a multiline text box whereusers 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 Insertmenu Give the new table 12 rows, 2 columns, a width of 479 pixels, and a border thickness, cellpadding, and cell spacing of 0 pixels We'll use this table to cleanly position text labels and formobjects 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 byclicking the Text Field icon in the Insert bar (or choosing Insert, Form, Text Field) The new Text Fieldwill 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]

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 thePreferences dialog, (available from Edit, Preferences/Dreamweaver, Preferences) and unchecking theForm 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 limitdata entry within certain fields such as ZIP code (5 characters) or age (3 characters) When workingwith the Multi Line type, the Max Chars text box becomes a Num Lines text box, which essentially setsthe 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 typeworks well for collecting large amounts of data It also allows the user to use simple formats such asspaces and line breaks within the Text Field The Multi Line Text Field can also be inserted by choosingInsert, 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 theuser's input exceeds the right boundary of the text area, text will scroll toward the left Users mustpress the Enter (Return) key to move the insertion point to the next line in the text area SelectingVirtual sets word wrap in the text area When the user's input exceeds the right boundary of the textarea, text wraps to the next line automatically When data is submitted for processing, word wrap isn'tapplied to the data It is submitted as one long string of data Selecting Physical sets word wrap in thetext 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 TextField 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 theInsert 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 (orchoose Insert, Form, Textarea) Selecting the Textarea icon inserts a new Multi Line Text Field form objectwithin 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.

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 agroup 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 toprovide them with the opportunity to select multiple items from a group of options Collecting as muchinformation 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 choosingInsert, 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 nextcheck 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 customizableproperties 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 potentialcustomer 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 differencebetween Radio Buttons and check boxes, however, is that with Radio Buttons, users can select only oneoption 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 byadding 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 Insertbar 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 withinthe 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 aspecific 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 oneoption, 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 alarge list of Radio Button objects on the page Doing them individually would be tedious work and mightdiscourage you from using Radio Buttons Instead of adding Radio Buttons individually, you might want toconsider using the Radio Group option available by clicking the icon next to the Radio Button icon in theInsert bar (or by choosing Insert, Form, Radio Group) Selecting this option opens the Radio Group dialog asshown 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 newRadio Button to the list, click the Add (+) icon To remove a Radio Button from the list, click theRemove (–) icon After the Radio Button is in the list, you can change the text label by clicking in thearea 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 DownMenus The Listbox form object adds a boxed pane that contains numerous values; if you've got a lot ofvalues, 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 theDrop 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 youwant to make available When the user clicks one, that choice is shown in the Drop Down Menu box and youcan make only one selection Drop Down Menus are most commonly seen when you select your State orCountry 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 bychoosing 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 singleobject and configured as either a Drop Down Menu or Listbox in the Type radio group However, the Typeoption isn't the only property outlined within the List/Menu Property inspector The following represents acomplete 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 Selectioncheck 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 ListValues button The List Values dialog appears

Similar to the Radio Group dialog, the List Values dialog allows you to Add (+), Remove (–), and repositionvalues 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 theprocessing 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 thevalues 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 DownMenu 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

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 theform to the processing application outlined in the form's action You can insert a new Button form object bysimply placing your cursor into the last cell within the second column of the table and clicking the Buttonicon 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 theButton 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 theform when the button is clicked The Reset action causes all form objects to reset to their initial stateswhen the button is clicked Finally, the None action does nothing Typically you'd use the None actionwhen working with Behaviors (covered in the next chapter) so that when the button is clicked, itdoesn't submit or reset the form, but instead performs your custom action based on a behavior youcreate 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 Submitbutton To do this, place your cursor next to the existing Submit button and click the Button icon in theInsert 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 willinteract with your form, save your work and preview the page in the browser When the page appears, fillout the form objects, entering text into the Text Fields, picking options from the Check boxes and RadioButtons, and making selections from the Drop Down Menu and Listbox When you've finished, click theSubmit button If you typed the path to the processing application correctly within the Action text box forthe 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." Fornow, 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 informationfrom their end users (clients) By clicking the Submit button, the user can send the form and its form objectvalues to an application (server), defined in the form's Action field, for processing Figure 9.14 provides avisual representation of this process

Figure 9.14 The form and form object values are sent to the server-side application for

redisplay them in the client's browser in a readable format As you'll learn in Part V, these applications canget much more complex than the simple example presented here For now, this should give you an ideaabout 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 objectwould be, but is customizable based on your design standards To add an Image Field form object to thepage, 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, sowe'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 thePreferences 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 usethis form object as a way of enabling end users to browse their hard drives for a file in an effort to upload afile 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 formobject is rarely used

Hidden Field

The Marketing department's friend, the Hidden Field form object is a common way to persist client-side datafrom page to page without the end user seeing or even realizing it I say this form object is the Marketingdepartment's friend because this form object was used to death in the late 1990s dot-com web-marketingcrusade to sell unneeded and worthless software to unsuspecting web newbies The scam was simple andinvolved nothing more than forms, form objects, and a couple of Hidden Fields Typically starting with anemail (spam) advertising the next best "free" software, unsuspecting users would click the accompanyinglink to visit the site offering the "free" software Initially, the offer seemed legitimate, asking the user onlyfor their email address with a button promising that the next step was the download The unsuspecting userwould 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 thatthey would get spammed to the nth degree if they don't complete the process, cautiously enters moreinformation and clicks yet another button that promises the next step is in fact the download But to noavail; 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 leftfeeling that $4.99 and worthless software is a fair trade for not sharing the personal information they justentered 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 theirdismay Being a culprit at one time, I can tell you that you could have easily closed the browser and beenfine The personal information was not actually sent to the server (and subsequently saved) when youclicked 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 (theemail address) was stored in a Hidden Field while the user entered more values When the user clickedContinue on that second page, the new information was stored in a new series of Hidden Field objects Theprocess would go on until the last page, at which time the user would finally pay for the software and thenthe 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 JumpMenu is more of a prebuilt component than it is a form object, it does incorporate the use of the Drop DownMenu and Button form objects to aid in its functionality With a Jump Menu, you can easily add navigationoptions within a Drop Down Menu that, when selected, "jumps" the page to a specified path To insert aJump Menu, follow these steps:

1. Create a new blank HTML page by choosing File, New When the New Document dialog appears, selectBlank 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 chooseInsert, Form, Jump Menu) This action launches the Insert Jump Menu dialog box, shown in Figure9.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 anabsolute URL I'll add the absolute path http://www.yahoo.com

5. Repeat steps 3–4, adding a few more selectable options When you finish, your Jump Menu mayresemble 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 menuand automatically be redirected to the specific URL

You may have noticed that the Insert Jump Menu component includes more customizable properties than weactually used The following is a complete list of available options within the Insert Jump Menu dialog (referback 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 itemselected 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 themenu items, you can highlight the Jump Menu and click the List Values button in the Property inspector Ifyou need to make more advanced modifications, however, use the Behaviors panel We'll discuss this optionwith 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 groupsimilar 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 behighlighted, 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 aMac)

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 pressingCtrl+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 panecomplete 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]

<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 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 issuch 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