Please Note: This lecture was originally designed with DW3 in mind, so may have some differences from your current version. However, all the information is still valid and useful!

Learning Objectives:

In this section, you will learn

• About Forms
• Insert a Form
• Using Text boxes
• Providing User Options
• Activating Your Form
• About Using CGI Programs
• Setting Permissions in Dreamweaver

About Forms

Creating a form turns your everyday HTML page, which is a static page of text and images, into a dynamic page that lets you interact with your viewer. Instead of the one-way street of information provided to the viewer, your page becomes interactive, with the viewer returning information to you. You're not the only one doing all the work!

In order to do this, you must provide a way for the viewer to enter their information. An HTML form will provide this. However, you need to note that to process the information, Dreamweaver 3 cannot help. You will need to implement some sort of script, such as a common gateway interface (CGI), Perl, JavaScript or Java, to take the information provided from your form and manage the received information.

A few words about the script...

As you know, there are many things that you can do with your Web pages just using HTML. You can display your pages, show-off your graphics, set up your e-mail links so others can send you messages, create tables and frames, and a whole lot more. But you are limited, since this is a one-way street. You're sending the message and someone else is receiving - you're doing all the talking and they are doing all the listening.

At a certain point, you will want your site to handle more complex tasks, like taking the information about a person visiting your site. This is beyond your browser's capabilities. This function requires sending information from the viewer's browser through the Web server, to a program that will process the information before sending it back through the server to your browser. CGI, which stands for common gateway interface, is a common method for doing this. It is not a programming language, but a protocol, or set of rules for how a Web server talks to a program. It works with a scripting language to process the information. So, while your HTML page is static (in spite of that little running gif you might have), a CGI program will make the page dynamic and can operate in real time.

Programs that deal with Web pages are usually written in Perl because it is well-suited for this exchange of information, but you can use other scripting languages as well. You must put all CGI (or other) scripts into a specially designed directory on your Web server. It is usually called a CGI-bin. If you have access to the directory of your server, you can usually see a folder in the public folders that reads "CGI-bin". You do not usually have automatic access to the CGI-bin, however. Usually, you will need to request this information and ability to use it, from your Internet Service Provider. Once this is set up, you will tell the server what permissions to give your script. This will establish who can read, write (or change), and execute your file.

Because this is a Dreamweaver class, I just presented an overview on how you can make your form interactive. There are a lot of great resources for using CGI and Perl on the Web. Webmonkey has a basic tutorial, and the O'Reilly books usually are a good source for understanding the ins and outs of this type of scripting.

Now back to Dreamweaver...

Dreamweaver 3 allows you a very easy way to create and design the form page for its onscreen presentation. You will have to follow up with your ISP so that you or someone who works with you, may implement a program to collect and manage the information from the form.

Inserting a Form in Dreamweaver

Forms, like HTML tables, are self-contained units within a Web page. All the elements of a form are contained within the form tag: <form> and </form>. You cannot nest forms within a form, like you can do with tables, but you can put several forms on a single Web page.

There are three attributes to a <form> tag. Two of these are commonly used:

• The method attribute tells the server how the contents of the form should be presented to the CGI program. There are two possible method values, get and post. Get passes the attached information to a URL and is rarely used. Post has the server present the information as standard input, and there is no limit on the amount of data it passes.
• The action attribute determines what should be done with the form content. This action can be a URL for running a particular CGI program, send a e-mail, or some other scripting action.
• The third attribute is not commonly used. It is enctype, which specifies the MIME media type.

A typical HTML for a <form> tag would look something like this:

<form method="post" action="http://www.csmmultimediaprogram.net/_CGI-bin/mail.pl">

The .pl extension stands for Perl. Perl can be edited in any regular text editor. It is often used to create CGI programs, although there are many CGI scripts available to copy from the internet.

Between the <form> tags, you will insert objects for the viewers to use in filling out the form. You can put in text boxes for written information, radio buttons when you want the viewer to select one answer, checkboxes to choose one or more, maybe a scrolling list or a jump menu.

Return to Top

Each one of these - text boxes, radio buttons, checkboxes - are input devices. Each handles a particular sort of input. All form input types, except for the textarea, are called by specifying the type attribute. The main tag for these input devices is the <input> tag. An example, using the text box tag, would look like this:

<input type=text value="lastname">

All form input tags have a value attribute. Information that is put in by the user is assigned to the given value. Web servers send all the information from a form in one long text string to whatever program or address that you have specified with your action attribute. So when they fill out the Last Name section of your form, part of the message sent would include the string: lastname=your name.

Using Dreamweaver, a form is inserted just like any other object. Place the cursor where you want your form to start and then select either the Insert Form button from the Forms panel of the Objects palette, or choose Insert > Form from the dropdown menu. Watch for your visual cues: a red dashed outline will be seen across your Document window to indicate you are working within a form.

It is wise to have your Property Inspector open. As with images, tables, and templates, the Property Inspector will change. In this case, it becomes a Form Property Inspector. There are only three values that you can specify regarding forms: the Form Name, the Action, and the Method. It is worthwhile to name your form, just as you did with your frames. This will enable your form to be directly referenced by JavaScript or some other language. Web programmers often use this feature to gather information from the user.

In the Action text box, you can directly enter a URL or mailto address, or you can select the folder icon and browse for a file. You can use the mailto address to send form data to yourself via e-mail, but it does have its problems, especially with Internet Explorer. Some browsers are set to warn the user whenever a form button using mailto is selected. That means that the user has the option of stopping the form data from being sent.

The Method defaults to POST, which is the most commonly used option. You can also choose GET or DEFAULT. DEFAULT leaves the option up to the browser. Usually, you would leave the POST method set.

Return to Top

Forms cannot be placed inline with any other element such as text or graphics.

Some things you should keep in mind about forms:

• Forms expand as objects are added or inserted within them. You cannot resize a form by dragging its boundaries, like you can do with a table or graphic.
• The outline of a form is invisible. There is never a border to turn on or off.
• Forms and tables can be used together only if the form either completely encloses the table, or the table completely encloses the form. A table is very useful to help give structure to your form, but the table has to be completely within the <form>tags. You cannot have a form spanning part of a table.
• Forms can be inserted within layers, and multiple forms can be in multiple layers. However, the layer must completely enclose the form. As with forms spanning tables, you can't have a form spanning two or more layers.

Using Text Boxes

Anytime you use a form to gather information, you will have to provide a place for the user to type their information. This is a form object called a text field. Text fields can hold any number of alphabet or numeric characters, or you can limit your user to a specific number of characters. You decide whether the text field is displayed as a single line, or in multiple lines. When the HTML is written, multiple lines text field uses a <textarea> tag, while the single line text field is coded with <input type=text>.

When you insert a text field, the Property Inspector will show you the attributes you can change. The size of the text field is measured by the number of characters it can display at one time. You can change the length of a text field by inserting a value in the Char Width text box. The default Dreamweaver inserts in the text field is approximately 20 characters wide. The final size is controlled by the browser used to view your page. Unless you limit the number of characters that can be used, the user can enter as many characters as they want, and a text box scroll will appear to display them. The Init Value text box on the Text Field Property Inspector is used to insert a default text string. The user can overwrite this value, if desired.

Return to Top

The value in Char Width determines the visible width of the field. The value in Max Chars determines the number of characters that can be entered.

Normally, all text entered into the text fields are displayed exactly as entered. Programmers call this echoing. You can turn off the echoing by selecting the Password option in the Text Field Property Inspector. When this is selected, the text entered by the user will show up as asterisks (windows) or dots (macs). Only single line text fields can be set as a password field, unless you use JavaScript or another programming language.

When you want to give your users a larger text area in which to type, you will set the text field to the Multiline option on the Text Field Property Inspector. This converts the default 20-character width for single-line text fields to a text area approximately 18 characters wide and 3 lines high, with both vertical and horizontal scroll bars. Again, you control the width of a multiline text area by entering a value in the Char Width text box. The height of the text area is set equal to the value in the Num Lines text box. The user can enter any amount of text they want. You cannot restrict the number of characters the user enters in a multiline text area.

By default, text entered into a multiline text field does not wrap when it reaches the right edge. It will keep scrolling until the user hits enter or return. You can force the text to wrap by selecting either Virtual or Physical from the Wrap drop down menu. Virtual will wrap the text on the screen, but the submitted response will not be. If you want the wrap text in both situations, you would choose Physical.

One other option you have is to preload the text area with any default text you like. Enter this text in the Init Val text box on the Text Field Property Inspector. When Dreamweaver writes the HTML code for this, the text is not entered as a value, but instead, it will goe inbetween the <textarea></textarea> tags.

Providing User Options

You use checkboxes and radio buttons to allow your viewer to select a specific set of options on your form. Checkboxes enable you to offer a series of options from which the viewer can pick as many as they want. With radio buttons, only one selection can be made. You can also create a drop-down list or a menu list for your user.

Checkboxes are often seen as a "Select All That Apply" type of selection. You insert a checkbox in the same way as you do a text box: Select or drag the Insert Check Box object from the Objects palette or choose Insert > Form Object > Check Box. Like other form objects, checkboxes can be given a unique name in the text box in the Check Box Property Inspector. If you do not give it a name, Dreamweaver will provide a generic one, such as checkbox3. In the Checked Value text box, fill in the information you want passed to a program when the user selects the checkbox. By default, a checkbox starts out unchecked, but you can change that by changing the Initial State option to Checked.

Radio boxes provide a set of options, but the viewer can only select one. If the viewer changes their mind and selects another option, the first selected option automatically deselects. You insert radio buttons in the same way as the checkbox, by choosing or dragging the Insert Radio Button from the Forms panel of the Objects palette, or by choosing Insert > Form Object > Radio Button.

Unlike checkboxes and text fields, each radio button in the set does not have a unique name. Instead, each group of radio buttons has a name. Giving the entire set of radio buttons the same name enables browsers to assign one value to the radio button set. The value is determined by the contents of the Checked Value text box. To designate the default selection for each radio button group, you select the particular radio button and make the Initial State option Checked instead of Unchecked.

Another way to offer user options is with form lists and menus. These are more compact than radio buttons or checkboxes. Both create single-line entries in your form that expand or scroll to reveal all the available options. You can also determine how deep you want the scrolling list to be.

Return to Top

A drop-down menu should be familiar to you. The menu is initially displayed as a single-line text with an option arrow button at the right end. When the button is clicked, other options are revealed. The user selects one of the listed options, and when the mouse is released, the list closes up and the selected value remains displayed in the text box. With the List/Menu object inserted, make sure the Menu option, not the List option, is selected in the Property Inspector. You can also name the drop-down menu by typing a name in the Name text box. If you don't, Dreamweaver will assign a generic name.

The HTML code for a drop-down menu uses the <select></select> tag pair, surrounding a number of <option></option> tag pairs. Dreamweaver gives you a user interface for entering labels and values for the options on your menu. The menu item's label is what is displayed on the drop-down list; its value is what is sent to the server-side processor when this particular option is selected. If you haven't entered a value for every item, the server-side application receives the label instead. Generally, it is a good idea to specify a value for all items.

You can preselect any item in a drop-down menu so that it appears in the list box initially, and is highlighted when the full list is displayed. Dreamweaver allows you to pick this selection from the Initially Selected menu in the Property Inspector. The Initially Selected menu is empty until you enter items through the List Values dialog box. You can preselect only one item.

A scrolling list differs from a drop-down menu in three respects. First, the scrolling list field has up and down arrow buttons, rather than an option arrow button. Second, you can control the height of the scrolling list. Third, you can enable the viewer to select more than one item at a time, as with checkboxes.

A scrolling list is inserted in the same manner as a drop-down menu, either through the Objects palette or the Insert > Form Object menu. Once the object is inserted, select the List option from the List/Menu Property Inspector. You will enter the items for your scrolling list just as you did with the drop-down menu.

By default, the Selections checkbox for Allow multiple is enabled in the List/Menu Property Inspector, and the Height box is empty. When multiple selections are enabled by selecting the Allow multiple checkbox, the user can then make multiple selections by using two keyboard modifiers, the Shift and Control keys. Other than the highlighted text, no other acknowledgment appears in the list. As with drop-down menus, you can preselect options by highlighting them in the Initially Selected menu.

Keep these things in mind when you are working with scrolling lists:

• If you disable the Allow Multiple Selections box and do not set a Height value greater than 1, the list will appear as a drop down menu.
• If you do not set a Height value at all, the number of items that appear onscreen is left up to the browser.
• The widths of both the scrolling list and the drop down menu are determined by the number of characters in the longest label. To widen the List/Menu object, you must directly enter additional spaces in the HTML code. Dreamweaver will not recognize additional spaces entered through the List Values dialog box.

Activating Your Form with Buttons

Buttons are essential to HTML forms. You can place all the form objects you want on a page, but until your viewer presses a Submit button, there's no interaction between the client and the server. HTML provides three basic types of buttons: Submit, Reset and Command.

A Submit button sends the form to the specified Action (either a URL or a mailto address) using the noted Method (usually post). A Reset button will clear all the fields on the form. Submit and Reset are both reserved HTML terms used to invoke specific actions. A Command button permits the execution of functions defined by you, and programmed in JavaScript or some other scripting language. HTML doesn't limit you to the browser-style default buttons. You can also use an image as a Submit, Reset, or Command button. Dreamweaver has the capability to add an image field just like other form elements. Place your cursor where you want the image to appear, and choose Insert > Form Object > Image Field, or select the Image Field button from the Forms panel of the Objects palette You can use multiple image fields in a form to give the viewer a graphical choice.

When the user clicks the picture 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 in JavaScript or another scripting language.

Return to Top

There are a couple of other special purpose form fields. The hidden field and the file field are supported by most browsers. The hidden field is useful for passing variables to your gateway program, that should not be visible to the user. This data could be a variable needed by the CGI program to set information on the recipient of the form, or it could be a URL to which the CGI program will redirect the user after the form is submitted. The file input type is more rarely used, and enables any stored computer file to be attached to the form and sent with the other data. This is used primarily to enable the easy sharing of data.

Using CGI Programs

Because of the many questions I receive about using cgi scripts within Dreamweaver, I have added this section recently. Please note that I have already discussed a general overview on using CGI programs at the top of this page.

Every CGI script must be customized to some extent in order to communicate with your particular server. I've given you a list of sites on the Web Resources page where you can get a script that will work for you, once you do these modifications. Keep in mind that with CGI programs, you're essentially running a program on a different, remote computer and it's always best to check with that server's system administrator for what you may need.

Generally, using external capabilities with your Web pages is quite straightforward. Perhaps the easiest, and most common, script for interpreting your form's information for you is one written in Perl (Program Extraction and Report Language) because it is an interpreted language - the source code is ordinary text compiled at runtime. It is easy to modify and very good at parsing and manipulating the text. Once you modify the CGI script for your needs, three steps remain:

1. You need to upload the CGI script to your Web server. This is usually stored in a special directory - often named cgi-bin.
2. You need to set the file permissions, which I'll explain in a minute.
3. You must reference the CGI program from the Web page form.

Setting file permissions in Dreamweaver

Most Web servers restrict access on certain files to particular users. A file can be read, overwritten, or executed. With Unix machines, you can set these file permissions for each of three different groups: the creator or owner (you), the server's administrators, and your Web site viewers. Typically the owner can do all three (read, overwrite and execute), the administrator can read and execute, and visitors to your site can read and execute. You can set these file permissions on a Unix server through the site chmod command. In Dreamweaver, follow these steps:

1. Open the Site window. Choose File > Open Site then select the site you want to work with from the submenu.
2. Go online and select the Connect button from the Site window.
3. From the Site window menus, choose Window > Site Log.
4. In the Site Log window's FTP command line, use the site chmod command with the appropriate code number and filename reference, then press enter or return. For the typical permissions, the command is set to 755 and the filename is the cgi script. It would look something like this: site chmod 755 mailer.pl

Sending data to CGI programs

Usually, you will use a form to post the data that the viewer inputs from your Web page. (You can also pass data through a URL, but this is not a commonly employed method and I'll skip it here.) When you set up your form (and don't forget to name your form!), you will include a Submit button for the viewer to select and send their information. All the information that the user has filled in or selected on your form will be sent to the CGI program on your server. The CGI script takes the information, manipulates the data to make it easy to read, and then sends it to a database or in an email message to you.

Most CGI scripts require that the form use the post method, instead of the default get. When you first insert a form in Dreamweaver, the Property Inspector will allow you to make this change. Once you change the Method: to POST, the only other thing you'll need is to assign the Action:. This is just the URL of the CGI program, supplied in an absolute address form. It'll look something like this: http://www.idest.com/cgi-bin/mailer.pl. (If you want to use an email address instead of a cgi-script, you would post the Action here.)

Basically, that's all there is to it. However, many CGI scripts will require certain information from the user that is not inputted by them, in order to process the form properly. A good example is a text string that tells the CGI program which fields of the form are required. This type of data is hidden from the user and is passed to the program through an unseen form object. Generally, you would insert the Hidden Fields object between the <form> tags and traditionally, this is placed at the top of the form, although it can be placed anywhere between the tags. If you do elect to make certain fields required, you will enter the required values in the Value: box. The Value text box should read something like this: required=fname,lname,email,phone

Summary

HTML forms provide a basic level of communication between your viewer and yourself. With Dreamweaver, you can enter and modify form inputs, such as text fields and checkboxes. For the most part, a complete form requires two working parts: the form object inserted into your Web page, and a CGI program stored on your Web server. To avoid a server-side script, you can use a mailto address rather than a URL pointing to a program in a form's action attribute. However, you will still have to parse the form reply to convert it to a usable format. Once a form is completed, it must be sent to the server-side application. This is usually done through a Submit button on the form.