1. Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

2. Overview © 2013 John Wiley & Sons, Inc. 2

3. 4.13 Create Forms HTML forms are often used for questionnaires, hotel reservations, order forms, data entry, and a variety of other applications. Users provide information by entering text, selecting menu items, and so on, and then submit that information to you through a server. © 2013 John Wiley & Sons, Inc. 3

4. 4.13 Create Forms An HTML form is a section of a document that often contains text or images, markup, special elements called controls (checkboxes, radio buttons, and menus, etc.), and labels on those controls. A form is completed when a user modifies its controls (by entering text and selecting menu items), and submits it for processing. The first step in building a form in Dreamweaver is to add a form element, which serves as a container for the form fields. In hand-coded HTML, you do this by inserting the tag into your code. In the Design view, you can add a form element using the Form button. © 2013 John Wiley & Sons, Inc. 4

5. 4.13 Create Forms Follow these steps to insert a tag: 1.Choose File > Open. Navigate to the dw13lessons folder. Select the formbase.html file and press Open. 2.In the Design view, place your cursor where you want your form to go. Click in the white area to the left of the word Name (right). © 2013 John Wiley & Sons, Inc. 5

6. 4.13 Create Forms 3.In the Insert panel, choose the Forms category from the drop-down menu. 4.From the Forms category of the Insert panel, select the Form element (right). © 2013 John Wiley & Sons, Inc. 6

7. 4.13 Create Forms 5.You should now see a red outline on your page. This is how a form is displayed in the Design view. If you don’t see this outline, choose View > Visual Aids > Invisible Elements to turn on the form element’s visibility as shown below. © 2013 John Wiley & Sons, Inc. 7

8. 4.13 Create Forms 6.In the Document toolbar just above your document window, click the Code view button. 7.In line 214 of your code, you should see the newly added element (below). © 2013 John Wiley & Sons, Inc. 8

9. 4.13 Create Forms 8.In the Document toolbar just above your document window, click the Design view button. 9.Starting with the text labeled Name, click and drag downward to select all the text below your form element. 10. Choose Edit > Cut to cut the text to your clipboard. 11. Click inside the red outline of your form element. © 2013 John Wiley & Sons, Inc. 9

10. 4.13 Create Forms Choose Edit > Paste to place the clipboard text into your form element. All the text for your element labels is now inside the form element (right). © 2013 John Wiley & Sons, Inc. 10

11. 4.13 Create Forms The tag includes four different attributes and values by default: ID, name, method, and action These represent the HTML form element’s properties. Follow these steps to set form properties: 1.Make sure the form element you added in the previous exercise is selected by clicking on the edge of its red outline. A form field element must be selected before you modify its properties. © 2013 John Wiley & Sons, Inc. 11

12. 4.13 Create Forms 2.In the Property Inspector, you now have access to some of the properties associated with the tag (below). The Form ID makes it possible to identify and control the form with a script, as well as style it with CSS. © 2013 John Wiley & Sons, Inc. 12

13. 4.13 Create Forms 3.In the Form ID text field, type the name contact. Press Enter (Windows) or Return (Mac OS). The Action field allows you to specify the script, for example a Common Gateway Interface (CGI) script or a PHP page, that processes the user’s form data. You can type the path to this file, or use the Browse button to navigate to the desired file. In most cases, you’ll need to get this information from your system Administrator or hosting provider. © 2013 John Wiley & Sons, Inc. 13

14. 4.13 Create Forms 4.Because you have not yet defined the processing method for this form, leave the Action text field blank. 5.Make sure the POST method for this exercise is selected. The Method drop-down menu is where you choose how to transmit the data to a server. The Method drop-down menu includes the following choices: DEFAUT uses the browser’s default setting. Most browsers use the GET method. GET includes the form data as part of the URL of the request to the server. GET is limited to 8,192 characters in the URL and is less commonly used to send long forms. POST is similar to GET, but it embeds the form data in the header of the server request instead of in the URL. © 2013 John Wiley & Sons, Inc. 14

15. 4.13 Create Forms 6.Choose application/x-www-form-urlencoded from the Enctype drop-down menu (below). © 2013 John Wiley & Sons, Inc. 15

16. 4.13 Create Forms A Dreamweaver form is not a working form until you add the elements, or fields, allowing users to provide information. The Forms category in the Insert panel contains everything you need to insert any kind of form field into your page. © 2013 John Wiley & Sons, Inc. 16

17. 4.13 Create Forms These are the most commonly used form elements: Text fields accept alphanumeric text entries, in single- or multiple-line formats, or in a password (bulleted) format. Checkboxes allow users to make choices from a list of options. Radio buttons: selecting one radio button deselects all others in a group. List menus permit the selection of single or multiple items from a scrolling list Jump menus allow you to set each option from a scrolling list to link to a document or file. Buttons perform actions when clicked = or define other processing tasks in a script. © 2013 John Wiley & Sons, Inc. 17

18. 4.13 Create Forms Follow these steps to add a text field to a form: 1.Within your form, click to the right of the word Name. 2.Press the Text Field button in the Insert panel. The Input Tag Accessibility Attributes dialog box opens (right), allowing you to set attributes to make your form field more accessible for users as well as whomever is receiving the data after submission. © 2013 John Wiley & Sons, Inc. 18

19. 4.13 Create Forms 3.In the Image Tag Accessibility Attributes dialog box, specify the following: In the ID section, type Mailing_list_name. In the Style section, choose No label tag. The label element in a form provides additional usability.. © 2013 John Wiley & Sons, Inc. 19

20. 4.13 Create Forms 4.Press OK. A new text field appears within the form outline on your page (below). © 2013 John Wiley & Sons, Inc. 20

21. 4.13 Create Forms 5.Select the text field and notice the options available in the Property Inspector. 6.Type 55 in the Char Width text field. 7.Type 30 in the Max Chars text field to set the maximum number of characters that can be entered. 8.Choose Single Line from the Type options. 9.Repeat steps 1 to 9 to add Address and City/State/Zip text fields beneath the Name field. © 2013 John Wiley & Sons, Inc. 21

22. 4.13 Create Forms 10.Choose File > Save As. In the Save As dialog box, navigate to the dw13lessons folder and type organicform.html into the Name text field. Click Save. Now preview the open page in a browser. Your form should look like this: © 2013 John Wiley & Sons, Inc. 22

23. Lesson Summary © 2013 John Wiley & Sons, Inc. 23

24. Copyright 2013 John Wiley & Sons, Inc.. All rights reserved. Reproduction or translation of this work beyond that named in Section 117 of the 1976 United States Copyright Act without the express written consent of the copyright owner is unlawful. Requests for further information should be addressed to the Permissions Department, John Wiley & Sons, Inc.. The purchaser may make back-up copies for his/her own use only and not for distribution or resale. The Publisher assumes no responsibility for errors, omissions, or damages, caused by the use of these programs or from the use of the information contained herein.