Home / Articles / Adobe Creative Suite / Adobe Creative Suite 5 Web Premium How-Tos: Collecting Data in Forms

Adobe Creative Suite 5 Web Premium How-Tos: Collecting Data in Forms

Chapter Description

This chapter explains how to design two kinds of forms: forms that manage data in the browser (client-side) and forms that connect to scripts at a server (server-side).

#28 Connecting a Form to a Server Script

Form actions define how the data in a form is sent to a database on a server. Form actions are defined in the Properties inspector with the form—not any specific form field—selected.

The three important fields in the Properties inspector for a form are the Action, Method, and Enctype fields. What you enter in these fields is determined by how the programmer (who set up the script and database to which the form data is being sent) configured the database and scripts at the server. Normally, Method is usually set to POST but can sometimes be set to GET; this again depends on how data is transferred to the server and is defined by how the server is configured. The Action field contains the URL of the Web page at the server that has the script that will manage the data.

Enctype, short for "encryption type," is sometimes used to define how characters are interpreted and formatted. Your server administrator will tell you what, if any, enctype coding is required for forms to be processed by your server.

Because form actions are determined by the settings at your server, the information you enter into the Properties inspector is provided by your server administrator. In the case of forms designed to match server scripts, those forms normally come with Action settings defined.

If you want to collect data in a form and have it sent to an email address, you can do this easily without having to work with additional server configuration or scripts. In the Action field, type mailto: < your email address>. From the Method pop-up menu, choose POST. In the Enctype field, type text/plain (Figure 28a).

Figure 28a

Figure 28a Defining an action that will send form content to an email address—in this case, mine!

Let me give you a recipe for one of the most widely used server-connected forms: a search engine. Follow these steps to place a FreeFind search field on an open Dreamweaver Web page. You can also use them as a model for using similar services.

  1. Go to www.freefind.com and enter your email address and your site's URL (at an online server). Click the Instant Signup button. FreeFind emails you a password, a login, and a link to the FreeFind control center. Follow the link, log in, and then click the link for a free search field (or you can choose one of the more elaborate, ad-free pay options).
  2. Click the Build Index tab in the FreeFind control center, and then click the Index Now link. FreeFind builds a database at the FreeFind server of all the words in your Web site.
  3. Click the HTML tab and choose one of the four available types of search field forms you can use (the options are Site Search Only, Site and Web Search, Web Search Only, or Text Links).
  4. Select all the HTML for the search field you selected, and choose Edit > Copy from your browser menu.
  5. Back in Dreamweaver, click in the Document window to set the place where the search field will be inserted. Then choose View > Code to switch to Code view. Don't worry about any of the code you see—your cursor is in the spot you clicked in Design view. Choose Edit > Paste to place the HTML code and switch back to Design view to see the search field (Figure 28b).
    Figure 28b

    Figure 28b Placing a search field from FreeFind.

Test your search field in a browser. The search field form has fields and buttons. You can reformat the fields and buttons using the techniques for defining form and form field attributes we've covered. In other words, you can customize the way this form looks—you just can't delete any of the form fields. Other techniques in this chapter cover how customization works, so you can customize forms you get from CGI hosts.