Presentation is loading. Please wait.

Presentation is loading. Please wait.

Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating.

Similar presentations


Presentation on theme: "Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating."— Presentation transcript:

1

2 Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Forms DREAMWEAVER MX 2004

3 Chapter 9 Quick Links Slide 3 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Performance Objectives  Understand forms and form objects.  Create forms and insert a table inside a form.  Create single-line, multiple-line, and password text fields.  Create hidden fields.  Create check boxes.  Create radio buttons and radio button groups.  Create menus.

4 Chapter 9 Quick Links Slide 4 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Performance Objectives…/2  Create lists.  Create jump menus.  Use the image field form object to create graphical form buttons.  Insert a file field for file uploading.  Create form Submit and Reset buttons.  Attach Validate Form behaviors to forms and form objects.

5 Chapter 9 Quick Links Slide 5 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Understanding Forms  Forms are created using paired form tags.  The form tags define the form and contain the form objects that form users will use to input data.  Input tags are used to insert form objects within the area defined by the form tags. form tags input tag

6 Chapter 9 Quick Links Slide 6 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Understanding Forms…/2  Input tags contain type attributes that indicate the type of form object being inserted.

7 Chapter 9 Quick Links Slide 7 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Understanding Forms…/3  A Submit button must be added to the form.  You should also include a Reset button.  When a form is submitted, the user’s browser gathers the form answers and uses the URL specified in the form tag action attribute.  After the answers are processed, most scripts specify that an acknowledgment page be returned and opened specified by the form tag target attribute.

8 Chapter 9 Quick Links Slide 8 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Form Tag Attributes AttributeFunction accept Specifies allowable file types for uploading when using the file input control. accept-charset Tells the server which character sets it must accept from a client form. action Specifies the URL that will direct the form to a CGI program or to an HTML page containing server-side scripts. enctype Specifies a MIME type for the data being submitted with the form. method Specifies whether a form will be submitted using GET or POST methods. nameSpecifies a name for the form element. target Specifies the window that an HTML document with form results will be loaded in.

9 Chapter 9 Quick Links Slide 9 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Planning Forms  Careful planning will save a lot of time and will help ensure that your form gathers the information you are looking for.  Questions should be phrased as clearly as possible.  The choices for answering a question should be appropriate to the question being asked.  Make sure that the answers reflect all of the possible choices.  Labels for form objects should be clear.  Questions should relate to form objects.

10 Chapter 9 Quick Links Slide 10 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Planning Forms…/2  Clearly state the purpose of the questions.  Instructions on how to complete the form should be clear and easy to understand.  Before a form is uploaded to a Web site, it should be tested.  Testing a form is a good way to make sure that other users will understand your form and that the form will elicit the information you are seeking.

11 Chapter 9 Quick Links Slide 11 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Planning Forms…/3  Consider including a privacy statement. privacy statement with link to detailed statement

12 Chapter 9 Quick Links Slide 12 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Planning Forms…/4  One method for creating neat forms is to use tables. table used for form layout form objects without table

13 Chapter 9 Quick Links Slide 13 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Forms  You can use Menu bar commands to create forms and insert form objects. click Insert  point to Form  select from submenu 

14 Chapter 9 Quick Links Slide 14 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Forms…/2  The Insert bar (Forms menu item or tab) also can be used to insert forms and form objects. Form Text Field Hidden Field Checkbox Textarea Radio Button Radio Group List/Menu Jump Menu Image Field File Field Button Label Fieldset

15 Chapter 9 Quick Links Slide 15 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Forms…/3  Dotted red lines represent the form borders.  If the borders are not visible, click View options on the Document toolbar, point to Visual Aids, and then make sure that there is a check mark beside Invisible Elements.

16 Chapter 9 Quick Links Slide 16 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Forms…/4  A table can be inserted inside a form.  Using a table affords better control over form layout and design.  If a form object is inserted outside a form, a message appears.  For best results, form objects should always be contained inside form tags.

17 Chapter 9 Quick Links Slide 17 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Forms…/5  The form can be selected by clicking its border.  The Form Property inspector then displays.

18 Chapter 9 Quick Links Slide 18 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Form Property Inspector – Form name  A default name appears in the Form name text box.  This name is used for identification purposes with scripting languages.  If you type a new name, do not use spaces or special characters.

19 Chapter 9 Quick Links Slide 19 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Form Property Inspector – Action  The Action text box is used to specify the path to the dynamic page or script that will be used to process the form.

20 Chapter 9 Quick Links Slide 20 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Form Property Inspector – Method  The Method text box is used to specify the method for transmitting form data, GET, POST, or Default.

21 Chapter 9 Quick Links Slide 21 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Form Property Inspector – Enctype  The Enctype text box is used to specify a MIME type for data submitted for processing.  The default setting is application/x-www- form-urlencode and is usually used with the POST method.  When you use a file upload form object, you should select multipart/form-data.

22 Chapter 9 Quick Links Slide 22 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Form Property Inspector – Target  The Target text box selects the window that will be used to display data returned by the server processing the form.  The target names have the same function as they do in the other Property inspectors.

23 Chapter 9 Quick Links Slide 23 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Text Fields  Text fields allow form users to enter alphanumeric data in a text box. labeltext field

24 Chapter 9 Quick Links Slide 24 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Text Fields…/2  When a form object is inserted, the Input Tag Accessibility Attributes dialog box appears.

25 Chapter 9 Quick Links Slide 25 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Text Fields…/3  The dialog box can be used to specify a label and to indicate how the label is attached to the text field.  The dialog box also can be used to indicate an access key and a tab index.  Selecting a text field displays the Text Field Property inspector.

26 Chapter 9 Quick Links Slide 26 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Text Field Property Inspector – TextField  Use the TextField text box to provide a unique name for the text field.

27 Chapter 9 Quick Links Slide 27 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Text Field Property Inspector – Char width  The Char width text box default setting limits a text field’s visible length to 20 characters.  This has no effect on the information sent for processing.  If you want more characters to be visible, you can type a number greater than 20.

28 Chapter 9 Quick Links Slide 28 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Text Field Property Inspector – Max Chars  The Max Chars text box can be used to specify a maximum number of characters that a user can enter.  Leaving this text box blank lets users enter an unlimited amount of characters.

29 Chapter 9 Quick Links Slide 29 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Text Field Property Inspector – Single line and Multi line  Selecting the Single line radio button creates a single-line text field.  Selecting the Multi line radio button displays the text field as a multiple-line text field.

30 Chapter 9 Quick Links Slide 30 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Text Field Property Inspector – Wrap  When a multiple-line text field is created, the Wrap text box is enabled.  The Default setting prevents text from wrapping to a new line when the width of the text field is exceeded.  Off functions the same as Default.  Virtual causes text to wrap to a new line when the width of the text is exceeded.  Physical allows text to wrap and also wraps data sent for processing.

31 Chapter 9 Quick Links Slide 31 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Text Field Property Inspector – Password  Clicking the Password radio button causes text entered in the text field to appear as bullets or asterisks.  This is not the same as encrypting information.  When the Password radio button is selected, the text field automatically appears as a single line.

32 Chapter 9 Quick Links Slide 32 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Text Field Property Inspector – Init val  The Init val text box can be used to enter default text that will appear in the text field.  Default text is often placeholder text used to provide instructions.

33 Chapter 9 Quick Links Slide 33 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Hidden Fields  Hidden fields are used to transmit data that is provided by the Web page, instead of data provided by the user.  A common use for hidden fields is to pass on instructions to a server, such as the e-mail address that processed form data should be sent to.  Hidden fields are not displayed in a browser, but they are visible in the Document window as a marker. hidden field marker

34 Chapter 9 Quick Links Slide 34 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Hidden Fields…/2  Selecting the marker displays the Hidden Field Property inspector.  You can type a name and a value for the hidden field.

35 Chapter 9 Quick Links Slide 35 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Check Boxes  Selecting the check box displays the Check Box Property inspector.  You should enter a unique name in the CheckBox name text box for scripting identification purposes.  The Checked value text box is used to enter a value.  The Checked radio button can be used to create a default answer.

36 Chapter 9 Quick Links Slide 36 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Radio Buttons  When radio buttons are inserted, they are named radiobutton.  When radio buttons have the same name, only one of the radio buttons can be selected at a time.  If one of the two radio button names is changed, the buttons function like check boxes.

37 Chapter 9 Quick Links Slide 37 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Radio Buttons…/2  Radio button groups are useful for questions with only one correct answer in a list of possible answers.  The Radio Group dialog box allows you to choose whether you want radio buttons to be inserted using line breaks or a table.

38 Chapter 9 Quick Links Slide 38 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Radio Buttons…/3  When an individual or grouped radio button is selected, the Radio Button Group Property inspector is displayed.  This Property inspector is almost identical to the Check Box Property inspector, and it offers you the option of naming the radio button, specifying a value, and specifying an initial state.

39 Chapter 9 Quick Links Slide 39 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Menus and Lists  A menu displays a drop-down list when its down-pointing arrow is clicked.  A list allows users to use navigation arrows to scroll through list items. form menu form list

40 Chapter 9 Quick Links Slide 40 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Menus and Lists…/2  You can specify the number of items that will be visible in a list.  A list with a scroll bar is often used when there is not enough room on a page for a drop-down list to appear.  Lists also can be configured to allow users to select more than one item.  Selecting a list/menu form object displays the List/Menu Property inspector.

41 Chapter 9 Quick Links Slide 41 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. List/Menu Property Inspector – List/Menu  The List/Menu text box can be used to provide a name for the list or menu for scripting identification purposes.

42 Chapter 9 Quick Links Slide 42 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. List/Menu Property Inspector – List Values  Menu items and their values can be added by clicking the List Values button.  This button opens the List Values dialog box.

43 Chapter 9 Quick Links Slide 43 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. List/Menu Property Inspector – Initially selected  The Initially selected list box displays the menu items created for the list.  Selecting one of these items causes it to be the default item displayed when the menu is viewed in a browser window.

44 Chapter 9 Quick Links Slide 44 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. List/Menu Property Inspector – Height  The Height text box is used to specify the number of items that will be displayed in a list without the need to scroll. list with a Height text box setting of 3

45 Chapter 9 Quick Links Slide 45 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. List/Menu Property Inspector – Allow multiple  The Allow multiple check box allows users to select more than one item in a list.

46 Chapter 9 Quick Links Slide 46 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Jump Menus  A jump menu has menu items that function as hyperlinks.  After inserting a jump menu, the Insert Jump Menu dialog box opens.

47 Chapter 9 Quick Links Slide 47 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Insert Jump Menu Dialog Box – Text  You can type jump menu items in the Text text box.  You can change the position of the items in the list by clicking the up- and down- pointing arrows.

48 Chapter 9 Quick Links Slide 48 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Insert Jump Menu Dialog Box – Browse  You can click the Browse button to open the Select File dialog box.  You can use the Select File dialog box to browse and locate a file that will be linked to the list item.

49 Chapter 9 Quick Links Slide 49 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Insert Jump Menu Dialog Box – Open URLs in  The Open URLs in list box lets you specify a window or frame that a linked file will appear in.

50 Chapter 9 Quick Links Slide 50 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Insert Jump Menu Dialog Box – Menu name  The Menu name text box enables you to type a name for the jump menu.

51 Chapter 9 Quick Links Slide 51 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Insert Jump Menu Dialog Box – Insert go button after menu  When selected, the Insert go button after menu check box places a Go button to the right of the jump menu.

52 Chapter 9 Quick Links Slide 52 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Insert Jump Menu Dialog Box – Select first item after URL change  The Select first item after URL change check box should be selected if you want the jump menu to revert to displaying its default item after a selection has been made.

53 Chapter 9 Quick Links Slide 53 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Editing Jump Menu Items  Jump menu items can be edited by selecting the jump menu and using the Jump Menu Property inspector.  To edit the jump menu behavior, go to the Behaviors panel to double-click Jump Menu Go.

54 Chapter 9 Quick Links Slide 54 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Editing Jump Menu Items…/2  This opens the Jump Menu dialog box.  This dialog box differs from the Insert Jump Menu dialog box in that it does not contain a provision for inserting a Go button and lacks the Menu name text box.

55 Chapter 9 Quick Links Slide 55 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Image Fields  An image field is used to create a graphical Submit button.  After you have selected the image using the Select Image Source dialog box, type submit button in the Image Field Property inspector ImageField text box.  You also can create an alternate description for the image.

56 Chapter 9 Quick Links Slide 56 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating File Fields for File Uploads  The file field allows you to upload a file when a form is submitted.  Inserting a file field places a text box and Browse button in the document.

57 Chapter 9 Quick Links Slide 57 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating File Fields for File Uploads…/2  Clicking the Browse button opens a Choose file dialog box used to browse and locate the file to be uploaded.

58 Chapter 9 Quick Links Slide 58 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating File Fields for File Uploads…/3  Before inserting a file field, you must check with your server administrator to determine whether anonymous file uploads are permitted.  You should also find out about any special instructions necessary for making the file field work with the server.  The Form Property inspector Method text box should be set to POST.  The Max Chars text box should be left empty to ensure that a long file name will be accepted.

59 Chapter 9 Quick Links Slide 59 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Creating Buttons  Dreamweaver MX 2004 makes inserting Submit and Reset buttons for forms very convenient.  After a button has been selected, the Button Property inspector appears.

60 Chapter 9 Quick Links Slide 60 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Button Property Inspector – Action  The default Submit button can be changed to a Reset button by selecting it and then clicking the Reset form radio button.  When the form is viewed in a browser window, clicking the Reset button removes any data entered and restores the form to the way it appeared when it was first opened.  The None radio button can be used to create a button without any action.

61 Chapter 9 Quick Links Slide 61 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Button Property Inspector – Label  The Label text box can be used to change the text that appears on a button.

62 Chapter 9 Quick Links Slide 62 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Applying Labels to Form Objects  Clicking the Insert bar Label button wraps label tags around the form object.  If you have enabled the Form objects accessibility option in the Preferences dialog box Accessibility page, you already have the option of wrapping labels around form objects by using the Input Tag Accessibility Attributes dialog box.  The Label command or button does not add a for attribute or a label name, so those must be added in Code view or Code and Design view if desired.

63 Chapter 9 Quick Links Slide 63 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Understanding the Fieldset Button  Fieldset tags are container tags that can be used to identify form objects dealing with related information.  Because the content of fieldset tags can be read by screen readers, their primary function is to improve accessibility for users with visual disabilities.

64 Chapter 9 Quick Links Slide 64 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Understanding the Fieldset Button…/2  When the Fieldset button is clicked, the Document window changes to Code and Design view, and a Fieldset dialog box appears.  The dialog box contains a single Label text box that can be used to type text that can identify a group of form objects.

65 Chapter 9 Quick Links Slide 65 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Attaching the Validate Form Behavior to Forms  You can attach a Validate Form behavior to a form object and/or a Submit button using the Behaviors panel.  The Validate Form behavior works only with text field form objects.  Every text field in a form must have a unique name for it to work properly.  When attached to a text field, the Validate Form behavior checks whether a user has entered data of the type specified.

66 Chapter 9 Quick Links Slide 66 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Attaching the Validate Form Behavior to Forms…/2  If the appropriate data was not entered, a message box appears in the browser window when the user leaves the text field.

67 Chapter 9 Quick Links Slide 67 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Attaching the Validate Form Behavior to Forms…/3  The Validate Form behavior also can be attached to a Submit button.  The behavior operates when the Submit button is clicked and determines whether text fields contain data as specified.  You can attach Validate Form behaviors to text fields and the Submit button at the same time.  This acts as a fail-safe measure, providing a reminder to users when they make a mistake in filling in a text field, and preventing them from submitting an incorrectly filled out form.

68 Chapter 9 Quick Links Slide 68 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Attaching the Validate Form Behavior to Forms…/4  The Validate Form behavior can be attached to a text field by selecting the field, clicking the Behaviors panel Plus (+) button, and then clicking Validate Behavior from the drop-down list that appears.

69 Chapter 9 Quick Links Slide 69 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Attaching the Validate Form Behavior to Forms…/5  This opens the Validate Form dialog box.

70 Chapter 9 Quick Links Slide 70 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. Attaching the Validate Form Behavior to Forms…/6  The named fields in the form appear in the Named fields list box.  Clicking the Required check box indicates that a value is required.  One of the four Accept radio buttons can be enabled to validate whether any data is acceptable (Anything), a number must be entered (Number), an e-mail address must be entered (Email address), or a number in a range must be entered (Number from).

71 Chapter 9 Quick Links Slide 71 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. COMMANDS REVIEW How do you insert a form? click Insert  point to Form  click Form 

72 Chapter 9 Quick Links Slide 72 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. COMMANDS REVIEW…/2 How do you insert form objects? click Insert  point to Form  select from submenu 

73 Chapter 9 Quick Links Slide 73 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating Check Boxes Creating Radio Buttons Creating Menus and Lists Creating Jump Menus Creating Image Fields Creating File Fields for File Uploads Creating Buttons Applying Labels to Form Objects Understanding the Fieldset Button Attaching the Validate Form Behavior to Forms Commands Review Copyright 2005, Paradigm Publishing Inc. COMMANDS SUMMARY Insert formInsert, Form, Form Insert form objects Insert, Form, select from submenu


Download ppt "Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating."

Similar presentations


Ads by Google