Adobe Dreamweaver CS3 Unleashed- P11

Adobe Dreamweaver CS3 Unleashed- P11: The good news is Dreamweaver provides numerous windows, panels, inspectors, and toolbars forstreamlining the way you build websites. The bad news, unfortunately, is that Dreamweaver providesnumerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. Why somany windows, panels, and so on, Dreamweaver is unprecedented in the feature set it provides, allowingdevelopers complete control when building websites and applications....
Nội dung trích xuất từ tài liệu:
Adobe Dreamweaver CS3 Unleashed- P11As you can see from Figure 9.2, numerous form objects exist in an effort to collect different types ofinformation 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. (Well 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 arent 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 drivers license atyour local Department of Motor Vehicles (DMV). You wait in line until it is your turn, you tell the usuallyexpressionless attendant that youd like to register to receive a new drivers 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 soon. The places on that drivers 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 Webis 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, letsactually build them within the context of our project. Throughout the rest of the chapter, well dissect formsand the various types of form objects you can use when working with forms in Dreamweaver.Working with Forms and Form ObjectsAs 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, lets adda 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, were concerned with adding a form and form objects so that potential customers can contact the company.2. As a change of pace, well 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]Youll 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 isnt 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). Well leave our form name as the default form1. Action— Enter the path to the page that will pr ...