All the necessary XHTML coding needed for creating a feedback form or any other forms can be done in Dreamweaver. To insert a form, first select Forms from the insert menu in the Insert bar (Fig. 20.26). The Insert bar will now contain various options for creating forms. Click the leftmost button to insert an empty form into the document. Forms can also be inserted by selecting Form from the Insert menu’s Form submenu.
After a form is inserted into a document, Dreamweaver displays a dotted line to delin-eate the bounds of the form. Any form objects (i.e., text fields, buttons, etc.) placed inside
this dotted line will be part of the same form element in the XHTML code that Dream-weaver generates.
We can modify the properties of a form by clicking anywhere inside the dotted line that delineates the form, then clicking <form#name> (where name is the name of the form element) in the tag selector at the bottom of the Document window. Dreamweaver assigns default names to forms in sequential order (i.e., the first form inserted is named form1, the second form is named form2 and so on). The name of the form can be altered in the Form name field in the Property Inspector. The Property Inspector can also be used to set the Action and Method attributes of the form, which are required for server-side processing. Server-side technology is discussed later in this book.
You can insert text field by clicking the Text Field button in the Insert bar or by selecting Text Field from the Insert menu’s Form submenu. The Input Tag Accessibility Attributes dialog that appears allows you to set an id and label for the text field, and to specify some of its other properties. Once placed, a text field’s attributes can be adjusted using the Property Inspector. Its name, id and value attributes can be set or modified along with the size and maxlength (Fig. 20.27). The text field type also can be set to Multi line, allowing multiple lines of text, or Password, making all entered text appear as asterisks (*).
Scrollable Textareas also can be selected from the Form Insert bar. Their properties are almost identical to those of a text field, except that they have the additional attributes for the number of lines (specified in the Num lines field in the Property Inspector) and Wrap (i.e., how the text area handles lines of text that exceed its width).
A drop-down select menu can be added by clicking the List/Menu button in the Insert bar. To add entries and values to the list or menu, click the List Values… button in the Property Inspector (Fig. 20.28). In the List Values dialog, you can add entries by pressing the + button, and remove entries by pressing the – button. Each entry has an Item Label and a Value. An entry can be made the default selection by selecting it in the Initially selected list in the Property Inspector.
Now that we’ve discussed the basics of forms in Dreamweaver, we’re ready to create a “rate my website” form. To start, insert a form into a new page, followed by text fields, menus and text. The elements should appear as in Fig. 20.29.
Make the text fields the proper width by adjusting the Char width value in the Property Inspector. Now select the drop-down menu to the right of the text How would you rate our site? and click the List Values… button in the Property Inspector to add appropriate entries to the list (e.g., Excellent, Good, Fair, Poor and Terrible).
This example has three radio buttons, all contained in the same group. To add a group of radio buttons, click the Radio Group button in the Insert bar. In the Radio Group dialog, specify the Name of the group, and each radio button’s Label and Value. The Radio Group dialog works similarly to the List Values dialog.
To create the Reset and Submit buttons, click the Button selection in the Insert bar. The Value of each new button defaults to Submit, but can be changed to Reset or any other value using the Property Inspector. The button’s Property Inspector can also be used to assign a Button name, which is assigned to the button’s name and id attributes, or to specify its Action, or type attribute.
For a complete list and description of Dreamweaver’s XHTML tags, open the Refer-ence panel by selecting Reference from the Window menu. Select the desired XHTML ele-ment from the Tag pull-down list in the Reference panel.
Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.