logo
g Text Version
Auto
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Society & Culture
Sports
Travel & Leisure
TV & Movies

dailyclick
Bored? Games!
Postcards
Astrology
Take a Quiz
Rate My Photo

new
Journals
Folklore and Mythology
Business Coach
Marriage
Senior Living
Ethnic Beauty
Adolescence


dailyclick
All times in EST

Full Schedule
g
g HTML Site
Elizabeth Connick
BellaOnline's HTML Editor

g

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:


Parts of a Website Form
RSS
Related Articles
Previous Features
Site Map

Add Text+Input+Options+for+HTML+Forms to Twitter Add Text+Input+Options+for+HTML+Forms to Facebook Add Text+Input+Options+for+HTML+Forms to MySpace Add Text+Input+Options+for+HTML+Forms to Del.icio.us Digg Text+Input+Options+for+HTML+Forms Add Text+Input+Options+for+HTML+Forms to Yahoo My Web Add Text+Input+Options+for+HTML+Forms to Google Bookmarks Add Text+Input+Options+for+HTML+Forms to Stumbleupon Add Text+Input+Options+for+HTML+Forms to Reddit


Content copyright © 2009 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 Elizabeth Connick for details.

g


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor

g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter

jobs
what
job title, keywords
where
city, state or zip
jobs by job search


vote
Growing a Garden
Veggies and Flowers
Veggies Only
Flowers Only
No Garden

g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2009 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor