Section 10.3. Adding Form Elements

10.3. Adding Form Elements

Unless you've never used a computer before, the different user -interface elements available for HTML forms should look familiar (Figure 10-4): 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 10-2).

Figure 10-4. Forms collect information using a variety of different interface elements like text boxes, password fields, and pull-down menus. You can even add a File Field to let visitors select and upload a file to your site.

10.3.1. What All Form Elements Have in Common

Adding form elements to your document always follows the same pattern:

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

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


    Tip: 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 Dreamweaver automatically creates the red, dotted -line 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 10-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).


  3. Type a label and select label options from the Input Tag Accessibility Attributes window (see Figure 10-5) .

    These accessibility options are intended to add information and tools for the benefit of those surfing your site using "assistive technologies"for example, screen readers for those with poor visionor those who don't use mice to jump from form field to form field.

    Figure 10-5. This window appears when you're inserting a form element. If you don't see it, you or someone else has turned off Dreamweaver's factory setting to automatically launch this window. To summon it, choose Edit Preferences (Dreamweaver Preferences), click the Accessibility category, and then turn on the Form Objects checkbox. You can also turn off this option by clicking the "change the Accessibility preferences link at the bottom of this window.

    The label option lets you add text that identifies the form element's purpose (see Section 10.3.10 for a description of the Label tag). For example, if you add a text field to collect someone's name , the label might be Name :. It's always a good idea to add a label. In addition, Dreamweaver wraps the text you type inside an HTML tag created just to indicate a form's purpose: the <label> tag.


    Tip: Sometimes you won't need or want a label. For example, buttons already have a labelSubmit or Reset, for exampleso you don't need to add another. In this case, either click the Cancel button, which just adds the form field without any of these accessibility properties, or leave the label box empty and select the "No label tag" radio button.

    There are a two ways to attach a label to a form element. The first method, indicated by the radio button labeled "Wrap with label tag" (as shown in Figure 10-5) wraps the <label> tag around both the text you type and the form element itself. This method keeps the two together and easily identifies which label goes with each form field. This is the easiest approach.

    The second method, "Attach label tag using the 'for' attribute," also wraps the text you type inside a <label> tag. However, it places the form field outside of the label tag. This method is useful if the label and form field don't appear directly next to each other in the HTML code. For example, it's common to use a table to visually organize forms (see the box on Section 10.3.5). By placing text labels in one table column and form fields in an adjacent column, you can neatly align the labels and their corresponding fields. However, organizing your page like this puts the labels and form fields into separate table cells and "breaks" the connection between the label and the field. Those visitors who use a screen reader, for example, to read your form may not understand which label applies to which form field. Fortunately, Dreamweaver can add a for property to the label tag, which tells a Web browser which form element the label is "for."

    Unfortunately, Dreamweaver kind of drops the ball with this feature, and you have to go into Code view to make it work correctly. Here's what the HTML looks like after you insert a text field and a label using the for property:

     <label for="textfield">Name:</label> <input type="text" name="textfield" id="textfield" /> 

    The actual name, id , and for values will vary depending on the type of form field you add textfield , textarea, radio button, and so on. Of course, as mentioned in step 5, you should always change the generic names textfield , in this examplethat Dreamweaver initially adds to form fields. Unfortunately, when you use the Property inspector to change the name of the form fieldfor example, from textfield to name Dreamweaver doesn't update the for property of the <label> tag, so you end up with code like this:

     <label for="textfield">Name:</label> <input type="text" name="name" id="name" /> 

    Now the for property is pointing to a field that doesn't exist on the page. To fix this, you need to go into Code view (see Section 9.2) and manually change the for property to the new name you supplied for the form field. Another solution is to click anywhere inside the label tag, choose Window Tag Inspector, click the Attributes tab, and then change the for property that appears in the panel.

    If you just want to skip this whole <label> tag thing, select the "No label tag" radio button, and Dreamweaver will just insert the label text you've typed without the <label> tag.

    Finally, you can tell Dreamweaver if you wish the text to appear before or after the form field by selecting one of the position radio buttons.

  4. Type an "Access key" and a Tab Index number, and then press OK .

    These are optional steps that let visitors access the form field using the keyboard. The "Access key" option lets visitors use a keyboard shortcut to jump immediately into or select a field. For example, if you type M for a form element's access key, visitors will be able to jump to that element using Alt+M (Windows) or Control-M (Mac). While this feature seems to be a great way to make your forms more usable, there are a couple of drawbacks. First, not all browsers support this feature. In addition, since it's not at all obvious to your site's visitors what keyboard shortcuts you've added to your form, you'll need to list the shortcut next to the form element or create a "user's manual" of sorts that explains the shortcuts used in your forms.

    The Tab Index is more commonly supported by browsers than the "Access key" property. It lets you number each form field and, in the process, set the order in which the fields will be selected as a visitor presses the Tab key. Number 1 indicates the first field to be selected when a visitor presses the Tab key, and each number after that2, 3, 4, and so ondictates the order of selection when the Tab key is pressed. You won't usually need to go to this extreme, since most browsers will jump to the next form field when you press the Tab key, but it sometimes comes in handy when you have a particularly complex form and use either tables or CSS to lay it out. For example, in some cases, the order the fields are selected by default doesn't match the visual presentation of the form (in other words, when you press the Tab key, you actually jump to a different field than the one you expect). If this is the case, setting the Tab Index lets you correctly specify the tab order.

  5. Select the freshly minted form element and type a name into the Property inspector's name box (see Figure 10-6) .

    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 the name part of a name/value pair. (The name box is directly below the form element's name on the Property inspector.)

    Figure 10-6. The Property inspector looks slightly different depending on the type of text field you choose. The Class menu (available to all form elements) lets you apply a Cascading Style Sheet class style (see Section 6.1.3) to the selected form field.
  6. Set the form element's properties .

    For example, you may be able to specify its width, height, and other variables . The following descriptions indicate the options available for each form element.

10.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 10-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 10-6):

  • 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 on Section 10.5.3.)

  • Type . There are three different types of text fields to choose from.

    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.
    Multiline 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.

    Tip: Dreamweaver includes a separate button for adding a multiline text fieldcalled Textarea in HTML (see Figure 10-2).
    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 the form 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 three 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 multiline text field, the Max Chars box morphs into the Num Lines 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 Wrap property is meant to specify what happens when your visitor types right to the edge of the text box. Although most browsers recognize this property, it isn't officially part of the HTML or XHTML standard. In general, the "Default" option is your best bet. It leaves this nonstandard property out of your HTML and lets the text box behave as most people would expect: when the typing reaches the edge of the box, it automatically wraps to the next line. The Off setting completely 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. And the last two optionsVirtual and Physicalhave no effect in most browsers.

  • 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."

FREQUENTLY ASKED QUESTION
Using the Password Field for Credit Card Numbers

Can I use the Password field type for credit card numbers and other sensitive information ?

Yes, but it won't give the information any extra security.

The Password field does one thing: it hides user input on the screen. Someone looking over your visitor's shoulder won't be able to read what's being typedit'll look like a bunch of dotsbut once that information is submitted over the Internet, it's just as visible as a regular text field.

To provide real security for form information, you need an encrypted connection between the Web server and the visitor's computer. Most Web site creators use SSL (Secure Socket Layer) technology for this purpose.

Most Web browsers understand this technology, but your Web server must be specially configured to work in this mode. Contact your Web host to see if you can use SSL on your server (the answer is usually yes). If so, they'll be able to tell you how to set it up.



Note: If the page is one of the dynamic file types Dreamweaver works withASP, ASP.NET, PHP, ColdFusion, 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 on Section 22.3.)

10.3.3. Checkboxes

Checkboxes (see Figure 10-4) are simple and to the point; they're either selected or not. They're great for 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 10-7):

  • 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 inspectoravailable only 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 22.3.2 for details.)

After adjusting the Property inspector, if you don't use Dreamweaver's accessibility options discussed on Section 10.3, make sure you 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.

Figure 10-7. The actual value of a checkbox is defined by the "Checked value" property.

10.3.4. Radio Buttons and Radio Groups

Radio buttons, like checkboxes, are very simple (see Figure 10-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. $1035,000, B. $3570,000, C. $70100,000, D. None of your business."

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

  • 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 time-saving 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 (if you add one) can make them all unselected again (see Section 10.3.8 for information on creating a Reset button).

Figure 10-8. Radio buttons offer answers to a single multiple-choice question.

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. If you have the accessibility features turned on (see Section 10.3) you'll have already added labels to each button. If not, 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."

10.3.4.1. Radio Group

Although creating a group of radio buttons using the Radio Button object is easy, Dreamweaver 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 .

    The Radio Group window appears (see Figure 10-9).

    Figure 10-9. 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.
  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 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.

  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.

10.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 10-10, top, shows an example.)

Figure 10-10. Top: A menu is a single compact line; a list can take up any number of lines on the page.
Bottom: Use the first menu or list item to instruct visitors what to do. For example, "Select the state you live in" or "Select One."

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

  • Type . Menus and lists differ both in appearance (see Figure 10-10) 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 10-11), 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 10-11 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 e-commerce site so that your visitors can select the month of their credit card's expiration. Figure 10-11 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 selected, say, April, the number 4 is what the form would actually transmit to your form-processing program.

    Figure 10-11. Using the + button, you can add an item to the end of a list; when you click in the Value column of the last item of the list, pressing Tab creates a new list item. To delete an item, select it and click the minus sign () button. You can move an item higher or lower in the list of options by selecting the option and then clicking the up or down arrow buttons. Like radio buttons, pop-up menu and list items always flock togethernobody ever creates just one.
    POWER USERS' CLINIC
    Giving Order to Your Forms

    If you're not careful, creating forms can quickly lead to visual chaos. The different shapes and sizes of text boxes, radio buttons, and other form objects don't naturally align well with text. One solution: Use tables to get a handle on the appearance of your forms.

    In the picture on the left, form elements were added next to the text on each line, forcing your eye to follow an ungainly zigzag pattern created by the form's text boxes. The result is not only ugly, but also hard to read.

    In the second picture, a table made of 2 columns and 13 rows (one row for each question) organizes the text and form elements into two columns . Notice that the text next to each form element aligns to the right, creating a clean edge that effectively mirrors the edge created by the form fields.

    To make this table-based solution work most effectively, set each text field to the same width using the Char Width property or Cascading Style Sheets (see Section 10.5.3 for an example of this).

    When using this technique, add the <form> tag first, insert the table inside the form's dotted red boundaries, and then add form elements inside the table. If you make a table first and then try to insert a form, Dreamweaver will only let you add it to a single cell of the table.

    See Chapter 7 for more on creating tables.


    Since computer programs are often more comfortable with numbers than namesand humans often the exact oppositeit 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 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, as described in Part Six 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 on Section 22.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 10-11.

As with other form elements, you can, and probably should, add some explanatory text alongside the list or menu in the document window. One easy method: You can automatically add a label to a menu or list using Dreamweaver's accessibility features as described on Section 10.3.

10.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 allows 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 10-4)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. Dreamweaver doesn't have anything built in that helps with this, but you can enlist some third-party solutions as described in the box on Section 10.3.7.

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 10-12.

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" (again, a task that Dreamweaver simplifies with the Label option in the forms Accessibility window described on Section 10.3).

Figure 10-12. Avoid the "Max chars" field. It's intended to limit the number of characters that the field will accept, but doesn't have any effect on the File Field, which selects the full path to the file regardless of how many characters long it is.

EXTENSION ALERT
Adding File Upload Ability to Your Site

Imagine adding a "Job Application" page to your site, where applicants could upload their resumes for review. Or a Web-based way for clients to submit their graphic files and word processing documents.

Dreamweaver lets you add a File Field to a form, but doesn't provide the tools to make this useful feature function on your Web site. To compensate for that glaring omission, you can turn to extensions that add this missing power to Dreamweaver when building a dynamic Web site (as described in Part Six of this book). DMXZone (www.dmxzone.com) offers three fee-based extensions for ASP, ASP.NET, and PHP. The Pure Upload extension offers many different settings to manage the process of uploading files to a Web site, including the ability to rename duplicate files and add file information to databases.

For ColdFusion as well as ASP and PHP, Interakt (www.interaktonline.com) also sells an extension, MX File Upload. This extension not only uploads graphic files, but it can also resize them on the server, so that they take up less room and will fit the particular dimensions you requirefor example, so all the photos fit nicely in a Web photo album.


10.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 that 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 the 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 (see Section 2.1.3) and if Invisible Elements is turned on in the View menu (View Visual Aids Invisible Elements).
Form Button. If the Accessibility window appears (see Section 10.3), you dont need to add a label, since the button itself will have "Submit," "Reset," or whatever text you wish emblazoned across its face.

The Property inspector controls (Figure 10-13) for a freshly inserted button are:

  • Button Name . The button's name provides the first half of the "name/value" pair that's sent when the form is submitted (see Section 10.1.1).

  • Value . The value is the label 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 .

    So what your visitors see printed on the button"Click Me"is also the value that's transmitted along with the button's name when the form is submitted. This 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 either deletes the record from the database or modifies it.

  • Action . These three buttons govern what happens when somebody clicks your button. A "Submit form" button transmits the form data over the Internet to the form-processing 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.)

    The Reset button used to appear on nearly every form on the Web; these days it's used far less frequently, mainly because it's unlikely that anyone would want to completely erase everything they've typed into the form. In addition, its presence offers the unfortunate possibility that a visitor, after painstakingly filling out a form, will mistake the Reset button for the Submit button, and click iterasing everything they've typed. If you do add a Reset button, make sure you don't put it right next to a Submit button.

    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.


Tip: You can also use a graphic as a Submit button, thanks to something called an Image Field, thus freeing you to be more creative with the look of the button itself. Click the Image Field button on the Insert bar, or choose Insert Form Objects Image Field, to select a graphic you want to use as a button. When a Web visitor clicks the image, it submits the form and all its data. (Unfortunately, Image Fields only do one thing: submit form data. They cant be used as form Reset buttons.)
Figure 10-13. Buttons have just three properties: Name, Value, and Action. Like other form elements and HTML tags, Dreamweaver also lets you apply a CSS class style to improve the design of your forms.

10.3.9. 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.

The Label tag button on the Forms tab of the Insert bar (see Figure 10-2) doesn't do much more than switch you into Code view and drop the <label> tag into your HTML. A far better way to insert labels is to use Dreamweaver's form accessibility option, as described on Section 10.3. However, there are some cases where you won't want to put the label directly next to the form field; for example, when using tables to lay out a form, you'll usually put the label in one table cell and the form element in another. In this case, you'll need to jump into Code view to add a label anyway, and this button can save you a little typing. This process is described in the tutorial on Section 10.5.3.

FREQUENTLY ASKED QUESTION
Emailing the Results of a Form

I don't want to store form submissions in a database or anything fancy like that. I just want to receive an email with the information from each form submitted on my site. How do I do that ?

This common functionavailable on countless Web sitesmay seem like an easy task, but Dreamweaver doesn't supply a tool for automating the process. Basically, you need a program to collect the data and send it off in an email. Most Web hosting companies provide just such programs. They generally work like this: you build a form, set the form's Action property (see Section 10.2) to point to the URL of the form-emailing program, and add one or more hidden fields. The hidden fields contain information for the program to usesuch as the email address the results should go to and the page the visitor should end up at after she submits the form. Since this form-emailing program varies from server to server, you need to contact your Web hosting company for details.

There are, however, a few free extensions, and some commercial ones, that let you set up this emailing scheme without leaving the friendly confines of Dreamweaver. On the free side, check out Kaosweaver Kaosmailer (www.kaosweaver.com/extensions/details.php?id=69&cid=18), which works for ASP, ColdFusion, and PHP server models (see Section 20.1.1 for more on server models). Dan Short's SOS Basic CDO Emailer (www.dwfaq.com/Store/detail/?id=wsBasicCDO) offers similar features for Windows Web servers.

There are also many commercial extensions. For basic form mailing, the Mail Form extension for ASP and PHP is available from Felix One (www.felixone.it/extensions/dwextensionsen.asp). Two other extensions offer much more advanced emailing features, including the ability to mass-email newsletters to email addresses stored in a database: WA Universal Email from WebAssist (www.webassist.com) works for ASP and ColdFusion pages, and DMXZone (www.dmxzone.com) sells both an ASP and a PHP version of its Smart Mailer extension.


10.3.10. Fieldset Tag

The Fieldset tag is a form organization tool, 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 code, 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 most of the latest browsers, the Fieldset tag also has a visual benefit. Internet Explorer 4 and above, Firefox, Safari, Opera, 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 10-2). Type a label (called, somewhat dramatically, a "Legend") for the fieldset in the Label window that appears, and then click OK.

Previous versions of Dreamweaver didn't display a fieldset's border. Dreamweaver 8, in addition to displaying the label you typed, displays a simple border around all of the fields you selected. Because different browsers display this border differently, make sure to preview the page (F12 or Option-F12 on a Mac) in a recent version of Internet Explorer, Mozilla, Opera, or Safari to see both the label and the border surrounding the form elements in the set.



Dreamweaver 8[c] The Missing Manual
Dreamweaver 8[c] The Missing Manual
ISBN: 596100566
EAN: N/A
Year: 2006
Pages: 233

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