In Dreamweaver, you can build forms with one-click ease using the Forms tab of the Insert bar (see Figure 10-2).
To begin, you need to insert a <form> tag to indicate the boundaries of a form:
In the document window, click where you wish to insert the form .
You might decide to place it after a regular paragraph of introductory text, for example.
Select the Forms tab on the Insert bar .
The tab reveals 14 form-building tool icons.
Click the Form icon on the Insert bar (the far-left square) .
Alternatively, if you're a menu-driven person, choose Insert Form Form instead.
Either way, a red, dashed-line rectangle appears in the document window, indicating the boundaries of the form. (If you don't see it, choose View Visual Aids Invisible Elements.) The top line represents the opening <form> tag; the bottom represents the closing tag. Make sure you always insert form objects, like buttons and menus , inside these lines. Otherwise , Dreamweaver will think you're trying to create a second form on the page. (It's perfectly valid to include more than one form per page, but your visitor can submit only one formand its dataat a time.)
Since you can place so many other HTML elements inside of a form, it's often easier to insert the form first, adding tables, graphics, text, and form objects later.
If it isn't already selected, click anywhere on the dotted red line to select the form .
Unlike other objects, like images, the red line of the form doesn't change its appearance when selected. The only way you know you've selected the form is by checking the Property inspector. If it displays the "Form name " label at the upper-left corner, as shown in Figure 10-3, you've done it correctly.
If you like, type a name for your form into the "Form name" field .
This step is optional. A form doesn't need a name to work, but a name is useful if you use JavaScript or a Dreamweaver behavior (see the next chapter) to interact with the form or any of its fields.
Type a URL into the Action field, or select a file by clicking the tiny folder icon .
Your mission here is to specify the location of the program that will process the form. If someone else is responsible for the programming, ask that person what to enter here. It will be a standard Web patheither an absolute URL (one that begins with http:// ) or just the path to the server's form-processing program. (See Section 4.1.2 for more on these different kinds of links.) If you're using Dreamweaver's dynamic page-building tools, you'll most often leave this field blank. When you apply a server behaviorthe programming code that makes the page "dynamic"Dreamweaver inserts the correct URL.
Either way, the file name doesn't end in .html. The path might be, for example, ../cgi-bin/forms.pl . In this case, .pl is the extension used to indicate a program written in the Perl programming language. Other common file extensions for Web programs include .asp (for Active Server Pages), .cfm (for ColdFusion Markup Language pages), .jsp (for Java Server Pages), .php (for PHP pages), or .cgi (for CGI programs).
Using the Method pop-up menu, specify how you want the form data transmitted to the processing program (see Figure 10-3) .
Basically, forms can transmit data to a Web server in either of two ways. The more common method, called POST, is the one you'll use most often. (It's what browsers use unless you tell them otherwise.) It sends the form data in two steps: first, the browser contacts the form program at the URL you specified in the previous step; then, it sends the data to the server. This method gives a bit more security to your data, and it can easily handle forms with lots of information.
The GET method, on the other hand, transmits the form data in the URL, like this: http://search.yahoo.com/bin/search?p=dogs. The characters following the ? in the address represent the form data. This code submits a single form fieldnamed p , with the value dogs to the server. As you can see, such a URL could get extremely long. Because some servers can't handle very long URLs, the GET method is inappropriate for forms that collect a lot of data.
If you're using frames , select a Target option .
The Target option lets you specify a particular frame for displaying the results of the form submission. You can also choose the "_blank" option to open a new browser window to display the results. (See Section 4.2.3 for more on the Target property.)
Select an encoding type, if you like .
You usually don't have to select anything from the Enctype menu. The default value empty is almost always correct and is the same as selecting the much more long-winded "application/x-www-form-urlencoded" option.
But if you're using the File Field button (see Section 4.1.5) to let visitors upload files to your site, you should use the "multipart/form-data" option. In fact, Dreamweaver automatically selects this option when you add a File Field to a form.
You've laid the foundation for your form. Now you're ready to add the input controls to itmenus, checkboxes, and so onas described in the next section.