Inserting a Form in Dreamweaver MX

As we've pointed out before, Dreamweaver MX provides many ways to accomplish a specific task. Adding a form to your HTML page is no different. As we mentioned in Chapter 4, you can add a form in several ways. You can choose Insert ® Form, you can click the Forms tab's Form control as shown in Figure 20.2, or you can simply type the tags in the Code window.

click to expand
Figure 20.2: You can also add a form by clicking the Form control on the Forms tab.

If the cursor is in the Code window when you insert a form, Dreamweaver MX displays the Tag Editor dialog box, as shown in Figure 20.3. If your cursor is in the Design window, you won't see the Tag Editor dialog box. In either case, once you insert the form and put the cursor in the Design window, Dreamweaver MX displays a dashed red line indicating that the form is present, as you can see in Figure 20.4. You can also see that we have the Property inspector open so that we can see the form properties that we can change.

click to expand
Figure 20.3: In the Tag Editor dialog box, you can specify the properties for your <form> tag.

click to expand
Figure 20.4: Dreamweaver MX adds a dashed red line to indicate the form boundaries.

You can modify form properties in either the Tag Editor dialog box or the Property inspector. You can verify this by comparing Figures 20.3 and 20.4. But you can also see that you have a few more options in the Tag Editor dialog box than the Property inspector offers. Let's take a look at those.

start sidebar
Invisible Form Elements

If you added a form but don't see the red line we mentioned, you may not have the switch turned on that allows viewing of "invisible" elements. Dreamweaver calls these elements invisible, because even though the element is there, the user will not necessarily see it. To turn on the display of invisible elements, choose View ® Visual Aids ® Invisible Elements from the Dreamweaver MX main menu. When the item is active, you'll see a check mark next to it, as you can see here.

click to expand

If you still can't see the dashed, red-line boundary after turning on the display of invisible elements, you may need to flip the Form Delimiter switch. Choose Edit ® Preferences, and click the Invisible Elements category:

click to expand

end sidebar

Tag Editor—General

A form tag has five basic, yet optional, attributes that you can specify. That is, the <form> tag won't generate an error if you leave any or all of them out of the code, but it doesn't necessarily perform any kind of functionality if you do so. Under the General option of the Tag Editor for Form, you'll see the following five basic options.

Option

Description

Action

Specifies the page that should receive the <form> data.

Method

Can be either Post or Get. Get is limited in the amount of data it can pass to a page, and it appends this data to the end of the URL where the user can see it and modify it. Post is used more than Get because it doesn't have the limits or restrictions of Get. It also doesn't immediately expose the data to the user. (See Chapter 4 to learn more about the Get and Post methods.)

Encoding Type

Tells the form what type of data to expect. Typically, this value is set to

Tag Editor—Style Sheet/Accessibility

The options in this category let you specify the information needed to apply style sheets and accessibility options to your form. These options are shown in Figure 20.5.

Option

Description

Class

Lets you specify the custom class defined in Cascading Style Sheets (CSS).

ID

You can use this field as an identifier to refer to a specific form object with

CSS,

JavaScript, and other scripting languages. Check the Dreamweaver MX help file for more information on this.

Style

Lets you specify an embedded (or "inline") style.

Title

Gives the form a title for accessibility purposes. Screen readers will read this title, for example.

click to expand
Figure 20.5: You set these options to control how your form will look and behave.

If you'd like to learn more about Cascading Style Sheets, check out the World Wide Web Consortium's information at www.w3.org/Style/CSS/, or simply visit your favorite web search engine. You'll find many resources on the Internet to aid you in learning CSS.

Tag Editor—Language

You can specify the language in which you're creating your form and specify how the text should be handled using the Language category options that you can see in Figure 20.6. This doesn't create the form in the particular language, but it tells the server that the form contains data in a specific language, which lets the server display and handle the information appropriately.

Option

Description

Direction

Specifies that the language is read right to left or left to right

Language

Specifies the ISO (International Organization for Standardization) setting for language choices

click to expand
Figure 20.6: You set these options to control the language settings of the form.

Tag Editor—Events

The Events category lets you specify code to be executed for any of the many events associated with a form. These are events such as onClick, onMouseOver, and so forth. As you can see in Figure 20.7, once you expand the Events tree, you have access to the various events and can enter code in the Code window on the right.

click to expand
Figure 20.7: Even forms have events associated with them.



Mastering Dreamweaver MX Databases
Mastering Dreamweaver MX Databases
ISBN: 078214148X
EAN: 2147483647
Year: 2002
Pages: 214

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net