General comments

The two most common types of information collected on web forms are single lines of text and multiple lines of text. In both cases, these are open ended fields, the user being allowed to enter whatever he/she wants. Officially according to HTML coding standards, a single line of text has different coding than a multiple line of text, but Dreamweaver treats these two fields as the same broad type.

Be sure when you go to place a text field, you are sitting inside the dotted red area that you can see in your Dreamweaver display. This dotted line will NOT appear later when the form is posted to a website. Also open up the Property inspector window, since this window controls the traits associated with each field.

Single line text fields

When you insert a text field in Dreamweaver, some of the initial values displaying in the Property inspector window will have to be changed.

The type of field should be single line, which is probably the current selection, should be single line

There are two windows related to width. Character width is how wide the field will appear on the screen. Maximum characters (which is optional to complete) indicates how many characters will be allowed. If you are not certain how long the response could be, it is better to leave maximum length empty.

On the left of the Property inspector window you can see the text TextField which is the type of field and underneath is a window which needs to be changed. This window is for the field name. Although Dreamweaver does not care if your field name has spaces, it is a good habit to get into to make this a single word field name, even if it is a long word, with dashes or underscores. If later you decide to import your form data into a database or spreadsheet program, some software will want the field name to be a single word. So name your fields single words. Also do not make the field name so cryptic that someone else working with your form will not understand the name.

If your field is for a name, make the field name name or respondent-name or complete-name. If the field is for an address, make the field name address or address1 if there are multiple lines for the address. Remember also that as you give your fields names, a given name can only be used ONE time within a form. As you name fields, here and in other types of fields, be consistent in the use of upper and lower case. For the most part use lowercase letters.

Notice that there is an box allowing you to type in an initial value. You can fill in text here, if you wish, but it often is better to force users to type in a response.

Multiple line text fields

If you want to have multiple lines in the text answer, you still select Text Field from the list of choices in Dreamweaver, but you then change the type to be Multiple line.

Like a single line text field, you indicate the number of characters for the field's width. However, you also indicate how many lines will show in the box display. The number of lines does not limit how much is typed into the field. You could indicate two lines and the user still type in a half page of information. But for most users, the number of lines showing is a clue to how much text is "expected".

A very important option in the Property Inspector window for multiple line text fields is the Wrap option. If there is no wrap associated with the field, then as the user types in an answer, the text line does not wrap when it reaches the right edge of the text box. This means that the user cannot easily read what he/she has typed in. If you select the option of virtual the text wraps on the screen but not when the response is submitted. If you select the option of physical the text wraps both on the screen and when it is submitted. I normally recommend using physical.

Just as in a single line text field, you need to give a meaningful field name as the last step. Again, use single words for the field name.

This document is part of a set of tutorials related to putting a form on your website. The initial page is found at cals.arizona.edu/ecat/forms/olderforms.html