# Adobe Dreamweaver CS3 Unleashed- P11

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

0
43
lượt xem
8

## Adobe Dreamweaver CS3 Unleashed- P11

Mô tả tài liệu

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)

Lưu

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

3. 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]
4. 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
6. 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
10. 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. 11. 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
19. 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 20. 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.