Text entry in HTML forms is not a
difficult problem to solve.
Multi-line text fields are created using the <TEXTAREA>
tag. This tag creates a rectangular text entry area within a form,
complete with scrollbars if needed. The <TEXTAREA>
tag is a conventional HTML tag, with a required end tag. The
simplest text area is created with
Its appearance varies among browsers. On your browser,
the default text area looks like this:
With most browsers, the resulting text area is so
small and inconvenient to use. Netscape, for example, creates an
area 20 characters wide and one line high, with scrollbars that take
up more space than the text itself.
For this reason, you will always want to use the ROWS
and COLS
attributes to explicitly set the size of the text area. Here is a
more reasonable text area, displaying four lines of 40 characters
each:
<TEXTAREA ROWS="4" COLS="40">
</TEXTAREA>
This creates a
text area that is much easier to see and use:
While you can control the size of the text area you
create, you cannot control the total amount of text entered into the
area by the user. Unlike the MAXLENGTH
attribute for the <INPUT
TYPE="text"> tag, there is no attribute
for the <TEXTAREA>
tag that limits the size of user input. Your server-side processing
scripts should be prepared to handle extremely large amounts of
text, even if only to reject the text and issue a warning message to
the user.
Initial
values
There is a reason why the <TEXTAREA>
tag requires an ending tag. You can place plain text within the <TEXTAREA>
tag; this text becomes the initial value of the text area. It is
often used as a way to provide instructions to the user, or as a
template for further input. You cannot insert any sort of HTML tags
or formatting markup; only plain ASCII text is accepted.
Here is a typical <TEXTAREA>
tag, complete with initial text:
<TEXTAREA ROWS="4" COLS="40">
Enter your comments below. Please include email for more information if necessary. </TEXTAREA>
Notice how this
text is placed into the text area:
Most browsers honor line breaks in the text, but
extra spaces and line spacing may be ignored (Netscape)
or (Internet Explorer). For this
reason, keep the format of text in the text area simple.
Like all other form elements, the value of your text
area will only be passed to the server for processing if you include
a NAME
attribute with the <TEXTAREA>
tag.
Controlling
word wrap
As users enter text into a text area created by
Netscape, all of their text will appear on a single line unless they
enter a carriage return in the course of their typing. This can be
annoying to users, many of whom expect text to automatically wrap
and flow as if they were typing into a conventional word processor.
Internet Explorer is not so burdened; lines are wrapped at word
boundaries as the user types.
To help with this, Netscape honors the WRAP
attribute for the <TEXTAREA>
tag. By default, the value of this tag is off,
meaning that text will not be wrapped and new lines will only be
inserted if the user enters a carriage return. You can also use WRAP="off"
to disable word wrap with Internet Explorer.
By setting WRAP="virtual",
lines will wrap at word boundaries, but actual carriage returns will
not be inserted into the typed text. With WRAP="virtual",
the server-side processing program will still receive the text as a
single line, with the only line breaks occurring where the user
explicitly typed them.
Using WRAP="physical"
causes lines to wrap at word boundaries, with actual carriage
returns inserted at those points. Server-side scripts will see
separate lines of text where the browser wrapped the text and where
the user entered a carriage return.
To see what a convenience word wrapping is to your
users, try typing into these two text areas. They are identical,
except the second one has WRAP="virtual"
set:
Index: Website Creation
Resource Guide To - Website Development & Design
Index 2:
Creating Forms - Everything About Forms