1

Building FORMS In

• When a visitor enters information into a web form displayed in a web browser and clicks the submit button, the information is sent to a server where a server-side script or application processes it. The server responds by sending the processed information back to the user (or client), or by performing some other action based on the form’s contents.

Marion Setton

2

Using forms Please note that forms require an external

script to actually use them to send information. We will address that later on.

• Open the Contact page. Click into the text or editable area (if you are using a template.)

• Type: “Please give us your feedback”, and press enter.

• Select all the text and click the increase indent twice in the properties panel.

Select Insert > Form, or select the Forms category in the Insert bar and click the Form icon. In Design view, forms are indicated by a dotted red outline. If you don’t see this outline, select View > Visual Aids > Invisible Elements.Click insert, form, text field (area that will be sent). A dashed red box will appear.

• Type name (lower case) in the ID box, and Name in the Label edit box.

• ID is what the script uses to communicate with the form.

• Label is the word that appears on the page. Screen reader can read the label. Attach the label to the tag

• Repeat for Email address

3

•Insert, form, text area, ID: comments, Label: Comments.

Add the Submit button: Insert, Form, Button. Enter Submit for the ID & nothing for the label, OK

4

Create Form with Tables for cleaner structure

• Open a page from your template and name it membership

• Create a table, width 90%, 2 columns and 9 rows, cell padding 6

• Select the arrow at the top on the 1st column – align right, 2nd align left.

• Start on the left hand cell, insert text field.

• Drag the label to the left side. The label is attached to the text field.

• Look at the code.Group radio

button

Select a list/menu

5

Create a list• Select a list/menu. Menu: only one item, List can be multiple items. User must click

the ctrl to select more than one.• ID – Become a volunteer. Create list with Choose as the initially selected button.

Create a Radio GroupName it: Choose button. Label is what they see, value is what you see in the email

Create a check box• Insert check box. You can leave it checked.

Reset and Submit buttons• Choose button, ID – clear, no label. Ok• Select the button, change the value to reset. Action reset• Select the button, ID submit, change value to Send form. • Select the <form tag>• The action will look like http://www.beavercheese.com\cgi_bin

Validate fields• Go to behaviors + validate form• Decide on which fields are required• Make email field specific

6

Create an HTML form

• In the Form Name box, type a unique name to identify the form. Naming a form makes it possible to reference or control the form with a scripting language, such as JavaScript or VBScript. If you do not name the form, Dreamweaver generates a name using the syntax form, and increments the value of n for each form added to the page.

• In the Action box, specify the page or script that will process the form data by typing the path, or clicking the folder icon to navigate to the appropriate page or script. You can send the viewer to a thank you page.

• In the Method pop‑up menu, specify the method to transmit the form data to the server. Set any of the following options:

– The GET method appends parameters to the requested URL. The parameters are in turn visible to anyone viewing the page. The GET method should be used for search forms.

– When using the POST method, parameters are sent to the web server as part of the document's header, and are not visible or accessible to anyone who's viewing the page using standard methods. Better choice.

7

• Do not use the GET method to send long forms. URLs are limited to 8192 characters. If the amount of data sent is too large, data will be truncated, leading to unexpected or failed processing results.

• If you collect confidential user names and passwords, credit card numbers, or other confidential information, the POST method may appear more secure than the GET method. However, the information sent by the POST method is not encrypted and can easily be retrieved by a hacker. To ensure security, use a secure connection to a secure server.

– (Optional) In the Enctype pop‑up menu, specify the MIME encoding type of the data submitted to the server for processing. The default setting of application/x-www-form-urlencode is typically used in conjunction with the POST method. If you are creating a file-upload field, specify the multipart/form‑data MIME type.

– (Optional) In the Target pop‑up menu, specify the window in which to display the data returned by the invoked program. If the named window is not already open, a new window with that name opens. Set any of the following target values:

• _blank Opens the destination document in a new unnamed window.

• _parent Opens the destination document in the parent window of the one displaying the current document.

• _self Opens the destination document in the same window as the one in which the form was submitted.

• _top Opens the destination document in the body of the current window. This value can be used to ensure that the destination document takes over the full window even if the original document was displayed in a frame.

8

• Insert form objects in the page: – Enter a name for the object in the Property inspector. Every text field, hidden

field, check box, and list/menu object must have a unique name that identifies the object in the form. Form object names cannot contain spaces or special characters. You can use any combination of alphanumeric characters and an underscore (_). The label you assign to the object is the variable name that stores the value (the entered data) of the field. This is the value sent to the server for processing.

•Note: All radio buttons in a group must have the same name.– To label the text field, check box, or radio button object on the page, click

beside the object and type the label.

• Adjust the layout of the form. Use line breaks, paragraph breaks, preformatted text, or tables to format your forms. You cannot insert a form in another form (that is, you cannot overlap tags), but you can include more than one form in a page.

• When designing forms, remember to label the form fields with descriptive text to let users know what they’re responding to—for example, “Type your name” to request name information.

• Use tables to provide structure for form objects and field labels. When using tables in forms make sure all the table tags are included between the form tags.

9

Get a free HTML form, Web form or PHP form for your website!

• http://www.emailmeform.com/

• Form Builder• Using our intuitive and easy to use WYSIWYG online

form builder it allows you to build any type of form to help you collect data online. The drag and drop functionality allows you to quickly build your form using popular web browsers such as IE 7&8, Firefox, Safari, and Chrome. You can add various types of form fields (text fields, dropdowns, radio buttons, check boxes, etc.) to your form. Best of all, you can use the form builder without having to know any HTML or scripting languages. It's as easy as 123.