Chapter 9

Collecting Data with Forms

• A form on a web page consists of form objects such as text boxes or radio buttons into which users type information or from which you make selections.

Planning and Creating a Form

• Form labels identify the form object by its function, such as a “First Name” label beside a text box that collects the user’s first name.

Planning and Creating a Form

• Forms should be organized with the information in a logical order that will make sense to users.

• The most important information should be at the top.

Planning and Creating a Form

• Forms should have good contrast between the color of the text and the color of the form background.

Planning and Creating a Form

• The Form button in Dreamweaver can be used to create a form object on your web page.

Planning and Creating a Form

• Two methods to process the information collected in a form:– server-side scripting– client-side scripting

Planning and Creating a Form

• Server-side scripting uses applications that reside on your web server and interact with the form information collected.

Planning and Creating a Form

• Client-side scripting means that the user’s computer processes the form. The script resides on the web page, rather than on the server.

Planning and Creating a Form

• You can process form information several ways:– Have the information collected from the form and

emailed to the contact person on the website.

Planning and Creating a Form

• You can process form information several ways:– Have form data stored in a database to use at a

later date.– Have the application both collect the form data in

a database and send it in an email message.

Planning and Creating a Form

• You can process form information several ways:– Have the form data processed instead of stored.– Create forms that make changes to your web page

based on information users enter.

Planning and Creating a Form

• You can use the Property inspector to specify the application that you want to process the form information and how you want it sent to the processing application.

Planning and Creating a Form

Form controls in the Property inspector

Form properties

Form

Form ID property

Method property

Actionproperty

Form ID property

Planning and Creating a Form

Property inspector showing properties of selected form

Form name text box

Method specifying data

transfer method

Method list arrow

Planning and Creating a Form

• The Action property in the Property inspector specifies the application or script that will process the form data.

• The Method property specifies the HyperText Transfer Protocol (HTTP) used to send the form data to the web server.

Planning and Creating a Form

• The GET method specifies that ASCII data collected in the form will be sent to the server appended to the URL or the file included in the Action property.

Planning and Creating a Form

• The POST method specifies that the form data should be sent to the processing script as a binary or encrypted file, allowing you to send data securely.

Planning and Creating a Form

• The Form name property specifies a unique name for the form. The name can be a string of any alphanumeric characters and cannot include spaces.

Planning and Creating a Form

• The Target property lets you specify the window in which you want the form data to be processed.

Planning and Creating a Form

• CGI is one of the most popular tools used to collect form data.

• CGI allows a web browser to work directly with the programs that are running on the server and also makes it possible for a website to change in response to user input.

Planning and Creating a Form

• CGI programs can be written in the computer languages Perl or C, depending on the type of server that is hosting your website.

Planning and Creating a Form

• The resulting data is then stored in a database or sent to an email server, which then sends the information in an email message to a designated recipient.

Planning and Creating a Form

• You can use CSS or tables to help place page elements on a web page.

• You can also use CSS or tables to help lay out forms.

Planning and Creating a Form

Setting table and cell properties

Planning and Creating a Form

• To make sure that your labels and form objects appear in the exact positions you want on a web page, you can place them on the page using layout options such as div tags, tables, and lists.

Planning and Creating a Form

Setting table properties

Rows=10

Top row header

Columns=2

Verify that these are blank

Planning and Creating a Form

• When you create a form, you need to include form field labels so that users know what information you want them to enter in each field.

Planning and Creating a Form

Website with clear labels for form fields

Planning and Creating a Form

• You can add labels to a form using one of two methods:– type a label in the appropriate table cell of your

form.– use the Label button in the Forms category on the

Insert panel to link the label to the form object.

Planning and Creating a Form

• With CSS3, many of the tags used to position table content are deprecated.

• If you use a table to position data in a form, you will need to create or modify CSS rules to format the labels and data fields, such as your horizontal and vertical alignment.

Planning and Creating a Form

• Form objects are the form components such as check boxes, text boxes, and radio buttons that allow users to provide information and interact with the website.

Working with Form Objects

Website form with several form objects

Text field

Text area field

Menu list

Security challenge

Submit button

Working with Form Objects

• Text fields are the most common type of form object and are used for collecting a string of characters, such as a name, address, password, or email address.

• A text area field is a text field that can store several lines of text.

Working with Form Objects

Form with single-line fields added

Working with Form Objects

• Text fields are the most common type of form object and are used for collecting a string of characters, such as a name, address, password, or email address.

• A text area field is a text field that can store several lines of text.

Working with Form Objects

• You can use check boxes to create a list of options from which a user can make multiple selections.

• A group of check boxes is called a check box group.

Working with Form Objects

Checkbox Group dialog box

Checkbox Group dialog box

Checkbox labels

Layout using Line Breaks option

Checkbox values

Working with Form Objects

• You can use radio buttons to provide a list of options from which only one selection can be made.

• A group of radio buttons is called a radio group. Each radio group you create allows only one selection from within that group.

Working with Form Objects

Radio Group dialog box

Checkbox Group dialog box

Second instance

Line breaks (<br>tags) option button

Working with Form Objects

• Using hidden fields makes it possible to provide information to the web server and form-processing script without the user knowing that the information is being sent.

Working with Form Objects

Property inspector showing properties of selected hidden field

Hidden Field text box Hidden Field iconValues Hidden Field button

Working with Form Objects

• You can insert an image field into a form using the Image Field button on the Insert panel.

• You can use image fields to create buttons that contain custom graphics.

Working with Form Objects

• If you want your users to upload files to your web server, you can insert a file field.

Working with Form Objects

• All forms must include a Submit button, which users click to transfer the form data to the web server.

Working with Form Objects

New Submit and Reset buttons added to form

Button name text box Submit button Button buttonReset buttonValue text box

Working with Form Objects

• You can also insert a Reset button, which lets users clear data from a form and reset it to its default values, or a custom button to trigger an action that you specify on the page.

Working with Form Objects

• Jump menus are navigational menus that let users go quickly to different pages in your site or to different sites on the Internet.

Working with Form Objects

• You can place a form label either before or after it by typing it directly on the form.

• If you only need words “Yes” and “No” beside two radio buttons, you can add the labels “Yes” and “No” using a form attribute called a label tag.

Working with Form Objects

• To obtain form controls designed for creating specific types of forms, such as online tests and surveys, you can visit the Adobe Marketplace & Exchange, a central storage location for program extensions, also known as add-ons.

Working with Form Objects

Using Adobe Marketplace & Exchange

Click to visit Dreamweaver

Exchange

Working with Form Objects

• After you create a form, you should:– Test it to make sure that it works correctly and is

easy to use.– Verify that the fields are arranged to provide a

logical flow of information, so the user is not confused about where to go next when completing the form.

Testing and Processing a Form

– Make sure that there is enough contrast between the form text and the table background so the text is readable.

Testing and Processing a Form

• When you are finished with your form, you should always have several people test it before you publish it.

• Then make any necessary changes based on any testing feedback that you receive and test it one final time.

Testing and Processing a Form

Viewing the feedback link

Link to feedback

page

Testing and Processing a Form