A form is a
set of objects that is used to collect various data (information)from the user
site to the server site or directly to the owner of the webpage.
 |
| Creating a Form In Dreamwaver |
Creating a Form:
A form
object is a container for other elements (objects) and an invisible element.
When you add a form to a document window, it appears as a red, dashed-line box.
To create a
form with other elements, it might be helpful to have the forms palette active
in the object Palette.
1.
Place the cursor where you want to insert the form.
2.
Click on form object in the Forms Object Palette.
3.
Click on OK, if any message box appears.
Then you will get the Red,
dashed-line box.
4.
Change its properties from the properties bar.
·
Name: This is a unique name that can be used when a script is interacting with
data from the form. The name is necessary, if you plan to apply any behaviors
to a form only. However, it is a good idea to always name form.
·
Action: It is a URL (Uniform Research Locator)
of the application (script) on the server that will process the form data.
·
Method: It tells the application on the server
how the data should be processed.
This is the method (way) used for
sending the information’s to the server. The options are GET, POST and DEFAULT.
Inserting Text Field:
Text Fields
are used to enable users to add single line information (like name), multi-line
information (like address, comments) or, passwords (for access to a password
protected items).
1.
Place the cursor inside the form at required position.
2.
Direct click Text field button from the Form Object
Palette.
Then text field appears in the
form and text field properties bar is activated.
·
Name: Name of the text field
·
Char Width: This is the space available to enter
the name.
·
Max chars/Num lines: This sets the maximum nos.
of characters that can be entered by the user for single line or password
entries; and the no. Of lines to be displayed for a multi-line entry.
·
Type: This is the type of the text field; single
line, multi-line or password.
·
Init val: This is the initial value that is
displayed in the text box initially but you can be modified it.
Inserting Checkboxes:
Checkboxes can
be used with a list of options that the user has to select as required. In a
list of checkboxes, numerous items can be selected. It is not an either/or
option.
1.
Insert the cursor within the form container.
2.
Select Check box from Forms Object Palette.
Then Checkbox appears in the form
and Checkbox properties bar is activated.
·
Checkbox Name: Enter a name for the checkbox. The
name should be same for all the checkboxes.
·
Checked Value: This is the value that will be
used in processing the form (at the server site). Each checkbox in a group
should have a different value.
·
Initial
State: This can be used
to specify whether the checkbox appears initially as checked or unchecked. Whichever
option is chosen, the user can still change it as per required.
3.
Place the cursor just besides the checkbox and type the
required value.
4.
Similarly, insert other required checkboxes and define
the required value.
Inserting Radio buttons:
Radio
Buttons are similar to checkboxes, except that they only allow for a single
option to be selected.
1.
Place the cursor at required position inside the form
container.
2.
Direct select Radio button from Form Object Palette.
Then, the Radio button appears
inside the form container and Radio button properties bar activated.
·
Radio button name: Enter the name for the Radio
button. The name should be same for other inserted radio buttons.
·
Checked value: This is the value that will be
sued in processing the form (at the server side). Each radio button should have
a different value.
·
Initial
State: This is used to
specify whether the radio button appears initially checked or unchecked. Whichever
option is chosen, the user can still change it as per required.
3.
Place the cursor just besides the Radio button and type
the required value.
4.
Similarly, insert other required radio buttons with the
required value..
Inserting Lists/Menu:
A
list or a menu is a form can be used as a device for the user to choose one
option (in case of Menu) and multiple options (in case of list) from the list
of items.
1.
Place the cursor at required position and type the
title for the list/menu inside the form container.
2.
Select List/Menu button from the Forms Object Palette.
The List/Menu button with
drop-down arrow appears and the List/Menu Properties bar is activated.
·
List/Menu name: Enter the name for the List/Menu
button.
·
Type: Choose either Menu (for one line box with
drop-down button) or List (for nos. of lines). If you choose List then you can
define the height for list and also allow the multiple selections.
3.
Click on List values… button.
4.
Enter required item label and value for each item with
the help of plus(+) sign. The item label is what the user will see and select. The
value is what will be sent back for processing.
5.
Click on OK.
Inserting File Field:
A
file field in a form allows the user to select a file from their hard drive and
insert it into the form.
1.
Place the cursor at required location inside the form
container.
2.
Select file field from Form Object Palette.
Inserting Image Field:
Image field
can be used to place the any image file inside the form like logo, trademarks
and so on related to the form and also used instead of auctioned buttons (like
Submit) to perform the related task (processing the form ; at server site).
1.
Place the cursor at required position, where you want
to insert a standard web image file.
2.
Select image field from Form Object Palette.
3.
Choose required image file, which you want to insert.
Inserting Hidden Fields:
Hidden
fields can be inserted into a form to capture the silent information’s to the
server. This can include something like form published date, and me and contact
of the web designer. These are not visible within the form when it is published
but the information of that field will return to the server.
1.
Place the cursor at anywhere inside the form.
2.
Select Hidden field from Form Object Palette.
3.
Give required name for Hidden Field and type the
required information at value box.
Note: Hidden fields are invisible
elements and are denoted by a yellow marker on a form.
Inserting Jump Menus:
Jump menu
is used to create a list of other linked document inside one box with dropdown
button.
1.
Type some related text (like select a file) and place
the cursor inside the form container.
2.
Select Jump menu form Forms Object Palette.
Then insert Jump menu dialog box
appears.
3.
Type required text to display for the linked document
at the Text box and choose the URL using Browser button.
4.
Similarly add other URL with required text using plus
(+) sign.
5.
Put the tick mark on Insert Go Button after menu, if
you want to open the lined document after pressing Go button only.
6.
Put also the tick mark on Select First item after URL change.
7.
Click on OK.
Note: Don’t forget to change
(edit) the Jump menu behavior other wise it will not be functioned smoothly. To
get Behavior palette go to window and click on Behavior.
Inserting buttons.
Once
the user has completed a form they need to have an option for sending it
somewhere (server); reset the information of the form or perform the specific
other related task. This is done through the use of button.
1.
Place the cursor where you want to place the buttons
(usually bottom of the form).
2.
Select Button from the Form Object Palette.
Then button appears in the form
and the Button Properties is activated.
·
Button Name: These are most commonly Submit or
Reset.
·
Label: This is the text that appears on the
button.
·
Action: This is the text that appears on the
button is pressed. The options are for sending the information or resetting the
form or for no action to take place.
