Dreamweaver MX 2004: The Missing Manual

Unless you've never used a computer before, the different user interface elements available for HTML forms should look familiar: text fields where people can type in information (their names , addresses, phone numbers , and so on); checkboxes for making multiple-choice selections; and menus for picking items from a list. The Forms tab of the Insert bar lets you create all of these elements and more (see Figure 11-2).

11.3.1 What All Form Elements Have in Common

The routine for adding form elements to your document always follows the same pattern:

1. In the document window, insert a form (see Section 11.2).

   Or, if the page already has a form, click inside its red border.

   If a text field is the first element of the form, you can skip this step. As soon as you add a form element, like a field, checkbox, or pop-up menu, to a page that doesn't yet have a form, Dreamweaver asks if you'd like to add the proper form tag. Click the Yes button, and Dreaweaver automatically creates the red dottedline form boundaries (and, behind the scenes, the corresponding <form> tags). You should ALWAYS click the Yes button. A form field that isn't surrounded by the proper form tag won't work.

2. Click the appropriate button on the Insert bar (see Figure 11-2).

   Alternatively, use the Insert Form submenu. Youll soon discover that every form object on the Insert bar is also represented by a command on the Insert menu (for example, Insert Form Objects Text Field).

   Instead of just clicking a form-element button on the Insert bar, you may prefer to drag it off the tab and into a specific position on your Web page. This trick works with any of the user controls on the Insert bar, not just text fields.

3. Type a name for the freshly minted (and still highlighted) form element into the Property inspector's name box (see Figure 11-5).

   Dreamweaver automatically names the fieldfor example, it might propose textfield, textfield1 , and so on. It's a good idea, however, to give the field a new, unique name, because this name will be submitted with the visitor's input as a name/value pair.

   The Property inspector looks slightly different depending on the type of text field you choose. Dreamweaver MX 2004 adds a new option to the Property inspector. The Class menu (available to all form elements) lets you apply a Cascading Style Sheet class style (Section 6.2) to the selected form field.

4. Set the form element's properties.

   For example, you may be able to specify its width, height, and other variables . The following descriptions indicate which options are available.

11.3.2 Text Fields

When you need to collect a specific piece of information like a person's name, phone number, or address, you'll use a text field (shown in Figure 11-4). Text fields accept typed responses and are great for open -ended questions. They come in three different flavors: single-line fields for short responses, password fields to hide user input from snooping eyes, and multi-line fields for longer typed replies.

Once you've inserted the text field, you can adjust the following settings in the Property inspector (see Figure 11-5):

• Char Width. The width of a text field is measured in characters ; so if you type 20 for the Char Width (character width), the text field will be as wide as necessary to hold 20 typed letters . Be aware that the exact size can vary from browser to browser. (You can use Cascading Style Sheets to set an exact width. You'll find an example of this in the tutorial in Section 11.5.5.)

• Type. A single line text field, of course, holds just one line of text. This is the most common kind of text field; use it for collecting small pieces of information, like a last name, social security number, or credit card number.

  Multi-line fields provide a larger area for adding multiple lines of text. You'll need to use this kind of text field when offering a place to type longer comments, such as in a "Let us know what you think!" or "Nature of problem:" field.

• Password fields hide a password being typed from the prying eyes of passing spies. Whatever your Web visitor types appears as asterisks *** (Windows) or bullets (Mac) on the screen. (Of course, the information in the password field is still transmitted as plain text, just like any other form field. The masking action takes place only in your visitor's browser.)

• Max Chars/Num Lines. Max Chars (maximum characters) is a text field that lets you limit the number of characters that it will accept. It's a good way to help ensure that guests type the right information in the right place. For instance, if you use a field to collect the age of the visitor, odds are you won't need more than 3 characters to do it; very few 1,000-year-olds surf the Web these days (and those who do don't like to reveal their ages).

  When you've specified a Multi-line text field, the Max Chars box morphs into the Num Line box. In this case, you can't limit the amount of text someone types into the field. Instead this field lets you specify the height of the text field on the screen.

NOTE

The limit you specify here affects only how tall the field will be onscreen . Your visitors can type as many lines of information as they want. (A scroll bar will appear if the typing exceeds the size of the box you've specified with the Num Lines option.)

• Wrap. The often-confusing Wrap property specifies what happens when your visitor types right to the edge of the text box. (Of course, it applies to Multi-line text fields only.)

  The Default value varies from browser to browser; you can't rely on it to produce consistent results for all visitors.

  The Off setting prevents sentences from wrapping inside the text field. When the typed text exceeds the width of the field, a horizontal scroll bar appears at the bottom of the field, and the text scrolls to the left. The text remains on a single line until the visitor hits Enter or Return. You'll almost never want to use this option, because it forces your visitor to scroll not only up and down, but left and right, too, to see everything she's typed.

  The last two options create a text field that works like most people would expect: when the typing reaches the edge of the box, it automatically wraps to the next line. To your visitor, there's no visual difference between the Virtual and Physical options; these wrapping styles differ only in the way they format the text when it's transmitted.

  The Virtual setting displays line breaks only on the screen, in your visitor's browser; when the text is actually submitted, it will appear as a single line (unless said visitor manually inserted line breaks by pressing Enter or Return). If you create the field using the Physical setting, on the other hand, the browser inserts line breaks at the end of each line as it wraps. When transmitted, the text maintains these line breaks.

  In general, the Virtual setting is the best approach. It doesn't insert artificial line breaks and maintains the integrity of the typist's input.

• Init Val. Here, you can specify the Initial Value of the fieldstarter text that automatically appears in the field, so that it won't be empty when the visitor begins completing the form. You can use this feature to include explanatory text inside the field itself, such as "Type your name in this box" or "Example: (212) 555-1212."

NOTE

If the page is one of the dynamic file types Dreamweaver works withASP, ASP.NET, PHP, Cold Fusion, or JSPyou'll also see a small lightning bolt to the right of this box. This button lets you add dynamic data information drawn from a databaseto the text field. (In-depth coverage of this feature starts in Section 23.3.1.)

After you've finished tweaking the text field's properties, don't forget to type a text label next to the field in your document window to let your site's visitors know what the text field is for. Short labels like "First Name," "Phone Number," or "Type your comments here" will do just fine.

11.3.3 Checkboxes

Checkboxes (see Figure 11-4) are simple and to the point; they're either selected or not. They're great for multiple-choice questions in which your visitor is allowed to select more than one item in a group . For example, suppose you produce three different email newsletters that you send out each month. In your form, you might include some text"Check the boxes for the newsletters you'd like to receive"and three corresponding checkboxes, so that each visitor can sign up for only the newsletters he wants.

Once you've added a checkbox to a form, you can set up these options for it in the Property inspector (Figure 11-6):

• Checked Value. You're specifying here the information that, if your visitor turns on this checkbox, will be submitted when the form data is sent to your processing program. It doesn't necessarily have to match the checkbox's label (which you'll create in a subsequent step); it could, instead, transmit some special coded response to your processing application. Your visitors will never actually see this information.

• Initial State. If you like, your checkbox can be already checked when your Web page first appears. You may have seen this setup on sites that require you to sign up for some service. Usually there's a checkboxalready checkeddown near the bottom of the form, with fine print like this: "Check here if you want to get daily, unsolicited email from our marketing department."

NOTE

As with many form elements, your checkbox can respond to information it retrieves from a database. The Dynamic button on the Property inspectoronly available when you're working on a dynamic page (ASP, PHP, and so on)lets you set the checkbox state (Checked or Unchecked) based on data in a database. (See Section 23.3.1 for details.)

After adjusting the Property inspector, don't forget to return to the document window to add a text label next to the field. Let people know what the checkbox is for: "Yes, sign me up!" for example. Finally, you may want to insert another checkbox. Checkboxes don't have to come in groups, but they often do.

11.3.4 Radio Buttons and Radio Groups

Radio buttons, like checkboxes, are very simple (see Figure 11-4); they're either selected (represented on screen as a solid circle) or not (an empty circle).

But unlike checkboxes, radio buttons restrict your visitor to making only one choice from a group, just like the radio buttons on an old-style automobile dashboard (or, if you're too young to remember those car radios, like the buttons on a blender ). Radio buttons are ideal for multiple-choice questions. For example, "What is your income: A. $10-35,000, B. $35-70,000, C. $70-100,000, D. None of your business."

You can set up these options for a radio button in the Property inspector (Figure 11-7):

• Checked Value. This is the information that the form will submit when your visitor selects this button. Once again, it doesn't necessarily have to match the radio button's onscreen label.

• Initial State. Often, when a form page first loads, one radio button in each set is preselected. To do your visitors this timesaving courtesy , turn on Checked for the button that holds the default valuethe one they'll choose most often.

  Of course, if making a choice here is optional, then you can leave all of the buttons unselected by setting their initial states to Unchecked. However, once somebody does select a radio button, only the Reset button can make them all unselected again (see Section 11.3.7 for information on creating a Reset button).

Radio buttons come in groups; only one button in the group can be selected at the same time. To achieve this effect, every button in the same group shares the same name (although they should have different Checked values). If, when testing your page, you notice that you can select more than one radio button at a time, you must have given them different names. (Consider using Dreamweaver's Radio Group object, described next. It acts as a wizard that simplifies the process of creating a group of radio buttons.)

The final step in creating radio buttons is to add text labels for the entire group and each button. Simply click in the document window and type, just as you'd add any text to the page. Your whole-group-of-buttons label may take the form of a question ("How would you like to pay?"); the labels for the individual buttons might say, for example, "Visa," "MasterCard," and "I.O.U."

11.3.4.1 Radio Group.

Although creating a group of radio buttons using the Radio Button object is easy, Dreamweaver MX includes the Radio Group object to make it even simpler. The Radio Group object provides a single dialog box for creating a group of radio buttons and their labels in one fell swoop. To use it:

1. On the Insert bar, click the Radio Group button (see Figure 11-8).

   The Radio Group window appears.

2. Type a name in the Name field.

   This name covers all radio buttons in the group, saving you the trouble of typing the name for each button yourself.

3. In the Label column, click on the top Radio label. Type a label for the first button.

   This label will appear next to the button onscreen.

4. Hit the tab key to jump to the Value column for that button and type a value for the first button.

   This is the "checked value" of the button. Type what you want to be passed to the Web server when somebody selects this button and submits the form.

   The Radio Group dialog box lets you quickly add multiple radio buttons to a page. The buttons form a single group that lets visitors select one of a group of options.

5. Repeat steps 3 and 4 for the second button in the group.

   You can create additional radio buttons by clicking the + button. Follow steps 3 and 4 for each additional button you add in this way.

6. Select a layout option for the group.

   Dreamweaver puts each radio button in the group on its own line. You can choose whether Dreamweaver uses a line break (<br> tag) to separate each line, or whether it uses a tableone radio button per row.

   Don't care for either of these options? Pick one anyway. You can always redesign the layout later.

7. Click OK to add the radio group to your page.

   The radio buttons and their labels are essentially text and buttons on the screen. You can move the buttons around, change their labels, and alter each button's properties in the Property inspector.

11.3.5 Pull-down Menus and Lists

While checkboxes and radio buttons both provide ways to offer multiple choices, you should consider them only when there are relatively few choices. A form can quickly become overcrowded with buttons and boxes if there are too many options to choose from. The beauty of lists and pull-down menus (usually called pop-up menus on the Macintosh) is that they offer many choices without taking up a lot of screen space. (Figure 11-9 shows an example.)

Once you've inserted a menu or list object onto your document window, here's how to adjust the Property inspector settings:

• Type. Menus and lists differ both in appearance (see Figure 11-9) and in function, as described in a moment. Click the one you want (Menu or List).

• Height. A list can be a single line tall (in which case you may as well use a menu), or many lines (allowing your visitors to see a number of choices at once). The number you type into the Height box (available for lists only) should reflect the amount of space you wish the list to take up on the page. A vertical scroll bar will appear automatically if the height you specify here is smaller than the number of items in the list.

• Allow multiple. Here's a key difference between menus and lists: If you turn on this option, a visitor can select more than one item from a list, just by pressing the Ctrl ( ) key while clicking different options in the list.

• List Values. This button opens the List Values dialog box (see Figure 11-10), where you build the list of options in your list or menu. Each item is composed of two parts : a label (the text that actually appears in the menu or list on the Web page), and the value (the information that gets submitted with the form, which isn't necessarily the same thing as the label).

  To use this dialog box, type an item label. Press Tab (or click in the Value column) and then type the value, if you like. (See Figure 11-10 for details.)

  Including a value is optional; if you don't specify one, your form will submit the item's label as the value. Still, setting up a separate value is often useful. Imagine that you've designed a pull-down menu on an ecommerce site, so that your visitors can select the month of their credit card's expiration. Figure 11-10 shows what the items for such a pull-down menu might look like: The names of the months would appear on the menu, but when a visitor selects, say, April, the number 4 is what the form actually transmits to your form-processing program.

  Since computer programs are often more comfortable with numbers than names and humans often the exact opposite it makes more sense to use numbers for list values in this case.

  Another example: When offering your visitors a pop-up menu of products from which to choose, the label might be the human-friendly name of the product, like "Blue Wool Cap." The value would be the model number that your form-processing program can understand, like XSD1278.

• Dynamic values. Dreamweaver MX can also create a dynamic menu , where the labels and values of the menu come from a database. This optionavailable only when you insert a menu into one of the dynamic page types described in Part VI of this bookis great when the menu items change frequently, as they would in a list of employee names, for example. This feature is described in Section 23.3.3.

Click OK when you're finished building your menu or list. You can always return to this screen and edit the list of options. To do so, click the menu or list in the document window and then click the List Values button on the Property inspector. You return to the dialog box shown in Figure 11-10.

As with other form elements, you can, and probably should, add some explanatory text alongside the list or menu in the document window.

11.3.6 File Field

Receiving responses to checkboxes, radio buttons, and pull-down menus is all well and good, but what if you'd like your visitors to submit something a little more meatylike an entire file? Imagine a bulletin-board system, for example, that would allow guests to post JPEG images of themselves , or upload word processing documents to share with others. They can do just that, thanks to the File Field field (see Figure 11-2)and a little magic from your Web server.

Before you get carried away with the possibilities the File Field offers, you'll need to do a little research to see whether you can use it on your Web site. Although Dreamweaver makes it easy to add a field for uploading image files, text files, and other documents, you'll need to check with the administrator of your Web server to see if anonymous file uploads are permitted (some servers don't allow this kind of activity for fear of receiving viruses or overly large files). Then, of course, you'll have to ensure that the program that processes the form is programmed to do something with the incoming filestore it somewhere on the server, for instance.

When you click the File Field button on the Insert bar (or choose Insert Form Objects File Field), Dreamweaver inserts a text field and a Browse button; together, they constitute a single File Field. When you click either one, you highlight both.

The Browse button, once it's posted on the Web and visible in somebody's browser, opens up the standard Windows or Macintosh Open File dialog box, permitting your visitor to navigate to and select a file for uploading.

The Property inspector offers only two settings to change (other than specifying a more creative name):

• Char Width. The width of a text field is measured in characters; if you type 20 for the character width, the field will be 20 characters wide.

• Max Char. Leave this blank, as shown in Figure 11-11.

Your File Field isn't finished until you've added a label to it in the document window, something like "Click the Browse button to select a file for uploading."

11.3.7 Hidden Field

Most form elements are designed to accommodate interaction from your visitors: clicking radio buttons, typing into text fields, and making choices from menus, for example. But there's one kind of field that your visitors won't even know about and will never see: the hidden field.

Why, you're probably asking, would you need to submit a value you already know? Hidden fields are intended to supply information to the programs that process formsinformation that the program has no other way of knowing. For example, most Web hosting services offer a generic form-processing program that collects information submitted with a form and emails it to a selected person. But how does the program know who to email the data to? After all, it's a generic program that's used by hundreds of other people. The solution: a hidden field that stores the information required for the program to properly process the form email=me@mydomain.com , for example.

To insert a hidden field, click the Hidden Field button on the Insert bar, or choose Insert Form Hidden Field. A gold shield icon appears on the page (this is Dreamweavers symbol for HTML, which won't be visible in Web browsers). Use the Property inspector to give the field a name and a value that is, the value that will get submitted to your form-processing program (in example above, your email address).

NOTE

The gold shield indicating a hidden field appears only if the Hidden Form Fields box is turned on in the Invisible Elements category of the Preferences window (Section 1.3.5) and if Invisible Elements is turned on in the View menu (View Visual Aids Invisible Elements).

11.3.8 Buttons

No form is complete without a Submit button for your Web visitors to click as a fi- nal step (see Figure 11-2). Only then do their responses set out on their way to your form-processing application. Another button worth including is a Reset button, which your visitors can click when they've filled out a form and realize they've made an error. The Reset button clears all of the form entries and resets all of the form fields to their original values.

The Property inspector controls (Figure 11-12) for a freshly inserted button are:

• Label field. The label is the name that appears on the button. Dreamweaver proposes Submit , but you're free to substitute Do It, Make It So , or Send my data on its merry way .

  For buttons, the label is the value that will be submitted like other form data; that's why there's no separate Value field on the Property inspector. This quirk opens up some interesting possibilities. You could, for example, include several Submit buttons, each with a different label. Maybe you're creating a form for a database application; one button might say Delete, while another says Edit. Depending on which button your visitor clicks, the program processing the form would either delete the record from the database or modify it.

• Action. These three buttons govern what happens when somebody clicks your button. A Submit button transmits the form data over the Internet to the formprocessing program. A Reset form button sets all the fields back to their original values. (This doesn't mean that the fields, checkboxes, or menu items are left blank, unchecked, or unselected. Instead, they return to their initial values, which you specified when creating these various controls. For example, if you set the Initial State property of a checkbox to Checked, and your visitor unchecks the box and then clicks the Reset button, a checkmark will reappear in the box.)

  Setting the button's action to None means that clicking on the button has no effect on the form. "Gee that's useful," you're probably thinking.

  But although the button doesn't submit the data or reset the form's fields, you'll need to choose the None option if you want to add interactivity to the button using Dreamweaver's built-in Behaviors (see the next chapter). In this way, you can use a common user interface elementthe 3-D beveled look of a form buttonto trigger any of many different actions, like opening a new browser window, starting or stopping a Flash movie, or popping up a message on the screen. If you're a JavaScript programmer, you can use the button to activate your own programs.

11.3.9 Labels and Fieldsets

Two additional form items appear on the Insert bar: Labels and Fieldsets. Unfortunately, neither are intended to work with Dreamweaver's Design view. They're essentially just shortcuts for entering code into Code view.

11.3.9.1 The Label tag

The Label tag lets you associate a label with a particular form elementa checkbox or text field, for example. Of course, you can always do that by placing plain text next to a form element on the page. But because a Label tag is "attached" to a particular form element, it's more helpful in explaining the function and layout of your form to people who use assistive technologies like screen-reading software for the blind.

To use the label tag, select a form elementcheckbox, text field, or whateverand click the Label button in the Forms tab of the Insert bar (see Figure 11-2). You've just wrapped the form field in a <label> tag. Now, in Code view (Chapter 10), type text within the tag on either side of the form field like this:

<label>Please type a password: <input name="password" type="text" id="password"></label>

11.3.9.2 The Fieldset tag

The Fieldset tag is another form-organization tool, this time intended to let you group related form fields. For example, if you're creating an online ordering form, you can organize all of the "ship to" informationaddress, city, state, zip, and so oninto a single set. Again, this arrangement can help those using assistive technology to understand the organization and intent of a form.

In many of the latest browsers, the Fieldset tag also has a visual benefit. Internet Explorer 4 and above, Navigator 6 and other newer browsers display an attractive border around fieldsets and add a useful label to identify the fields.

To use this tag, select the related form fields. They must be next to each other on screen, and can be organized within other HTML elements like a table. Then click the Fieldset button on the Insert bar (see Figure 11-2). Type a label for the fieldset in the Label window that appears, and then click OK.

You won't see much of an effect in Dreamweaverjust the new label you typed. So preview the page (F12) in a recent version of Internet Explorer, Mozilla, Opera, or Safari to see the both the label and a border surrounding the form elements in the set.