Dreamweaver: Forms

Forms

Forms can be created in Dreamweaver with either the Objects Palette or from the Insert Menu.

Go to the Window Menu and select Objects or use the keyboard shortcut Command or CTRL F2. When you see the Objects Palette, change the pull down menu at the top to Forms.

You can now just click on the appropriate button in order to place a new form object on your page.

Before you place your first form object on the page, you need to insert a form tag. This can be confusing to some, but all form objects must reside inside a defined form tag. In fact, if you try to place a form object without a form, you'll get the following dialog box:

You can add a form tag either from the Form Objects Palette or from the Insert Menu. Click on the upper left button on the palette to create your form.  Once you have done so you will see a red bounding box.

You will also notice that the Properties Toolbar has changed:

There are three fields you must fill out in order to activate your form. The form name is not necessary, but usually recommended, depending on what the form is used for. The action field is where the information in the form will be submitted to. This can be to anything from an e-mail address to a CGI file. The Method field determines how the data in the form is processed. POST usually means that the data is sent to a file and GET usually means that the data is appended to a URL. The default is POST.

Another way to insert a form is from the Insert Menu. Some people prefer to keep their workplace as uncluttered as possible. All one has to do is select Form from the insert menu, which will insert the form tag. To insert form objects, there is a submenu off the insert menu for just that purpose.So now you should be ready to start placing objects into your form. Over the next couple of sections we'll look at the different objects available.

Text Fields

To insert a text field either click on the Text Field button  of the Form Objects Palette or from the Form Objects menu off the Insert Menu. You will see a rectangular box.

You can configure the text field with the Properties Palette which changes when the text field is selected:

You can give the field a name by typing in the field to the left of the palette.

You can specify how wide the text area will be by using the Char Width field. The default is 25 characters.

The Max Chars field is where you specify the maximum number of characters to allow in the field. If a user runs out of characters they will not be allowed to continue.

If you would like an initial value to be displayed, simply type the value into the Init Val field.

You can choose which type of Text Area you would like by using the 'Type' field on the palette. There are three options available: Single line (default), Multi line, and password.

Multi line Text Area

Once you click on the Multi line radio button, your field will become 2 lines. You can then further customize it with the Properties palette.

Instead of the Max Chars field there is a Number of Lines field on the palette. The default is 2 lines.

You'll also be able to specify how the text wraps in the field when the user is filling it out. You can do this by choosing from the Wrap Menu below the Number of Lines field. Your options are Physical, Virtual, or Off.

With wrap turned off, the user will continue typing and the form will scroll horizontally with them.

With the wrap set to Virtual, the user will continue typing on a new line once the width has been reached. The appearance to the end user is the same whether the Wrap is set to Virtual or Physical. The difference is in how the data is sent. When the wrap is set to Physical, the data will break at the end of the field's width. The data will not break when the wrap is set to Virtual.

Check Boxes and Radio Buttons

To insert a checkbox either click on the button of the Form Objects Palette or select from the Form Objects menu off the Insert Menu. You will see something that looks like a small rectangular box.

You can then use the Properties Toolbar to assign it a name, a value and specify whether it is checked or not.

Radio Buttons

To insert a radio button either click on the button  of the Form Objects Palette or select from the Form Objects menu off the Insert Menu. You will see something like a dot in a small circle.

The properties for the radio button are identical as the checkbox.

So what is the difference between the two? There isn't much difference. Often checkboxes are 'on, off' selections, whereas radio buttons are 'either, or'. This isn't always the case, and Dreamweaver isn't capable of the 'either, or' option.