Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

Articles & Tutorials

Forms - Text Input Fields

by Bravenet.com

Summary : The Text Input field allows visitors to type text directly into your Form.

The Text Input field allows visitors to type text directly into your Form. You can add a Text Input field to your form using a <input> tag. These are used in any situation you want to ask visitors to add text to the form, be it a name, a street address, an email address or whatever. The <input> tag requires a few attributes to work properly:
  1. TYPE - specifies the field is for entering text

  2. NAME - assigns a unique name to the field for processing purposes

  3. VALUE - defines what, if anything, will be pre-displayed in the field

  4. SIZE - defines how wide the field will be displayed on the page

  5. MAXLENGTH - defines how many characters can be typed into the field

Let's write an input tag, step by step, to show how an input field is correctly coded.

The type="text" value tells the input tag to treat the information added into the field as text. It is written like this:

<input type="text"

The name should always be something unique that identifies what the field is for. If you were gathering street addresses in this field, for example, you could give this field a name like "address" or "street_address". Add the name like this:

<input type="text" name="unique"

The value field allows you to pre-fill the displayed input field with some text. This is commonly used in fields asking for web url's. Webmasters will often pre-fill the 'http://' portion of the url since all url's have that. If you do not wish to pre-fill the field leave the value field blank:

<input type="text" name="unique_name" value=""

The size attribute tells the form how many spaces wide the input field should be displayed as. Customize this size value to whatever width you want the field to be.

<input type="text" name="unique_name" value="" size="15"

The maxlength attribute tells the field to limit the number of characters the visitor can add to the field. If you set the limit to 20 characters, as shown above, then only 20 characters can be typed in.

<input type="text" name="unique_name" value="" size="15" maxlength="20">

Now let's look at how the complete tag will appear on a webpage. Here is our complete code:

<input type="text" name="unique_name" value="" size="15" maxlength="20">

And here is how it will look on a webpage:

Enter some sample text here:

Note: The text in the text box is not affected by font tags or other HTML formatting codes, it is always displayed in the default browser font as shown above. (You can use CSS coding to alter the look and color of text in this field)