Modifying Text Fields and Text Areas

This tutorial will show you how to modify text fields and text areas in Dreamweaver CS5.

Now let's return to our order form and do some work on the fields we've already inserted.

Here is the form.

The text field for customer name is selected. (Note that, in practice, this would probably be set up as two or more fields, with separate fields for given name and family name. Here we're just looking at the principles.)

Look at the Properties panel. There are fields for Char Width and Max Chars.

Char Width specifies the width of the visible field in characters. I'll set it to 20, which seems a reasonable number to cover most names.

Max Chars, on the other hand, specifies a limit on how many characters a name can contain. I'll set that to 40. If a name has more than 20 chars, clearly it will not all be visible because Char Width is set to 20, but I will be able to enter it.

For a text field for a name the Type of Single Line is fine. Note that if this were a password field we could make that selection and the entered password would not be shown on the screen but would be replaced by asterisks.

We can use Init Value to specify an initial value.

We also have options to specify that the field is Readonly (which means that data from a source will be displayed but can't be changed) and/or disabled (which may be because it's not relevant or not needed in this case).

We have no Class to assign yet, so that completes the settings for the CustomerName field.

Now let's look at the Message1 field.

There are some differences here.

It is a multi line field, and the maximum number of lines is currently 5, with a Char Width of 45.

I've entered an Init Value (which we would probably change depending on the time of year).

Here is the Textarea for Message1 now.

To make our form more helpful, it's straightforward to enter text elsewhere on the form. For example, place the cursor at the top of the form and enter text to explain the first field.

Similarly, we can easily add a heading to the form.

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: Modifying Text Fields and Text Areas in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!