Forms — Text Boxes

Topics on This Page

The <input> Tag for Text Boxes
The type Attribute
The name Attribute
The size Attribute
The maxlength Attribute
The value Attribute
Text Boxes and <font>
Text Boxes and CSS
Example

The <input> Tag for Text Boxes

HTML:  <input>         (Empty tag)
XHTML: <input />

   Note: The W3C and WDG validators will not accept the XHTML-format
         in HTML, although browsers will accept this format.

Always include these attributes:

  type="text|password"
  name="name"

Optional attributes:

  size="characters"
  maxlength="characters"
  value="initial-value"

The type Attribute

A text box is created with an <input> tag that includes type="text" or type="password". Both types create an input field into which the user can enter information, and both types send the data that the user entered when the form is submitted. When the user types into a type="password" field, a series of * characters are displayed rather than the actual characters that are entered — this prevents someone watching the user's screen from seeing what characters were entered.

Examples of each type:

The name Attribute

The name attribute provides a name that becomes associated with the data that the user enters. When the form is submitted, a "name-value" pair is sent for each text box. The name portion is the name that you specify in name, and the value is whatever the user enters. It's best to select simple and fairly short names that consist only of alphabetic characters and digits, with an alphabetic character as the first character.

The size Attribute

The size attribute specifies how large the text box should be. This is the count of the number of characters that should fit into the box without scrolling. size does NOT limit the user to entering the specified number of characters, because the text can scroll horizontally within the text box.

The default font used within a text box is a variable-width font, so the text box can actually display more or fewer characters than you request. The following text box specifies size="8". See how many "i" characters you can enter in the box, and see how many "M" or "W" characters you can enter.

Netscape makes a size="8" text box large enough to view 8 M or W characters. Since your user's input usually does not consist of just M's and W's, the box will usually show more than 8 characters.

IE uses a slightly larger default font within the text box, but it sizes the box so that it holds fewer characters. A size="8" box can only display 5 M's or 4 W's. In general, IE's box will be a bit smaller on the screen than Netscape's box. This can make quite a difference in layout when creating a size="50" or so text box.

The maxlength Attribute

The maxlength attribute specifies the maximum number of characters that the user can enter in a text box. If you specify maxlength="8", the user can only enter 8 characters into the box. maxlength does not affect the size of the text box, only the number of characters that the user is allowed to type.

If you're writing a server-side application that receives user input from forms, your server-side code cannot automatically assume that it will only receive values no longer than your maxlength. A savvy user can easily get around maxlength, so specifing maxlength="8" does not guarantee that you won't receive a 200-character value.

Use maxlength for fixed-length fields such as a social security number. It is for the benefit of your user, and helps make sure that he doesn't enter an incorrect number. Be very careful using maxlength for fields such as names or addresses — people with long names or addresses will not be happy with forms that don't let them fill in the full value.

The value Attribute

You can use the value attribute to specify a default value to be displayed in the text box. Usually, you should avoid doing this — - it's a little extra effort for a user to have to clear out your default value before entering another one.

Note: If you specify a value that's longer than your maxlength value, Netscape 6 will truncate it to the maxlength value. IE and Netscape 4 will not.

Here's an example of a text box that specifies value="abcde":

Text Boxes and <font>

You may find that you want to use a different font face, size or color for the text in a text box. The <font> tag isn't much help. Netscape 4 will honor a font face and size specified in a <font> tag. IE and Netscape 6 will not honor any <font> characteristics.

The following example uses this code:

<form>
  <font color="red" size="4" face="comic sans ms">
  <input type="text" name="f3a" size="8" />
  </font>
</form>

Netscape 4 supports the size and face attributes of <font>, but not color, as shown in this screen shot:

Other browsers just ignore the <font> tag.

Text Boxes and CSS

IE and Netscape 6 support CSS attributes for text boxes. In the <head> section of this page, I've included the following:

<style type="text/css"> <!--
  .a { background: #ffffcc;
       color: #ff0000;
       font-size: 16pt;
       font-family: "comic sans ms", arial, helvetica, sans-serif; }
--> </style>

Here's an example of a text box that uses this class:

<form>
  <input type="text" name="f3a" size="8" class="a" />
</form>

	Netscape 4 supports font-size and font-family, but not color and background.
	IE and Netscape 6 suupport all of the properties. This is Netscape 6.

Example

Here's an example of a text box. Try changing the attributes of the box, and experiment with additional CSS properties such as font-weight: bold;.

The action="" satisfies the validator's requirement that an action attribute be included in the <form> tag. We'll discuss the <form> tag later.

Try taking the <form> and </form> tags out altogether. Your browser may display the page the same. Netscape 4, however, will not display <input> tags that are not included inside a <form> tag.