Text Input Options for HTML Forms
In the article "Parts of a Website Form" we briefly discussed the input options that are available for form designers. Now it's time to take a closer look at some of those options. Specifically, here are three fields that allow you to capture and store text information entered by your visitors.
Text Field
The text field is one of the most frequently used form fields. It's used to capture short text answers such as the visitor's name. You can use "size=" to change the size of the text field; "maxlength=" to limit the number of characters the visitor can enter, such as with a phone number or zip code field; and you can also set an initial value with "value=".
A text field that's coded like this:
<input type="text" size="20" maxlength="15" value="Text Here!">
... would look like this on your site:
Text Area
Text areas are used less frequently than text fields; they are used to capture larger blocks of input, so you might add one to your form as a Comments field, for example. As with the text field, you can specify the field's size; "rows=" sets the text area's width, while "cols=" sets its height. Text areas also have a word wrap option. If you set it to "wrap=off" then entered text is treated as one long line; "wrap=virtual" means that the text appears to wrap within the form but the data itself is sent to the server without linebreaks, while "wrap=physical" causes the form to add actual linebreaks to the field and send it to the server with the breaks included.
A text area coded like this:
<textarea rows="20" cols="8" wrap="virtual">You can experiment by entering some text into this box.</textarea>
... would look like this:
-TEXTAREA- rows="6" cols="40" wrap="virtual">You can experiment by entering some text into this box.-TEXTAREA->
Password Field
The password field is similar to the text field, but anything the visitor enters into the field is obscured – all your visitor sees is a string of dots. This can be extremely reassuring to a visitor, since anyone who happens to walk behind them as they enter their information will not be able to pick up the user's password at a glance. Do keep in mind that data entered into a password field is not actually encrypted – if you want to add security to your user's information you'll have to do some other way, usually by setting up a secure site.
The password field's attributes are identical to a text field's.
A password field coded like this:
<input type="password" size="20" maxlength="15">
... would look like this:
Text Field
The text field is one of the most frequently used form fields. It's used to capture short text answers such as the visitor's name. You can use "size=" to change the size of the text field; "maxlength=" to limit the number of characters the visitor can enter, such as with a phone number or zip code field; and you can also set an initial value with "value=".
A text field that's coded like this:
<input type="text" size="20" maxlength="15" value="Text Here!">
... would look like this on your site:
Text Area
Text areas are used less frequently than text fields; they are used to capture larger blocks of input, so you might add one to your form as a Comments field, for example. As with the text field, you can specify the field's size; "rows=" sets the text area's width, while "cols=" sets its height. Text areas also have a word wrap option. If you set it to "wrap=off" then entered text is treated as one long line; "wrap=virtual" means that the text appears to wrap within the form but the data itself is sent to the server without linebreaks, while "wrap=physical" causes the form to add actual linebreaks to the field and send it to the server with the breaks included.
A text area coded like this:
<textarea rows="20" cols="8" wrap="virtual">You can experiment by entering some text into this box.</textarea>
... would look like this:
-TEXTAREA- rows="6" cols="40" wrap="virtual">You can experiment by entering some text into this box.-TEXTAREA->
Password Field
The password field is similar to the text field, but anything the visitor enters into the field is obscured – all your visitor sees is a string of dots. This can be extremely reassuring to a visitor, since anyone who happens to walk behind them as they enter their information will not be able to pick up the user's password at a glance. Do keep in mind that data entered into a password field is not actually encrypted – if you want to add security to your user's information you'll have to do some other way, usually by setting up a secure site.
The password field's attributes are identical to a text field's.
A password field coded like this:
<input type="password" size="20" maxlength="15">
... would look like this:
This site needs an editor - click to learn more!
You Should Also Read:
Parts of a Website Form
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact
BellaOnline Administration
for details.