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 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 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 1 st column – align right, 2 nd align left.

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 Group Name it: Choose button. Label is what they see, value is what you see in the 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 The action will look like Validate fields Go to behaviors + validate form Decide on which fields are required Make 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.

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. Dynamic pages generated by parameters passed by the GET method can be bookmarked because all the values needed to regenerate the page are contained in the URL displayed in the browser’s Address box. In contrast, dynamic pages generated by parameters passed by the POST method cannot be bookmarked. 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: _blankOpens the destination document in a new unnamed window. _parentOpens the destination document in the parent window of the one displaying the current document. _selfOpens the destination document in the same window as the one in which the form was submitted. _topOpens 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! 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.