Forms can be created in Dreamweaver with either the Objects
Palette or from the Insert Menu.
Insert a Form
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.
Your Form Objects palette should look like this:
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.
Inserting a Text Field
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 something that looks like this:
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. Below is an example
of how the field would be displayed with 30 Char Width field set at 30:
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.
Multi line with Default Wrap
Muli line with Virtual Wrap
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.
Checkboxes and Radio Buttons
Checkboxes
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 this:
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
that looks like this:
You can then use the Properties Toolbar to assign it a name, a value and specify
whether it is checked or not.
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.
Here is an example:
What type of music do you like?
Rock
Rap
Country
Classical
Here is an example of checkboxes:
What type of music do you like?
Rock
Rap
Country
Classical
List and Menus
You can add lists and menus to your document in order to give visitors a predetermined
set of choices for a specific piece of information.
To insert a list or a menu 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 this:
Not much of a list. You'll notice that the Properties palette has changed to
reflect the different options available for Lists and Menus.
Here you can decide whether you would like it to be a list or a menu. The default
setting is Menu and is what you saw in the example above A List looks like this:
They look exactly the same, but you might notice that some of the Properties
options are grayed out when it is a list. The difference comes into place when
data is entered.
To add some choices to the list, click on the 'List Values' button of the Properties
Toolbar. You will see a dialog that looks like this:
Enter the first value by typing the name in the 'Item Label' field. This is
what the user will see when the form is rendered on the page. You can then enter
a value, which depends on the nature of the form. If this is a jumpbox, you
would place a url in the value field. Other values will depend on the configuration
of the Backend application used to parse the form.
To add a new value, simply click on the + (plus) button. You can then enter
a new label and value. You can also get the same result by using the TAB key
to move from field to field. It will automatically create a new value once it
has reached the end of all existing values. To remove a value, select it by
clicking once (highlight it) and click once on the - (minus) button.
Here is a sample with the numbers 1-5 used as values:
You might be asking yourself how you can widen the field. There is no way save
for entering longer data. The less amount of characters in the longest label,
the smaller the menu. Since we only used 1 character, the menu is 1 character
wide. Here is a sample with some longer labels:
You can also have a choice preselected when the page loads by using the 'Initially
Selected' field of the Properties Toolbar. Here is an example where Flash was
selected:
Now let's look at Lists. Click on the list button of the Properties Toolbar.
You'll notice that the 'height' field and some others are no longer grayed out.
The default height is 1, which is essentially the same as a Menu. It becomes
a list when the height is changed. Here is a sample with the height set to 5
and the 'Initially Selected'.
Now all selections are visible. You can change the way the field is displayed
by changing the height of the List. What if you wanted a visitor to choose between
10 to 20 values? You wouldn't want a list that was 10 to 20 lines high. For
this you could keep the height at 5, or however many lines you prefer, but enter
the extra values. This is what happens.
Now a scrollbar appears. You can also allow visitors to select multiple values
by clicking on the 'Allow Multiple' checkbox of the Properties Toolbar:
What Tools Do You Regularly Use?
(hold down the CTRL or Command key to check multiple values)
Buttons
So now that you have the means to collect all this information,
how do you send it? With a submit button. Dreamweaver offers a few options
when it comes to buttons.
To insert a 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 that looks like this:
To have it submit the form, you can simply leave it as is.
You can change the text of the Submit button (example below)
by changing the Label field of the Properties Toolbar.
Of course the button will stretch depending on the amount of
characters in your button.
You can have the button perform one of two actions.
The first is submit, which is the default.
You can also have the button reset the form. This will clear
all information on the form, which is essentially the same as refreshing
the page. When you change the action to reset, the label changes with it.
You can still customize this.
Jump Start Menu
Dreamweaver 3 & 4 offers the ability to easily add a Jump Box to a page.
What is a Jump Box? It is a menu that sends a user to a specific URL. This can
be extremely beneficial when it comes to adding navigation to a Web site. Here
is a sample.
Add sample here!!!!!!!
Note: Using this Box will take you to another site. If you choose to test it,
make sure you hit the Back button to return to this lesson.
The creative geniuses have made this task quite easy. All you have to do is
click on the Insert Jump Box button
of the Objects Palette. A dialog box will appear. The rest is easy.
The Dialog Box:
The process of adding selections is very much like adding values to a list
or a menu. Specify the name (or label) in the 'Text' field. You then specify
the URL (fully qualified) in the URL field. To add more selections, just use
the + (plus) and - (minus) buttons. Once you have added all the values, you
can switch the order by using the buttons to the right of the plus and minus:
You can give the field a name, specify the Window to open the URL in (only
applies to Framesets), and even throw a Go button in there.
Once you are finished you'll have a full blown navigation system. The Go button
isn't even necessary.
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.
of the Form Objects Palette or select from the Form Objects menu off the Insert
Menu. You will see something that looks like this: 
of the Form Objects Palette or select from the Form Objects menu off the Insert
Menu. You will see something that looks like this: 
of the Objects Palette. A dialog box will appear. The rest is easy. 
