[ Pobierz całość w formacie PDF ]
.Position the cursor where you want the button to appear.Then either select Button inthe Forms category of the Insert bar, or choose Insert ª' Form Objects ª' Button fromthe menu.Alternatively, you can simply drag the Button control from the Insert bar anddrop it into place on an existing form.2.In the Button Property inspector, choose the button Action type.In Figure 11-11, theProperty inspector indicates that the Submit form button action is selected (this is thedefault).To make a Reset button, select the Reset form option.To make a Commandbutton, select the None option.3.To rename a button as you want it to appear on the Web page, enter the new name inthe Label text box.When working with Command buttons, it s not enough to just insert the button and give itTipa name.You have to link the button to a specific function.A common technique is to useJavaScript s onClick event to call a function detailed in the section of thedocument:Graphical buttonsHTML doesn t limit you to the browser-style default buttons.You can also use an image as aSubmit, Reset, or Command button.Dreamweaver has the capability to add an image fieldjust like other form elements: Place the cursor in the desired position and choose Insert ª'Form Objects ª' Image Field, or select the Image Field button from the Forms category of theInsert bar.You can use multiple image fields in a form to give users a graphical option, asshown in Figure 11-12.When the user clicks the picture that you ve designated as an image field for a Submit button,the form is submitted.Any other functionality, such as resetting the fields, must be coded inJavaScript or another language and triggered by attaching an onClickevent to the button.This can be handled through the Dreamweaver behaviors, covered in Chapter 23, or by hand-coding the script and adding code for the onClickevent to the button. 144931-6 ch11.F 7/18/02 6:59 AM Page 433Chapter 11 &' Interactive Forms433ButtonFigure 11-11: You can choose an action and a label for a button through the ButtonProperty inspector.In fact, when the user clicks a graphical button, not only does it submit your form, it passesalong the x, y coordinates of the image.The x coordinate is submitted using the name of thefield with an.xattached; likewise, the y coordinate is submitted with the name of the fieldwith a.yattached.Although this latter feature isn t often used, it s always good to know allthe capabilities of your HTML tools.Another technique is involved if you want to include more graphical buttons than a singleSubmit button on your form.As only one image field can be used as a Submit button, a stan-dard image is inserted, and JavaScript handles the programming chores required for submit-ting or resetting the form.An advantage to this technique is that the image can even be set upas a rollover, meaning that the image changes as the user moves the mouse over the button.To use an image for a Submit or Reset button, follow these steps:1.Choose Insert ª' Image or select the Image button from the Common category of theInsert bar.2.In the Insert Image dialog box, enter the path to your image or select the folder icon tolocate the file.The image can be in GIF, JPEG, or PNG format.3.Give the image a name and, if desired, alternative text using the appropriate text boxesin the Property inspector. 144931-6 ch11.F 7/18/02 6:59 AM Page 434Part II &' Web Design and Layout4344.In the Link field of the Property inspector, enter the following code for a graphicalSubmit button:javascript:document.form1.submit()Similarly, enter this code for a Reset button:javascript:document.form1.reset()NoteBe sure to change the code to reflect your specifics: the name of your form as well as thename of your images.Image FieldFigure 11-12: Each flag in this page is more than an image; it s an image field that alsoacts as a Submit button.Using the Hidden Field and the File FieldYou should also be aware of two other special-purpose form fields.The hidden field and thefile field are supported by all major browsers.The hidden field is extremely useful for passingvariables to your Web application programs, and the file field enables users to attach a file tothe form being submitted. 144931-6 ch11.F 7/18/02 6:59 AM Page 435Chapter 11 &' Interactive Forms435The hidden input typeWhen passing information from a form to a CGI program, the programmer often needs to senddata that should not be made visible to the user.The data could be a variable needed by theCGI program to set information on the recipient of the form, or it could be a URL to which theserver program will redirect the user after the form is submitted.To send this sort of informa-tion unseen by the form user, you can use a hidden form object.The hidden field is inserted in a form much like the other form elements.To insert a hiddenfield, place your cursor in the desired position and choose Insert ª' Form Objects ª' HiddenField or choose the Hidden Field button from the Forms category of the Insert bar.The hidden object is another input type, just like the text, radio button, and checkbox types.A hidden variable looks like the following in HTML:As you would expect, this tag has no representation when it s viewed through a browser.However, Dreamweaver does display a Hidden Form Element symbol in the Document win-dow.You can turn off the display of this symbol by deselecting the Hidden Form Field optionfrom the Invisible Elements category of Preferences.The file input typeMuch more rarely used is the file input type, which enables any stored computer file to beattached to the form and sent with the other data.Used primarily to enable the easy sharingof data, the file input type has been largely supplanted by modern e-mail methods, which alsoenable files to be attached to messages.The file field is inserted in a form much like the other form elements.To insert a file field,place your cursor in the desired position and choose Insert ª' Form Objects ª' File Field orchoose the File Field button from the Forms category of the Insert bar.Dreamweaver auto-matically inserts what appears to be a text box with a Browse (Choose) button.In a browser,the user s selection of the Browse (Choose) button displays a standard Open File dialog boxfrom which a file can be selected to go with the form.Improving AccessibilityYou can do several things to make your HTML forms more accessible to people with visualimpairments, who may be using a nonvisual browser.Many of these options are also usefulfor users accessing the page visually.New Dreamweaver makes it easy for Web page authors to improve the accessibility of their WebFeatureforms by setting an option in the Accessibility category of the Preferences dialog box.To turn on the accessibility controls for forms, choose Edit ª' Preferences and then, in theAccessibility category, select the Form Objects option.With this option enabled, everytime you insert a form object, the Input Tag Accessibility Attributes dialog box, shown inFigure 11-13, is displayed. 144931-6 ch11 [ Pobierz caÅ‚ość w formacie PDF ]

  • zanotowane.pl
  • doc.pisz.pl
  • pdf.pisz.pl
  • hanula1950.keep.pl

    		•