Adobe Dreamweaver CS3 Unleashed- P11

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST

Báo xấu

72
lượt xem 10
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Adobe Dreamweaver CS3 Unleashed- P11: The good news is Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. The bad news, unfortunately, is that Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. Why so many windows, panels, and so on, Dreamweaver is unprecedented in the feature set it provides, allowing developers complete control when building websites and applications....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Adobe Dreamweaver CS3 Unleashed- P11

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 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, 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 ( 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, , 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.