Unit 9. Interactive Forms (I)

Unit 9. Interactive Forms (I)

We'll see what a form is, why it's used, how to insert one, which elements it can contain, and how to validate the data introduced into it.

Introduction

Forms are used to get users data, they can also be used to make orders in a virtual store, to create a survey, to know users opinon, receiving questions, etc. Once the user has filled out the data and clicked the button to send the form, a program will start, and will receive the data and make the required treatment. Here, we're going to see how to create a form (insert fields and buttons into the form and validate them) but not the data treatment yet, because you need programming knowledge, like VBScript, JavaScript or other programming language and this part isn't in the objective of the course. On the right you have an example of a form. A form can have labels, text fields, drop-down menus, and buttons.

The structure of an interactive form

The form elements can be inserted into a page through the Insert menu and then selecting the Form option.

Through this option you can access the list of all form objects that can be inserted in a Page.

Let's look at some of the different elements that can compose a form, and also some of its properties.

Text Field:

Allow you to add a text box. The text field only allows the user to write a line, while the Text Area allows the writing of many. You can convert it into a Text Area through the properties inspector.

It's also possible to define it as Password, so the text field characters will be hidden and shown as the image below.

Next you have an example of each one of the three types.You can write on them to see how they work.

Textarea

Through the propierties inspector it's possible to assign the width of the text box, the top number of lines or characters, and the initial value of the box.

Button:

The button can have three options assigned: Submit form, Reset form (clear all the form fields), or None (to assign a different behavior to the previous two)

You can also change the text button through the Label option of the properties inspector.

Check box:

Is a little square that can be activated or deactivated:

I want to receive information

It can be set in its initial status as Checked or as Unchecked.

Radio button :

Is a little circlular button that can be selected or deselected. If there are many in the same form only one can be activated. When you activate one, the others are automatically deactivated.

Superman Spiderman

List/Menu:

A list or a menu is a form element associated to an option list.

--- Choose one option --- Dog Cat Canary Parrot

--- Choose one option --- Dog Cat Canary Parrot

The elements are added through the List Values button of the properties inspector.

When it comes to a menu, it is only possible to select one of the elements, but if it comes to a list many can be simultaneously selected editing the Selections option of properties inspector.

Label:

Is used to name the rest of the elements of the form, so that the user is able to know which data to introduce into each one of them. 

Unit 9. Interactive Forms (II)

Creating Interactive forms

You can create forms through the Insert menu and then the Form option. Once you have created the form, it will be represented in the Dreamweaver window as a box with dashed red lines, similar to this image on the right side. You can insert the form elements inside the form through the Insert menu and then the Form option.

It's recommendable to use tables to organize the elements of the forms. You will find a better distribution of the form elements using them, and this will make its comprehension easier while improving its appearance.

Validating Interactive forms

The forms validation is used to make the form valid before sending it, and also to make the user fill in the obligatory fields before sending it. To validate a form, you need to open the Behaviors panel. This panel can be opened through the Window menu and then the Behaviors option, or by pressing Shift+F3. In this panel you need to unfold the button by clicking on it, and in Show events for, select an actual version from the browser's list. You can choose for example IE 6.0. browser. After doing this, you have to unfold the button again, and select the Valid form option. For all this you will have to previously select the form.

A window like this will be shown, here you will find all the form elements. You can select each one of the form element, and specify the required requests. You can establish an obligatory filling field, whether it's content to be numeric, an e-mail address, etc.

To practice you can perform the Step by step exercise in Inserting elements in an interactive form