You will use Dreamweaver to visually design the
look of your form, but you must go into the HTML to tweak the
code.
First you must tell your HTML page that the following
information is a form.
HTML
Dreamweaver
Dreamweaver will automatically insert
the following HTML code in your page:
<form method="post"
action="">
</form>
It
is assumed that you will go back later and add the action
(the link to the cgi script) that will process the form
results.
Insert--> Form
In Dreamweaver, once you add a Form,
a red box will appear on your page. All of your form elements
must appear inside this box.
Step Two
Inside the form tags, you can add form objects,
such as check boxes, radio buttons, text fields, pull down menus,
etc.
In Dreamweaver, you can add these form objects by
going to Insert--> Form Objects (Note: you must insert Form Objects after
inserting a Form!!)
In Dreamweaver, you can click on the Form Object
and you will notice that the Property Inspector will change to
give more options for that particular object. This is where you
can name your field, add values, etc.
For example:
Elements of a form and the HTML
code:
Check Boxes
(check all that apply)
Anchovies
Olives
Mushrooms
Sausage
Pineapple
Extra Cheese
HTML Code:
All
choices in a group must have the same name. In this example,
the above choices are all named "Toppings."
The value of each text box is unique.
Multiple Selection: Here you can select more than one
option by holding down the CTRL key.
HTML Code
The
select name is the name of this field group. Each should
have a different value. The value is the way the user's
selection will be recorded in the recipient's email. For
example, if the user selected Johns Hopkins, the email
results will read:
Text fields can be used to input name, email, address,
or anything really. They can be a single line like this
one, or multiple lines, like the example below. The text
field can also be as short or as long as you want
<input type="text"
name="zipcode" size="5">
<input type="text"
name="address" size="60">
multi-line text field
In Dreamweaver, you can select a multi area text field
but first inserting a text field, and then in the property
inspector, select "multi-line" instead of "single
line"
All
choices in a group must have the same name, in this case
it is Will You Marry Me? The value for each one is different,
and users can only select one answer.
<input type="radio"
name="Will You Marry Me?" value="Yes">
Yes<br>
<input type="radio" name="Will You Marry
Me?" value="No">
No<br>
<input type="radio" name="Will You Marry
Me?" value="Maybe">
Maybe<br>
<input type="radio" name="Will You Marry
Me?" value="Probably">
Probably<br>
<input type="radio" name="Will You Marry
Me?" value="Not Sure">
Not sure
buttons
There has to be a way to send off the information you
have filled out. Form buttons allow you to submit and
reset the form fields.
The type is whether the form will reset
or submit info on clicking.
Each form field must have it's own name.
The value is whatever you want the button
to say
...or...
The HTML code for adding a button:
<input
type="submit" name="Submit" value="submit
your order">
<input type="reset" name="Reset"
value="clear and reset">
You can also add an image instead of the typical form
button to submit your form. Using an image, the form will
automatically be a Submit type. See below for adding a
reset image.
Reset button
Some of you might want to use an image for the reset button
too. Remember an image button always submits a
form. So this is only possible with a trick. You will
have to create a hyperlinked image, with a javascript
action in the HREF attribute. This action will then trigger
the reset of the form. You need to name the form too with
a NAME attribute. Try entering some text and then press
the button.