Text Field

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

You have seen many websites which provide the facility of creating accounts, and so that we need to register with a username and a password.

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.

Example:

  • <input type=”text” />
  • <input type=”password” />

Text Fields and Passwords:

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.

Example:

  • <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.

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.

Example:

  • <input type=”text” size=”5″ maxlength=”5″ />
  • <input type=”text” size=”15″ maxlength=”15″ />
  • <input type=”text” size=”25″ maxlength=”25″ />

Maxlength Attribute:

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.

Example:

  • <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!” />

Text Field Values:

Write a comment

Twitter Users
Enter your personal information in the form or sign in with your Twitter account by clicking the button below.