2.  Whether using paper forms or forms on the web, forms are used for gathering information. User enter information into designated areas, or fields. Forms should be easy to read and follow. Online forms use the tag and other HTML elements to designate and contain the desired data.

3.  Text field – entry of text and numbers, up to a specific number of characters.  Text area – Identical to text fields, but able to hold more characters.  Checkbox – Graphical element that permits users to designate a yes or no selection.  Radio button – graphical element that permits users to select one option from a group of items. Only one item can be chosen.  List/Menu – Displays entries in a pop-up menu format.  Hidden – Unseen by user – conveys information to the form-processing mechanism.  Button – Submits the form or performs some other single-purpose interaction.

4.  Create your page using your DWT  From the insert panel, choose Form.  Inside the box change method to POST and make sure in the name box you name your form i.e., seniorvote.

5.  Text fields are the workhorses of all form elements.  Inserting a text field –  Make sure your cursor is inside the red form outline.  In the Forms category of the Insert panel, click the Text Field Icon.  The Input Tag Accessibility Attributes box will appear. The most important attribute is ID because it gives the field a unique name that assists in processing the form data later. If you don’t input an ID, Dreamweaver will automatically create a generic one for you. Next, insert your information for the label category. You can now press OK and see that your first Form element has been created.

6.  Spry elements combines form elements with Java to create easy to use forms with built-in validation. Validation is the process of verifying that appropriate data has been entered into a form element.  Spry form widgets are available for several kinds of form elements, including text fields, text areas, checkboxes, passwords and password confirmation, radio groups, and select lists. They each basically work the same way: You insert the widget and then specify its properties using the Spry interface in the Property inspector.

7.  Insert your cursor at the end of the name field and press Shift-Enter to insert a line break.  In the Forms category of the Insert panel, click the Spry Validation Text Field Icon.  In the ID field, type e-mail  In the Label field, type E-mail:  Click OK

8.  Now that you have your Spry inserted, you should see a blue tab around it; position your mouse pointer over the e-mail text field and wait until it appears. Click the tab to select the element, in the Property inspector, choose Email Address for the pop-up menu.  By choosing the Email Address field type, Dreamweaver will check the entry to see that it contains an @ character followed by a domain name.  Customizing the Email address – invalid, required, and validation.

9.  One way to make forms more user friendly is to organize fields into logical groupings, called field sets.  Make sure you select all of the code from the first label code for the name section to the end of the email section.  In the Forms category click the Fieldset icon and type Your Contact Information in the Legend field.

10.  You can either insert each checkbox individually or insert an entire group at once. You can also choose between normal HTML checkboxes and ones powered by a Spry. The Spry checkboxes allow you to add customized error messages and other functionality.

11.  First let’s create a Fieldset to organize your information. Name it Trip Information  In the Forms category select Checkbox Group. In the Name box, name it date.  Since the default only gave us two boxes, we will need to add one, so click the + to add a 3 rd.  Next fill in your dates where it says “Checkbox”. Where it says value, type in date1, date2, etc.

12.  When you want users to select one option from an array of choices, you will want to use a radio button.  Radio buttons differ from check boxes in two ways:  When a radio button is selected, it can’t be deselected, except by clicking one of the other buttons in the group.  When you click one radio button, any other option in the group is deselected automatically.

13.  Creating a Radio Button group using a Spry is very similar the checkboxes you created earlier.  First, make sure you have inserted the text so the user knows what they are choosing.  In the Form Category, select Spry Validation Radio Group. Format the dialog box as needed.

14.  Occasionally, you may want to give users an opportunity to enter a larger amount of information. When this is the case you can use a text area.  Dreamweaver again offers both HTML and Spry text area components.

15.  List and menu form elements offer a flexible method for presenting multiple options in two different formats. When displayed as a menu, the element functions like radio buttons. When displayed as a list, the element behaves like checkboxes.

16.  First things first, you must add your text to identify your field  Choose the Select (List/Menu) from the Form category.  Label the ID field – payment  Leave the Label field empty.  Select the No Label Tag Option  Click OK

17.  Every form needs a control to complete the action. This job is usually assigned to the submit button that when clicked sends the entire form for processing. By default, buttons inserted by Dreamweaver are set to Submit, although they can also be assigned the options Reset or None.  Once you know your position for your button, click the Button Icon from the Form Category.

18.  Since many visitors to your site use web- hosted systems like Hotmail and Yahoo to receive e-mail, you will need to use a server- based application to receive your responses.  Click on your tag and ensure the POST method is selected in the Property Inspector.

19.  By selecting POST, the data entered into the form by the user will be passed to a separate file when you click the Submit button.  This process will load the new page and resets your form page, deleting the user data from the form. If you navigate back to that page, the form will be blank.

20.  Create a new page and save it as emailform.php  The file extension php informs the browser that the page needs to be process differently than basic HTML.  Now it’s time to format your page to thank your users for visiting and completing the form.  Next we need to add the scripting that will generate the server-based email.