Start Basics Color Forms Frames Images Links Lists Tables Type

 

Forms: Dreamweaver 4
Create Text and Password Boxes

The Text Box

The Password Box

The Text Box The text box form element asks for one line of text, e.g., a name or a street address:
Example
[FrontPage Save Results Component]

Last Name       First Name

To add a text box to your web page using Dreamweaver, you can choose Insert, Form Objects, Text Field from the main menu.

Form Objects Dropdown Menu

You can also click on the Insert Text Field button on the Forms Object Panel.

Insert Text Field button
Insert Text Field button

If you have not already created a form field to hold your form element, a dialog box will appear and you will be asked whether you want to add a form tag to your page.
Add Form Tag?
To function, a text box must be placed within a form field.

Click on Yes.

Your text box will appear and be surrounded by a dotted red line. This dotted line delineates the form field.

Notice that when you insert a text field the Property Inspector displays the attributes of that form element.
Text Field, Property Inspector
Here you can specify the properties of the text box.
In the TextField text box on the left side of the Property Inspector, fill in the Name of your text box.  Use a name that will identify the information being collected in this part of the form. NOTE: In the example above, I would type lastname in the Name field for the first text box in my form.
The name you choose is the term the form handler will assign to the value of the text box, i.e., the information that the user will enter into the form.
You can also change the Name of the text box by right clicking on the text box and choosing Name from the pop-up menu.

The Change Attribute dialog box will appear.

Text box pop-up menu
Change Name Attribute
Type the name of your text box.

Click on OK.

Notice that the new name of the text box will appear in the Textfield text box on the Property Inspector.

You can specify the width of the text box display by entering a value in the CharWidth text box.

You can specify the maximum number of characters that a user can enter in the text box by entering a value in the Max Chars. text box.

NOTE: If you place text in the Init Val field, that text will appear in the text box.

You can also access the Value field by right clicking on the text box and choosing Value from the pop-up menu.

The Change Attribute dialog box will appear, but this time the listed attribute will be Value.

Text box pop-up menu
Change Attribute, Value
Enter the value that you want to appear in the text box.

Click on OK.

Notice that the value you typed now appears in the Init. Val text box on the Property Inspector.

The Password Box The password box is similar to the text box except that the input data appears on the screen as asterisks.

To create a password box in Dreamweaver, follow the procedure to create a text box. 

Click on  the Password radio button on the far right of the Property Inspector.

It's probably a good idea to limit the maximum length of a password to 6-8 characters and to set the size of the password box to display only that length.

Forms: Dreamweaver 4
Overview
Create a Form
Create Text and Password Boxes
Create Radio Buttons
Create Check Boxes
Create a Drop-Down Menu
Create a Scrolling Text Box
Create the Reset and Submit Buttons

Start Basics Color Forms Frames Images Links Lists Tables Type

 

Personal Home PageWeb Design CenterTutorial MenuTop of Page

Web Design Center
Last Revised: September 2, 2001
© Agatha Taormina