HTML Text Fields (HTML Forms tutorials part 2)

Text fields are small rectangles that allow a user to simply input some text and submit that information to the web server.

This information is usually then processed through a server side scripting language such as PHP, PERL, or ASP.

HTML - Text Field Size

We can control the size of the text area by specifying the size attribute. The example below provides 3 different sizes for your text fields. The default size is around 20 characters long.

HTML Code:

<input type="text" size="5" />
<input type="text" size="15" />
<input type="text" size="25" />

Text Fields:

Changing the size attribute changes the size of the display of the text field on our site.

HTML - Text Field Maxlength

Without specifying a maxlength attribute, the viewer is able to type as many characters as they wish into the text field (even if you specify a size). To limit the number of characters a user can type into your fields, always specify a maxlength, generally this should match the size of your field.

HTML Code:

<input type="text" size="5" maxlength="5" />
<input type="text" size="15" maxlength="15" />
<input type="text" size="25" maxlength="25" />

Maxlength Attribute:

HTML - Text Field Value

Using the value attribute, we could pre-populate our text fields with some information. Later on as you develop your skills with a scripting language such as PHP, this will become more useful as you will be able to pre-populate text fields for returning users through the use of session variables.

HTML Code:

<input type="text" size="5" maxlength="5" value="55555" />
<input type="text" size="15" maxlength="15" value="Corndog" />
<input type="text" size="25" maxlength="25" value="Tizag Tutorials!" />