Form Basics

[ LiB ]

The HTML code that you create in Dreamweaver (or any other web-authoring program) is only part of what is required for a form to do its job. Forms require a script (a set of instructions, generally a text file, which is executed within an application) for the information input to the form to be processed .

Form-Processing Scripts

The most common way to process form data is a common gateway interface (CGI) script. CGI scripts are typically written in Perl or another programming language, possibly C++, Java, VBScript, or JavaScript.

Forms also can be processed by server-side technologies such as ASP, ASP.NET, ColdFusion, PHP, or JSP, which function essentially in the same way as CGI scripts. In conjunction with these technologies, forms are commonly used to collect information to be added to databases.

Before creating interactive forms, check with the administrator of the server where you plan to host the website and find out what type of scripting technology is supported. Perl CGI scripts are very commonly supported, and some host companies will even provide these scripts already set up for use on their servers.

The specifics of setting up scripts are beyond the scope of this book, but at the end of the chapter, you'll find some web resources that will point you in the right direction.

The HTML Behind Forms

The HTML code for form creation is not very complex. A form tag surrounds various kinds of input , select , and textarea tags collectively called form controls or form elements interspersed with text labels, tables, and whatever other page elements are required to create the form layout. The code for a very simple form might look like this:

 <form name="myForm">   Username:<input type="text" name="username"><br>   E-Mail:<input type="text" name="email"><br>   <hr>   <input type="submit" value="Submit"> </form> 

The form tag itself officially defines an area of the page as a form and specifies what action should take place when the form is submitted. A form's action is the address of a file. When the user clicks the Submit button, the information entered into the form's various fields is sent to this address. In some situations, a form might not require the <form>...</form> tag pair; this might be the case with a client sideonly form, which doesn't involve sending information to a server. Some browsers, however (particularly Netscape 4), will not display form elements outside of a <form> block, so it's best to include it.

Table 11.1 shows commonly assigned attributes of the form tag and what they mean.

Table 11.1. Commonly Assigned Attributes of the form Tag

Attribute	Function of Attribute
name	Assigns an identifier to the entire form element. This value is particularly useful when using scripts that reference the form or its controls.
action	Specifies the URL to be accessed when the form is being submitted. The URL might be to a CGI program or to an HTML page that contains server-side scripts.
method	Forms might be submitted by two possible HTTP methods : GET and POST . This attribute specifies whether the form data is sent to the server appended to the ACTION attribute URL ( GET ) or as a transaction message body ( POST ).
target	Allows a window or frame destination other than the current one to be specified as the location to load the HTML page that has been designated to be returned by the server after the form data is processed.
enctype	Sets a MIME type for the data being submitted to the server. For typical form submissions sent by the POST method, the default MIME type is the correct one.

Within a form, input , textarea , and select elements create text fields, check boxes, radio buttons, submit buttons , and other form elements. Other HTML elements, such as tables, images, and text, can also be used to provide instructions, labeling, and layout for the form. Table 11.2 lists the most commonly used form elements, along with a quick peek at the code that creates them.

Table 11.2. Form Elements and Their attributes

Form Element	Tag	Example
Text field	input	<input type="text" name="myText" size="10" maxlength="50">
Password field	input	<input type="password" name="myPassword" size="10" maxlength="50">
Check Box	input	<input type="checkbox" name="myCheck" checked>
Radio group	input	<input type="radio" name="myRadio" value="1">True <input type="radio" name="myRadio" value="0">False
Button	input	<input type="button" value="Click Me!"> <input type="submit" value="Submit Form"> <input type="reset" value="Reset Form">
List/menu	select	<select name="mySelect"> <option value="1">True</option> <option value="0">False</option> </select>
Text area	textarea	<textarea name="myTextarea" cols="10" rows="5"> text input goes here </textarea>
Image field	input	<input type="image" name="myImage" src="myButton.gif">
File	input	<input type="file" name="myFile">
Hidden field	input	<input type="hidden" name="myField">

Figure 9.1 shows a form that uses a variety of input and other elements, as it appears in the browser.

Figure 9.1. Form elements in the browser.

How Forms Work in Dreamweaver

Dreamweaver makes building HTML forms very easy. All common form tags can be added using the Forms category of the Insert bar (see Figure 9.2). The same objects also are available by choosing items from the Insert > Form submenu.

Figure 9.2. The Forms Insert bar.

To build a form in Dreamweaver, start by inserting a form object. If you have invisible elements showing, the form will appear as a red box; it's important to keep track of that box so that you make sure to put your form objects inside it. (To turn on invisible elements, choose View > Visual Aids > Invisible Elements.) When the form is selected, the Form Property Inspector appears (see Figure 9.3).

Figure 9.3. The Form Property Inspector.

Forms can be hard to select because you have to click exactly on the red box outline. Use the Tag Selector instead. Place the insertion point anywhere inside the form, and in the Tag Selector, find the form tag and click on it. That selects your form.

If you try to insert a form element without having first inserted a form, Dreamweaver will offer to insert the form automatically. Although this is handy, Dreamweaver might not create the form exactly where you want it. It surrounds the current form element and its label with a form tag, but no other page elements. For instance, if you have created a table to hold your form elements, Dreamweaver places the form inside the table, not surrounding it.

With the form in place, use form objects to add form elements inside the red box. You can also insert any nonform elements, such as images, text, a table to control the layout, and so on. Each form element has its own Property Inspector, as shown in Figures 9.4 through 9.8. Pay special attention to the names you give your form fields because the script that processes the form may require certain naming conventions to be followed.

Figure 9.4. Property Inspectors for the Dreamweaver text field elements.

Figure 9.5. Property Inspector for the List/Menu form element.

Figure 9.6. Property Inspector for the Checkbox form element.

Figure 9.7. Property Inspector for the Radio button form element.

Figure 9.8. Property Inspector for the Button form element.

When naming forms and form elements, keep a few things in mind. First, don't use spaces or special characters . Second, it is a good idea to use names that clearly identify the form or element's role. Third, develop your own naming conventions , and be consistent. Either don't use capitals at all or use them in a consistent way; either don't abbreviate English words at all or abbreviate in a consistent way; either use underscores between words or run the words together. This helps you to remember the names you create and avoid typos. Finally, be aware that scripting languages have certain reserved words that have special meaning and can cause problems. The word date is a common example. You might want to research which reserved words exist in the scripting language you're using, especially if you run into problems that seem to have no other explanation.

[ LiB ]