Website guide:forms, Simple Text Entry Fields

Forms can be enriched with elements that actually collect data: the ability to enter text.

Many of the text fields in your forms will only need to accept a single line of text from a user: A name, an address, a query value, or a credit card number. For this kind of text entry, the text field created by the <INPUT> tag is just right.

To create a textual input element, set the TYPE attribute of the <INPUT> tag to text. The resulting text field will look something like this:

Go ahead and type into the field. See how many characters you can type, and how many of those will be displayed. Using Netscape 4.0, the text field will display 20 characters, and accept a seemingly limitless amount of input. Other browsers will most certainly display and accept different amounts of text.

To bring order to your text fields, use the SIZE and MAXLENGTH attributes. The former controls the size of the text field, setting its width to be the desired number of characters. The latter sets the maximum number of characters that can be entered into the field.

Restricting the total number of characters is important for two reasons. First, most text entry fields are designed for values of a specific length. Phone numbers may have seven digits; ZIP codes five or nine. By limiting the field length to acceptable amounts, you reduce the number of errors a user can cause when entering text. Second, you'll want to limit the length of the field to the amount of text your form processing script can handle. In our example, the default text field for Netscape 4.0 can accept several thousand characters. The processing script with such long strings will go crazy causing interruption to others using this service. "Not Good". By setting the maximum entry length to an amount your scripts are programmed to handle, you reduce the number of problems you may encounter on the server side.

As better examples, here are text fields designed to accept a social security number (including two dashes), a five digit ZIP code, and a 64 character value, with only the first ten characters displayed:

  <INPUT TYPE="text" SIZE="11" MAXLENGTH="11">

  <INPUT TYPE="text" SIZE="5" MAXLENGTH="5">

  <INPUT TYPE="text" SIZE="10" MAXLENGTH="64">

See if these fields work:

Initial and hidden values

By default, text fields are created empty. You can supply an initial value by adding the VALUE attribute to the <INPUT> tag. The value is a string; this string will be displayed in the text field when the form is created and whenever the user presses a reset button within the form.

To pass the value of a text field to a form processing script, you must assign a name to the field using the NAME attribute. When the form is submitted, the text typed into the field will be passed to the server-side processing script using the given name. By adding both the NAME and VALUE attributes, you can provide a default value for the field that will be passed to the script even if the user does not enter anything into the field.

As an example, here is a field that defines a user name, providing a default value of "Simon":

   Username: <INPUT TYPE="text" SIZE="8" MAXLENGTH="8"

   NAME="userid" VALUE="Simon">

The resulting field looks like this:

Uploading the data

User names are useless without passwords, and passwords are useless if they cannot be hidden. HTML provides a way to create text entry fields whose contents are masked from view as the user types. Simply replace the TYPE="text" attribute with TYPE="password". All other text field attributes can be used, and the field behaves just like a regular text field except that characters are masked as they are typed.

Using this, we can now complete our user login form:

   Username: <INPUT TYPE="text" SIZE="8" MAXLENGTH="8"

   NAME="userid" VALUE="Simon">



   Password: <INPUT TYPE="password" SIZE="8" MAXLENGTH="8"

   NAME="password">

Try it out:

Single-line text entry fields are not difficult, practice this a few times and it should work with ease.

<< BACK