Inserting Form Objects

This tutorial will illustrate inserting form objects in Dreamweaver CS5.

In the previous section we created an empty form called FlowerForm1.

Now we're going to insert some objects into the form. The objects can be text or images, fields for the visitor to fill in, lists to select from, and so on. Whilst some of the objects might sound quite complicated, Dreamweaver usually does most of the work for us to make the objects on a form do what they need to.

We're going to develop a form that takes orders for flowers, so let's start with a box for the customer to enter their name in.

To insert an object on a form, select the Insert menu then Form then look at the fly-out.

For a single line of text, insert a Text Field.

Now we see the Input Tag Accessibility Attributes dialog.

Enter an ID, which must be unique. Choose a name that reminds you of what the object is intended for.

Enter a label for the object. This will tell the visitor what the object is intended for.

Select a Style and Position for the label.

Enter an Access Key. The way this works is that pressing the Alt key + the Access Key provides a keyboard shortcut to the object. So, for example, entering N here means that its keyboard shortcut is Alt+N.

Enter a Tab Index. Tab Index values determine the order in which the objects on the form will be entered if a visitor presses the Tab key repeatedly to work through the from. Normal practice is for this "tab sequence" to be from top left to bottom right on a form. In this case I enter 1.

Here is the completed dialog.

I press OK, and the text field with its label appears on the form.

Note how the label is positioned to the left of the text field as specified.

Now let's add another field, this time to contain a message to be added to the flowers. For a situation where text may cover more than one line, we usually use a Textarea.

Select Textarea from the Insert Form fly-out and complete the Input Tag Accessibility Attributes dialog. Here is my completed version.

Press OK, and the Textarea appears.

As we insert new objects we can make space by pressing enter at the end of each line on the page, as here.

The objects we've inserted now need some work done on their formatting, and we'll look at that in the next section.

More Dreamweaver CS5 Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Inserting Form Objects in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!