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

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

Embed Size (px)

Citation preview

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

Lesson 13: Building Web Forms

Introduction to Adobe Dreamweaver CS6Adobe Certified Associate:

Web Communication using Adobe Dreamweaver CS6

Page 2: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 2

Overview

Page 3: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

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.

Page 4: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

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 <form> tag into your code. In the Design view, you can add a form element using the Form button.

© 2013 John Wiley & Sons, Inc.

Page 5: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

5

4.13 Create FormsFollow these steps to insert a <form> 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.

Page 6: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

6

4.13 Create Forms3. 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.

Page 7: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

7

4.13 Create Forms5. 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.

Page 8: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

8

4.13 Create Forms6. 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 <form> element (below).

© 2013 John Wiley & Sons, Inc.

Page 9: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

9

4.13 Create Forms8. 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.

Page 10: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

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.

Page 11: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

11

4.13 Create Forms• The <form> 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.

Page 12: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

12

4.13 Create Forms2. In the Property Inspector, you now have access

to some of the properties associated with the <form> 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.

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

13

4.13 Create Forms3. 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.

Page 14: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

14

4.13 Create Forms4. 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.

Page 15: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

15

4.13 Create Forms6. Choose application/x-www-form-urlencoded from

the Enctype drop-down menu (below).

© 2013 John Wiley & Sons, Inc.

Page 16: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

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.

Page 17: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

17

4.13 Create FormsThese 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.

Page 18: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

18

4.13 Create FormsFollow 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.

Page 19: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

19

4.13 Create Forms3. 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.

Page 20: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

20

4.13 Create Forms4. Press OK. A new text field appears within the

form outline on your page (below).

© 2013 John Wiley & Sons, Inc.

Page 21: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

21

4.13 Create Forms5. 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.

Page 22: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

22

4.13 Create Forms10.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.

Page 23: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 23

Lesson Summary

Page 24: Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

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.