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 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. [...]... JavaScript As is true with HTML and CSS, you don't need to know JavaScript when working in Dreamweaver as Dreamweaver writes all the JavaScript to make these actions happen in the form of behaviors Exposed as canned JavaScript snippets of code and available in the Behaviors panel, the behaviors available in Dreamweaver are ideal for real-world applications where time is of the essence and your JavaScript... JavaScript As is true with HTML and CSS, you don't need to know JavaScript when working in Dreamweaver as Dreamweaver writes all the JavaScript to make these actions happen in the form of behaviors Exposed as canned JavaScript snippets of code and available in the Behaviors panel, the behaviors available in Dreamweaver are ideal for real-world applications where time is of the essence and your JavaScript... you'll see, forms, in conjunction with server-side applications, begin to push the envelope for more engaging experiences for web users Chapter 10 Using Dreamweaver Behaviors IN THIS CHAPTER An Introduction to Behaviors Using the Behaviors Panel Dreamweaver Behaviors As we've progressed through the book, we've touched on topics such as client-side web pages and serverside applications In the previous... examples in this chapter by downloading the files from www.dreamweaverunleashed.com You'll want to save the files for Chapter 10 in an easy-to-find location I'll place mine in C:\VectaCorp\Chapter10 Also, don't forget to update your site definition to point to this newly created folder An Introduction to Behaviors When you understand how behaviors in Dreamweaver work, you'll grasp the fundamentals of JavaScript... events, are attached to objects by way of the Behaviors panel To see this process in action, let's turn our attention to the Behaviors panel Chapter 10 Using Dreamweaver Behaviors IN THIS CHAPTER An Introduction to Behaviors Using the Behaviors Panel Dreamweaver Behaviors As we've progressed through the book, we've touched on topics such as client-side web pages and serverside applications In the previous... Everything we do on the Web, to a certain extent, revolves around markup Dreamweaver, by definition, is a tool for creating this markup The second building block, discussed in some detail in Chapters 6 and 7 is CSS As we've seen, style sheets control the overall look and appearance of your web pages and, again, are significantly supported by Dreamweaver The third and final block to client-side web page development,... Everything we do on the Web, to a certain extent, revolves around markup Dreamweaver, by definition, is a tool for creating this markup The second building block, discussed in some detail in Chapters 6 and 7 is CSS As we've seen, style sheets control the overall look and appearance of your web pages and, again, are significantly supported by Dreamweaver The third and final block to client-side web page development,... examples in this chapter by downloading the files from www.dreamweaverunleashed.com You'll want to save the files for Chapter 10 in an easy-to-find location I'll place mine in C:\VectaCorp\Chapter10 Also, don't forget to update your site definition to point to this newly created folder An Introduction to Behaviors When you understand how behaviors in Dreamweaver work, you'll grasp the fundamentals of JavaScript... 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,... 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 . 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. 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 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