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 ed 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 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 Action property 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 server, which then sends the information in an 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 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 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 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 ( 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 boxHidden Field iconValuesHidden 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 button Reset button Value 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