Form Building Dreamweaver CS5

Form Building – Dreamweaver CS5

Planning - Step 1

Figure out what information you want to collect first. Remember you should collect public information only! These forms are not secure.

Insert Base Form Code - Step 2

A form is just a mess of HTML tags/elements, and another mess of attributes set in those elements. After that you point it to a server to complete the magic… and we don’t have to maintain the servers so it is super easy!

All of the form elements you need are on the Form menu, a sub-menu of Insert.

Menu: InsertForm

It should look like the image to the right; avoid the Spry controls at the bottom, they are proprietary and kind of wonky.

To start a form, place the cursor on your web page where you would like the form to appear and select Form from the top of the menu.

A red dashed box appears on your page to show the boundaries of the form.

In the source code you will see this:
<form id="form1" name="form1" method="post" action="">

That’s it! Super easy, as we go along, just make sure everything added to your form goes between the start and end form tags if you are in code view or in the dashed red box if you are in design view.

That is the base for your form… eight more steps to go!

Insert Form Content - Step 3

When you select form elements to add you will be prompted right-away for an ID, label, how the label should appear and tab index.

This is a huge time saver! I find a good way to work is to have all of the information you want to capture on the page first in paragraphs. Then go down the list, cutting the text, selecting the form element and then pasting the text into the dialogue box.

So your page might look like this as you start:

Name

Phone

Notice the form content is all in the red box! 

To the right is the dialogue box that will appear when you select a form element to add.

ID: Used in the code, keep short and unique
No spaces or hyphens, letters and numbers only, do not start with a number!

Label: Adds accessibility and is visible, use descriptive language. Spaces are OK.

Style: Use the top choice ‘for’ attribute

Position: In this case before works, for some layouts after would be more appropriate.

Access key: Adds accessibility, for this demo I am leaving it blank.

Tab Index:Adds accessibility, number sequentially in the order the form should be filled out.

Click OK and You Will Get:

Design view:

Your name

Code view:

Brief description of the other elements; see Dreamweaver help section for details.

Text Field
Allows user to type information in a one line high box, like a name.
Text Area
Like input text, but this allows for multiple lines.
Button
This is the button required for the form to be submitted!
Checkbox
Allows more than one selection from a series of choices.
Radio Button
Restricts to one selection from a series of choices.
Select (List/Menu)
Displays a list of choices when user clicks on a menu. / File Field
For uploading a file in a form, AFP does not support this feature.
Image Field
Using an image as a button.
Hidden Field
Hides data to pass along with the form.
Radio Group
A widget to simplify making radio buttons.
Checkbox Group
A widget to simplify making checkboxes.
Jump Menu
Allows user to select a link and click a go button. Big in the 90’s
Fieldset
Groups inputs and adds a legend for accessibility.
Label
Label form inputs for accessibility.

Group Form Elements (Fieldset) - Step 4

One step to making forms accessible is to group form elements together in logical sets. In forms, these are called fieldsets. Depending on how your CSS is written, fieldsets will add visual elements to your form as well.

Fieldsets contain a legend element which appears as a heading, so be prepared with that content before you apply a fieldset as Dreamweaver will prompt you for the information.

To apply a fieldset, simply highlight the appropriate section of the form with your mouse. For example, name, email and phone for a fieldset called “About You.”

Select Fieldset from the form menu.

At the prompt to add a legend, type in About You, or whatever is appropriate.

That’s it! You will now see this in the source code:

fieldset
<legend>About You</legend>

Your CSS will determine how the legend displays in design view. Most people have the legend visually mimic an h2 heading and remove borders from the fieldset.

Wire Up Form and Check Inputs - Step - 5

You want to have the properties window open for this step, it will make life much easier. You can also complete this next step in the code view, or watch as the code transforms when you use the properities window! Ooo la la!

The Form

In design view click on the red dashed line that represents the form boundaries to get the form properties shown below. In code view you can click inside the <form> tag.

Form ID: If applicable, set the form ID here which also sets the name attribute. This is helpful when you have more than one form on the page. No spaces or hyphens if you choose to rename. Letters and numbers only, and do not start with a number!

Action: This is where you would paste in the custom URL from the Absolute Form Processor. More information on that is available on the Web Standards site.

Method: Set it as POST

Target: Leave this blank, it adds old school HTML Boooooo.

Enctype:Leave this blank, it adds advances processing instructions that we do not need.

TextField

In design view, click on thetext field in your form to get the text field properties shown below.

TextField: Change this lower left text to set the ID and name attributes for the text field. No spaces or hyphens please!

Char width: Sets the width of the field in characters. This is old school, use CSS instead.

Max chars: Should they only be allowed 16 digits for the credit card, put a 16 in this box. Ha! Trick answer, don’t take credit card numbers.

Type – Single line: This should be set by default, shows one line for the field.

Type – Multi line: Checking this actually changes the input to a TextArea and changes the option of “Max chars” to “Num lines”, for number of lines height-wise to display.

Type – Password:Booo! The form is not secure, do not ask for a password!

Initval: This text will appear on the form, like “type in your name.” Use with care, without a JavaScript trigger the text does not disappear when the user clicks in the box. The user will have to select the text and type to replace, which is annoying.

Class: Select a CSS class from the pull-down menu if applicable.

Checkbox

In design view, click on the checkbox in your form to get the text field properties shown below.

Radio

In design view, click on the radio button in your form to get the text field properties shown below.

Group name:IMPORTANT! Because radio buttons work as a group, only one selection is allowed, each button in the group needs to have the same name so the form knows they are related.

Drop-Down Box

This dialogue box allows you to add choices to the menu and work with items already added, the order for example.

Hint: If you have a lot of items to add, like a list of states, find it on a form on the Web, copy it out of the source code and paste it into yours. It is legal and everyone does it!

Another Hint: Make the first choice “Select One” and set status to “selected”.

Add a Submit Button! - Step 6

Notice something missing? You need a submit button!

Menu: Insert> Form > Button

Button name: By default this says “Submit” but you can make it say anything you like.

Value: Leave this as “Submit”

Action: Very important! If “Submit form” isn’t selected, it won’t be a submit button… and the form will not work.

That’s It! You are Done!

Keep in mind the Absolute Forms Processor can take people to a thank you page after they fill out your form. Good information to put on that page would be a date reminder, or directions if applicable.

The thank you page does not require any form elements, the processor just needs a live page to send to the browser. Make sure the page is on a live server like cehd.umn.edu, not drydock.cehd.umn.edu.