[ Pobierz całość w formacie PDF ]
.Providing Checkboxes and Radio ButtonsWhen you want your Web page user to choose between a specific set of options in your form,you can use either checkboxes or radio buttons.Checkboxes enable you to offer a series ofoptions from which the user can pick as many as desired.Radio buttons, on the other hand,restrict your user to only one selection from a number of options.You can achieve the same functionality as checkboxes and radio buttons with a different lookTipby using drop-down lists and menu boxes.These methods for presenting options to the userare described shortly.CheckboxesCheckboxes are often used in a Select All That Apply type of section, when you want toenable the user to choose as many of the listed options as desired.You insert a checkbox inmuch the same way you do a text field: Select or drag the Check Box object from the Insertbar or choose Insert ª' Form Objects ª' Check Box.Like other form objects, checkboxes can be given a unique name in the CheckBox Propertyinspector (see Figure 11-4).If you don t provide a name, Dreamweaver inserts a generic one,such as checkbox4.In the Checked Value text box, fill in the information you want passed to a program when theuser selects the checkbox.By default, a checkbox starts out unchecked, but you can changethat by changing the Initial State option to Checked.Radio buttonsRadio buttons on a form provide a set of options from which the user can choose only one.Ifa user changes his or her mind after choosing one radio button, selecting another one auto-matically deselects the first choice.Dreamweaver gives you the following options for insert-ing radio buttons:&' To insert radio buttons one at a time, choose or drag Radio Button from the Forms cat-egory of the Insert bar, or choose Insert ª' Form Objects ª' Radio Button.&' To insert several related radio buttons at one time, choose or drag the Radio Groupbutton from the Forms category of the Insert bar, or choose Insert ª' Form Objects ª'Radio Group. 144931-6 ch11.F 7/18/02 6:59 AM Page 422Part II &' Web Design and Layout422CheckboxFigure 11-4: Checkboxes are one way of offering the Web page visitor any number ofoptions to choose.Unlike checkboxes and text fields, each radio button in the set does not have a uniquename instead, each group of radio buttons does.Giving the entire set of radio buttons thesame name enables browsers to assign one value to the radio button set.That value is deter-mined by the contents of the Checked Value text box in the Property inspector.Figure 11-5shows two different sets of radio buttons.The figure shows the Property inspector for one ofthe radio buttons in the osRadio group, on the right.In this example, each button in thegroup is assigned the name osRadio.To designate the default selection for each radio button group, you select the particular radiobutton and make the Initial State option Checked instead of Unchecked.In the form shown inFigure 11-5, the default selection for the osRadio group is Macintosh.Because you must give all radio buttons in the same set the same name, you can speed upTipyour work a bit by creating one button, copying it, and then pasting the others.Don t forgetto change the Checked Value for each button, though. 144931-6 ch11.F 7/18/02 6:59 AM Page 423Chapter 11 &' Interactive Forms423Radio ButtonRadio GroupFigure 11-5: Radio buttons enable a user to make just one selection from a group ofoptions.You can create an entire set of radio buttons at one time using the Radio Group command.When you choose the Radio Group button from the Forms category of the Insert bar, orchoose Insert ª' Form Objects ª' Radio Group, the Radio Group dialog box appears, as shownin Figure 11-6.This dialog box not only lets you define multiple radio buttons at once, it auto-matically formats them either in a table or using line breaks, at your discretion.Figure 11-6: Use the Radio Group dialog box to createan entire set of radio buttons at one time. 144931-6 ch11.F 7/18/02 6:59 AM Page 424Part II &' Web Design and Layout424Follow these steps to set up your radio button group in the Radio Group dialog box:1.In the Name text box, replace the default name with a meaningful name for your newset of radio buttons.2.Each entry in the list represents a separate radio button in the group; the dialog boxopens with two filler buttons as an example.Click on the first entry in the Label list,and replace the word Radio with the label for the first button in your group.Press Tabto move to the Value column, and replace the default with the appropriate value foryour button; this is the data that will be sent to the server when the radio button isselected.Repeat this step for the second radio button in your set.3.If you have more than two radio buttons in your set, click the Add (+) button to addanother item to the list, and fill out the appropriate values, as explained in Step 2.4.Specify whether you want your radio buttons inserted on separate lines using thetag, or automatically formatted in a table.Then click OK.Creating Form Lists and MenusAnother way to offer your user options, in a more compact form than radio buttons andcheckboxes, is with form lists and menus.Both objects can create single-line entries in yourform that expand or scroll to reveal all the available options.You can also determine howdeep you want the scrolling list to be; that is, how many options you want displayed at onetime.Drop-down menusA drop-down menu should be familiar to everyday users of computers: The menu is initiallydisplayed as a single-line text box with an arrow button at the right end; when the button isclicked, the other options are revealed in a list or menu.(Whether the list pops up or drops down depends on its position on the screen at the time it is selected.Normally, thelist drops down, unless it is close to the bottom of the screen.) After the user selects one ofthe listed options and the mouse is released, the list closes, and the selected value remainsdisplayed in the text box.Insert a drop-down menu in Dreamweaver as you would any other form object, with one ofthe following actions:&' From the Forms category of the Insert bar, select the List/Menu button to place a drop-down menu at the current cursor position.&' Choose Insert ª' Form Objects ª' List/Menu from the menu to insert a drop-down menuat the current cursor position.&' Drag the List/Menu button from the Insert bar to any location in the Document windowand release the mouse button to position the drop-down menu.With the List/Menu object inserted, make sure the Menu option (not the List option) isselected in the Property inspector, as shown in Figure 11-7.You can also name the drop-downmenu by typing a name in the Name text box; if you don t, Dreamweaver supplies a generic select name. 144931-6 ch11.F 7/18/02 6:59 AM Page 425Chapter 11 &' Interactive Forms425List/MenuMenu optionFigure 11-7: Create a drop-down menu by inserting a List/Menu object and thenselecting the Menu option in the List/Menu Property inspector.Menu valuesThe HTML code for a drop-down menu uses the.tag pair sur-rounding a number of [ Pobierz caÅ‚ość w formacie PDF ]