| When you insert form objects into your HTML document, it is important to keep the objects within the red, dashed lines. If you have several sets of red, dashed lines in your document, that means you have several forms in your document, which will need to have their own Submit buttons. So as you add form objects to the page, if your intent is to have one form, it is extremely important to have only one form delimiter on your page. You cannot resize the form delimiter; the delimiter expands as form objects are inserted between them. It's also worth noting that the delimiter or red, dashed lines will not appear in the browser. Remember it is a visual aid, so that you as the developer have an idea as to where the form tag is within the document. After you've placed a form element inside the document, you should name it in the Properties Inspector. It's always a good idea to name all your form objects. Often when receiving data, the data will equal whatever form object it came from. For example, if the end user filled out a text field that asked for his name and the text field didn't have a name, the information, when returned, would look like this: textfield1=Persons Name. Now you could probably figure out that it's the end user's name, but not all answers will be so obvious. If you name the form object, it will return more helpful information. If you named the text field "name," the data returned would look like this: name=Persons Name, which is more helpful. If you send information to a table in a database, you might want to name the form object the same name as the column of the table into which the data will be entered. Additionally, you should avoid spacing and special characters in your naming conventions. Working with Text Fields Text fields in forms allow the end user to type in information. The end user can enter in any combination of alphanumeric content. As the developer, you have several options when creating text fields. Text Fields You can add content other than form objects into the document. For example, before you insert a text field, you may want a label in the document to let the end user know what information the proceeding text field is looking for. To insert a text field, be sure to have the Forms tab selected in the Insert panel. Here, you can click the Insert Text Field button, but first be sure to have a blinking cursor in your document showing where you want the text field to appear, which should be somewhere with the red, dashed lines. You can also choose Insert, Form Objects, Text Field. This will place a text field inside the red, dashed lines, as shown in Figure 6.3. If you get an alert message asking you to add a form tag, as displayed in Figure 6.4, this means your blinking cursor was outside the form delimiter. If you already have a form delimiter, choose No, replace your blinking cursor, and insert the text field again. Figure 6.3. A text field is placed inside the document that appears between the form delimiter or dashed lines.
Figure 6.4. Dreamweaver warns you by asking you to insert a new form tag if you try to place form object outside the form delimiter.
TIP The warning dialog box pictured in Figure 6.4 offers the option to not show this message again. I recommend not checking this, because this is a helpful warning message. Often, you're not going to want a new form tag, and if Dreamweaver is about to create one, it's best if you know first.
After inserting the text field, and with it selected, notice the different options available for the text field in the Properties Inspector, as shown in Figure 6.5. Figure 6.5. In the Properties Inspector, notice the options for the text field.
The first thing you should do is type in a name for this form object in the Properties Inspector. You should name it so that it corresponds to the information you're looking for. Also, notice there are Character Width and Max Characters options. The Character Width option is the size in which the text field will appear. If you type in a value of 25, the physical size of the text field will be able to display 25 characters. Do not get this confused with how many characters can be typed in or accepted by the field. The end user could still paste a resume, or even worse a virus, into the text field even though the size is only 25. The text would simply scroll to the side, so only 25 characters can be visible at a time. Often, designers set a character size so that the form can accommodate a design. If you want to limit how many characters the text field will accept, you must enter a value for Max Characters. This determines how many characters the end users can type. When limiting the characters, keep in mind the information you are looking for from the end users. If you want them to type in their favorite color, a Max Character value can be somewhere around 20; how many color names do you know that are larger than 20 characters? However, if you're looking for someone's name, you may want to leave a little more space. Maybe the end users will include their first, middle, and last names, and maybe even Jr., II, or PhD. Perhaps a value around 60 is more appropriate. Whatever the case may be, you should limit the characters to some value to avoid unneeded, or even unwanted, information. By default, text fields are blank. However, you can type in an initial value. If the information you wanted the end user to enter was a name, you might want the initial value to be something like "Please type your name." Then when the form is loaded, that text will already be in the text field, as shown in Figure 6.6. In many cases, developers do not like having an initial value in a text field, especially if they want to validate the form to make sure all form objects have been filled out or completed by the end user. If values are already inside the form objects, it's very difficult to check such a thing. Figure 6.6. This text field has an initial value that appears inside the text field.
Password Text Boxes A password text box is slightly different from a traditional text field. In a typical text field, the information typed by the end user is what is displayed in the text field onscreen. This is called echoing. In some situations, you may prefer the information not to be echoed in the case of a password, for example. To do this, select the Password option in the Properties Inspector. With that option selected, when the end user types in the text field, the text appears as an asterisk (*) in Windows and a (•) bullet on Macintosh. Only single-line text fields can have the Password option applied to them. It's also important to note that this option in no way encrypts the data. It's just a precaution from prying eyes when you're typing onscreen. After the data is sent, the Web administrator, or whoever looks at the data, will see whatever is typed into a password field as normal text. Multiline Text Fields Multiline text fields are an extension of the single-line text field. They pretty much behave the same way; they just offer an area for a user to enter more detailed information. Many form objects use the <input> tag, whereas a multiline text field uses a <textarea> tag. You can get a multiline text field into your document in a couple of ways. The first way is to highlight a single-line text field and in the Properties Inspector, choose the Multi-line option. When you do that, you'll notice that some options change in the Properties Inspector: the text field gets larger by three lines and scrollbars appear. The second way to add a multiline text field is to insert it from the beginning. Under the Forms tab of the Insert panel, click the Insert Text Area button or choose Insert, Form Objects, Text Area. As you insert a text area or a multiline text field, notice the two options in the Properties Inspector. The Max Characters option has been replaced with a Number of Lines option, and the Wrap drop-down menu is no longer grayed out. In the Number of Lines text field, enter a value for how many lines you want the text area to have. Three is the default, but you can add as many as necessary. The next option is Wrap, and the selected option is default. This option changes the way text behaves in the multiline text field. When the end user is typing into the text field and types as far right as possible, instead of the cursor automatically advancing down to the next line, the box will scroll horizontally. For the text to move down to the next line, the end user has to press Return (Mac) or Enter (Windows) on the keyboard. To get the effect you desire, choose one of these four options: Default This option will not insert the Wrap attribute in the <textarea> tag. Therefore, the way this text will behave in the text field is determined by the end user's browser preferences. Off If you choose Off, the text will not wrap within the multiline text field. Virtual This option will wrap the text on the computer screen. However, when the data is submitted, the information will be submitted as a single-line string. Physical Choose this option if you want the data to wrap when submitted as well as having it wrap in the browser. Working with Check Boxes and Radio Buttons Often when working with forms, the developer is looking for specific information from the end user. Instead of creating a series of text fields for users to answer questions using their own words, you can offer various choices. This works out best for both parties: It's faster and easier for the end user to answer the questions, and the developer gets specific information. You can offer these choices in a couple of ways, but let's first look at check boxes and radio buttons. Inserting Check Boxes Check boxes are the ideal solution if you're looking for an answer to a specific question. With check boxes you can offer a variety of options for the end user to choose from. To insert a check box, click the Insert Check Box button for the Insert panel under the Forms tab. You can also choose Insert, Form Objects, Check Box. After inserting the check box, be sure to give it a name in the Properties Inspector. If you don't give it a name, Dreamweaver will provide a generic name, such as "check box," which isn't going to mean much. You're also going to want to fill out the Checked Value option. Whatever you type in the Checked Value option is what the check box will equal when the data is passed to another page, database, or server. A common situation for using a check box is when you have a question in a form that could have more than one answer. Notice in Figure 6.7 that there is a series of options for the end user to choose from. Figure 6.7. Check boxes offer the end user the option of selecting more than one answer.
Inserting Radio Buttons Radio buttons behave much like their check box cousins, with a few exceptions. The biggest exception is that with radio buttons, only one of the options can be selected. When radio buttons are inserted into an HTML document, they should be inserted as part of a group. You can insert a radio button by clicking the Insert Radio Button button in the Insert panel under the Forms tab. You can also choose Insert, Form Objects, Radio Button. When several radio buttons are inserted into a document and all are options for possible answers to the same question, they must be named the same to make them part of a radio button group. If they are not named the same, they are considered answers to different questions, and more than one can be selected at a time. This makes for a confusing situation for the end user and the person who will be receiving the data. The checked value is what distinguishes the radio buttons from one another. TIP If you need to insert radio buttons and name them all, it's a good idea to name one and copy the name. Then, paste the name into the remaining buttons. This will save time and potential human error, such as typos.
By default, none of the radio buttons will be selected, unless you choose the Initial State option. Often, companies automatically have Yes selected to a question like, "Would you like to be on our mailing list?" How nice of them! A new, easier way to insert radio buttons is to insert them by groups. Again, this will save time and potential errors. The key here is that you must want the radio buttons to appear vertically in the document. If you want them to appear horizontally, you must do it the long way, as explained previously. To insert a radio button group, click the Insert Radio Group button from the Forms portion of the Insert panel. You could also choose Insert, Form Objects, Radio Group. Either way, this launches a dialog box as pictured in Figure 6.8. Figure 6.8. The Insert Radio Group dialog box offers an easy way to add a series of radio buttons to your Web page.
In this dialog box, you add a name for the radio group as well as the values for each of the different buttons. Inserting a Radio Group If you're interested in learning how to use the Insert Radio Group option, follow these steps: -
Create a new document and save it as Radio_try.html. -
Insert a form tag by clicking the Insert Form button on the Insert panel. Notice the red, dashed line form delimiter. -
Place a blinking cursor between the dashed lines. Type in the question: How many cylinders does your car have? -
Next click the Insert Radio Group button in the Insert panel under the Forms tab. This will launch the Radio Group dialog box. -
For the Name option type Engine. Avoid spacing and special characters. -
By default, two values will appear, labeled Radio, and their default value is also radio. Click to highlight the text to change it. You can change the value the same way. -
For the first option, type in 4 cylinders and for the value type in 4. Avoid using spaces in your naming conventions. -
For the second option, type in 6 cylinders and 6 for the value. -
Click the plus (+) sign to add another label and value. Type in 8 cylinders for the label and 8 for the value. -
Finally, choose whether you want the radio buttons to be separated by <br> tags or whether you want them to appear in a table. A table will offer more predictable results. Choose OK. -
Notice as shown in Figure 6.9, the document now contains three radio buttons with labels appearing to the right of them. Figure 6.9. After using the Insert Radio Group option, the buttons appear clearly named and labeled in the document.
|
Working with Lists and Menus Lists and menus provide another way to offer options to a question for an end user. The advantage in using a list or a menu is that there can be many options that will take up less space than radio buttons or check boxes. Inserting a Drop-Down Menu A drop-down menu behaves much like a menu system in an operating system, so they're very familiar to Web surfers and ultimately are very user friendly. The menu will generally open and drop downward, unless the menu is too close to the bottom, and then it will pop upward. Drop-down menus allow the end user to select one of the options. To insert a drop-down menu, you can click the Insert List/Menu button in the Insert panel under the Forms tab of the Insert panel. You can also choose Insert, Form Objects, List/Menu. After the list/menu has been inserted into the document, highlight it. With it highlighted, notice that options are available in the Properties Inspector, as shown in Figure 6.10. Figure 6.10. The Properties Inspector offers options to modify the list/menu.
In the Properties Inspector, be sure to name the list/menu; avoid spacing in your naming convention. For the type, choose Menu. To populate the menu with data, you must click the List Values button. This launches the List Values dialog box. Here you can type in labels and values. Labels are what will show up physically inside the menu. The values, however, are what will be passed to whatever application the form is sending data to. Here you can type in a label and tab over to the value field to enter a value. Most of the time the information will be the same, or the value will be an abbreviated version of the label. Just be sure to avoid spacing in your label-naming conventions. You can continue to tab over to add additional labels and values. You can also click the plus sign to add more items. If you decide you no longer want an item and you want to delete it, simply select it and click the minus ( ) sign. You can even sort from top to bottom how the options will appear. Use the up and down arrows to rearrange the order of the options. When you are happy with the contents, choose OK. If you need to edit it, click the List Values button in the Properties Inspector to relaunch the List Values dialog box. Finally, the list will not work in the Dreamweaver authoring environment. You must test the page in a browser by pressing F12 on your keyboard or by choosing File, Preview in Browser, Internet Explorer. Notice in Figure 6.11 that the drop-down menu works just as you anticipated it would. Figure 6.11. The drop-down menu in the browser offers all the options you listed in the List Values dialog box.
You can highlight one of the options in the drop-down menu to be selected initially in the Properties Inspector. Removing an initially selected value sometimes can be a trick. In the initially selected value scroll box located in the Properties Inspector, scroll all the way down to the bottom and click in the small white area. This will deselect any options. TIP Visit the companion Web site, located at http://www.dreamweavermxunleashed.com to see a QuickTime movie explaining how to create a drop-down menu.
Inserting Scrolling Lists If radio buttons are cousins to drop-down menus, then check boxes are cousins to scrolling lists. Scrolling lists allow the end user to select multiple items. Developers can also control the height of a list, unlike drop-down menus. You insert a scrolling list the same way you insert a drop-down menu. Choose the Insert List/Menu button from the Forms tab of the Insert panel. You can add values to the scrolling list the same way you add values to the drop-down menu. Click the List Values button in the Properties Inspector to launch the List Values dialog box. After listing the values and exiting the List Values dialog box, you need to set up some options in the Properties Inspector. You should be sure to check the Selections Allow Multiple option. If you're not going to allow the end user to select more than one item, you shouldn't be using the List option; create a drop-down menu instead. I say this because people expect to be able to select more than one item when using a list. Next you have to determine how high you want the scrolling list. I recommend a value of least 4 because the scrollbar needs an up and a down arrow, plus a draggable box. To condense this in something less than four line heights looks bizarre. Refer to Figure 6.12 to see a comparison of lists set to different heights. Figure 6.12. Notice the differences between scroll lists set to different height values.
When the list is in the Web browser, a user can select more than one item in one of two ways. The Shift key selects a range of values. For example, if you select the top option, hold down the Shift key, and then scroll down toward the bottom to select the last option, everything between the two options will be selected as well. However, if the end user holds down the Command key (Mac) or the Control key (Windows) when selecting the options, only the options clicked will be selected. One final note on this topic: the widths of both the drop-down menu and the scroll list are determined by the widest value in the form object. Submit Buttons After reviewing the major form objects, you may be wondering how you get this data from a Web browser to somewhere else. The first thing you need to do is add a Submit button. A Submit button sends the form data to the form action. Inserting a Submit Button You can insert a button by pressing the Insert Button button from the Insert panel under the Forms tab. You can also choose Insert, Form Objects, Button. After the button has been placed in the document, notice that there are several options in the Properties Inspector, as shown in Figure 6.13. The first is to name the form object and the second is to label it. The label is the text that will appear on the button; for example, if your form was a credit application, you may want the text "Apply Now" on the button, instead of Submit. To do this, simply type Apply Now in the label and the button will appear that way in the document, as shown in Figure 6.14. Figure 6.13. Several options are available for the button form object.
Figure 6.14. You can have whatever text you want on the button; simply type it into the Label option in the Properties Inspector.
You must also choose one of three action types for the button: Submit Form This is the default action for the button. This action triggers the action located in the <form> tag. You can see the form's action by selecting the form, and the form's attributes, such as the action, will appear in the Properties Inspector. Reset Form Use this option if you want a button that will set the form back to its initial state when loaded. Any information that the end user filled out will be cleared. None Use this option to change the functionality of the button. The button is often referred to as a command button, which can be used to call JavaScript functions. If you do not add additional scripts to this button, it will not do anything. Working with Form Actions Form actions are used to collect all the information the end user enters into the form and process the form data after the Submit button is clicked. There are a variety of ways to process the data, and these are some of the most common methods: Write the form data to a database. Use the data to search a database. Send the information to an email account. Perform calculations based on the data input by the end user. For these methods to be executed, you must couple the HTML form with an action. Actions are typically URLs pointing to some type of script. The URL can point to A server-side application page that uses a middleware scripting language such as ASP, JSP, ColdFusion, or PHP. These pages process the form data and commonly use the data to update or search table information in a database and return results back to the HTML page in the browser. A common gateway interface (CGI) script written in Java or Perl. A CGI script is also a server-side script that performs a particular action and returns the results of the action back to the client. An email address, which gathers the form data and sends it to a specified email account. When the process is complete, the form page reloads. We'll be looking at the last two items toward the end of this chapter. If you're interested in learning more about the option of using a middleware (ASP, JSP, PHP, and so on) refer to Parts 4, 5, and 6 of this book. There is also an option for enctype, which can specify a MIME media type. Form Methods There are also three options for the method in which you can present the form data to the server. The three options are default, GET, and POST. If you choose default, the method will be set to GET. With the GET method, the information is sent to the URL specified in the action; however when using GET, the data must be limited to 255 characters. The data is not secure either. The information gathered from the form is attached to the URL string. Therefore, if the form contained private information, such as a credit card number, it would be visible in the location bar of the browser. GET is commonly used when passing information from page to page in a Web application. Although GET has a downside, as mentioned previously, it is the most supported format. The majority of Web browsers use GET as the default method. If you're looking for something more secure and don't want character limitations, you should use POST. POST is commonly used when sending data out of the browser without having to pass values inside the form to other pages within the site. The method you end up using will greatly depend on the type of page you're creating and what type of scripting language you're using with the form. Testing a Form Locally Here's a trick to test your form locally, to make sure everything is named properly and you achieved your desired results. Let me stress that this is for testing purposes only you'd never want to post this to the Web. To follow this exercise, visit the companion Web site located at http://www.dreamweavermxunleashed.com. Navigate to the Chapter 6 section and download the file form_test.html. After you download the file, open it inside of Dreamweaver; notice that it is a completed form, as shown in Figure 6.15. Each of the form elements are named and labeled properly. Figure 6.15. This file is a completed form; you'll now add functionality to test the page.
Testing a Form Locally Follow these steps to learn how to test a form locally. Make sure you place the test_form.html inside your local root folder of the site you have defined. -
With the form_test.html file open, highlight the form tag in the Tag Inspector to select the form. -
In the Properties Inspector, in the action text field, click the Folder icon to search for a file. This launches the Select File dialog box. In the dialog box, find the test_form.html file and click Choose (Mac) or Select (Windows). The actions will have the file call itself. -
For the method, choose GET. When you choose GET, the form data will appear in the location bar of the browser. -
Test this page in Internet Explorer. This technique does not work in Netscape. Choose File, Preview in Browser, Internet Explorer. This launches the browser. -
In the browser, fill out the form and click Submit. After clicking submit, you'll see the results of the form in the location bar attached to the URL string, as shown in Figure 6.16. Figure 6.16. The results of the form appear in the location bar of the browser.
|
Additional Form Objects Dreamweaver has additional form objects that are not used as much, but they add functionality not only to your form but to your HTML documents. Graphical Buttons Designers often wish they had more control over the appearance of a form. One thing that can be controlled is the appearance of the Submit and Reset buttons. To do this, you can easily add graphics in place of the buttons. The easiest way is not to use the Insert Image File option from the Form section of the Insert panel. The best way is to insert an image through the Common tab of the Insert panel. Open the form_test.html file and delete the Submit button. Place a blinking cursor wherever you want the image button to appear and Choose Insert, Image; then search for the image of your choice. When you find the image and insert it into the document, highlight it, and in the Properties Inspector you'll notice a link choice. In the Link option, type in javascript:document.test.submit();. If you're adding this to a different form, be sure to change the part of the script "test" to the name of the form you're working on. Test this page in a Web browser. Notice that the graphic you inserted acts as the Submit button (see Figure 6.17). Figure 6.17. The form has a graphic for the Submit and Reset buttons.
If you want to change the Reset button, use this script: javascript:document.form1.reset();. Label and Fieldset A label provides an easy way to structurally associate the text label for a field with the field. A fieldset is a container tag for a logical group of form elements. File Field The file field isn't used all that often, but it enables end users to navigate their hard drives for a file and attach it to the form, much like an attachment in an email. The File field is a text field with a Browse button as shown in Figure 6.18. Figure 6.18. The File field allows the end user to attach a file to a form.
Create Navigation with a Jump Menu With a jump menu, you can create an easy, compact navigation option for the end user. A jump menu behaves like a drop-down menu; however, when an option is selected the page will "jump" to a specified hyperlink. To insert a jump menu, place a blinking cursor in the location where you'd like the menu to appear. Click the Insert Jump Menu button under the Forms tab of the Insert panel. You can also choose Insert, Form Objects, Jump Menu. This launches the Insert Jump Menu dialog box as shown in Figure 6.19. Figure 6.19. The Insert Jump Menu dialog box offers options to link different menu items to different pages.
You can add items by clicking the plus sign and adding the label of the menu item in the Text option. Type in the URL you'd like that menu item to link to. You can either browse for a local file, or you could type in an absolute URL. The second portion of the dialog box offers options for where you want the link to open. You can target a frame in a frameset, in a new window, or in the existing window. You can insert a Go button, which allows the end user to click the Go button to choose the first choice. The final option is to have the menu reset after a link has been selected. You can modify a jump menu a couple of ways. If you simply need to change some of the menu items, you can highlight the jump menu and in the Properties Inspector click the List Values button to open the List Values dialog box. The second way is to highlight the jump menu and open the Behaviors panel. If the Behaviors panel is not open, choose Window, Behaviors. In the Behaviors panel, double-click the Jump Menu behavior to launch the original Jump Menu dialog box. | 
