eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

introduction to web programming
The Text Area Widget  
There are many circumstances in which you want to allow the user to enter more than simply one line of text. In such a situation, the widget you want to use is the Text Area. Below is an example Text Area widget.

The previous Text Area widget was created with the following code:

    <FORM>
    <TEXTAREA NAME = "demo">
    </TEXTAREA>
    </FORM>
    

Notice how you can type in multiple lines to the text area widget and scroll up and down using the scroll bar on the right and left and right with the scrollbar on the bottom.

Notice also, that as usual, the input widget includes a NAME attribute that will be used for creating the HTTP body. In the case of the text area widget, the text that the user types into the widget will be set as the VALUE for this NAME.

The Text Area widget also has several other attributes that affect how it works. The following table outlines them:

Attribute Description
NAME Specifies the variable name associated with this widget
ROWS Specifies the height of the text area widget
COLS Specifies the width of the text area widget
WRAP Specifies the logic of word wrapping. It can be NONE, SOFT or HARD as explained below

The ROWS and COLS Attributes  
Of course, the above text area is not very easy to use since it is so small. The Text Area widget also has two attributes that affect the size of the widget. These are the ROWS and COLS attributes and are best shown by example. Consider the following text area widget.

The previous Text Area widget was created with the following code:

    <FORM>
    <TEXTAREA NAME = "demo" ROWS = "6" COLS = "30">
    </TEXTAREA>
    </FORM>
    
The WRAP Attribute  
The Text Area widget also allows you to specify how word wrapping will function. You can specify NONE, SOFT, or HARD word wrapping. SOFT word wrapping means that the widget will wrap text in the browser windows but will not report the wrapping information to the server. HARD word wrapping, on the other hand, will be reported as multiple lines. NONE means that the text area widget will not wrap text at all.

You have already seen text areas without word wrapping above since the text area defaults to NONE. But you have not seen a text area with word wrapping. We will show you one of those below (notice that if you type a line that is too long to fit in the text area, it will wrap to the next line automatically:

The previous Text Area widget was created with the following code:

    <FORM>
    <TEXTAREA NAME = "demo" ROWS = "6" COLS = "30"
                       WRAP = "HARD">
    </TEXTAREA>
    </FORM>
    
Default Text  
Finally, you should know that you can add default text to the text area simply by placing it between the opening and closing TEXTAREA tags as follows:

The previous Text Area widget was created with the following code:

    <FORM>
    <TEXTAREA NAME = "demo" ROWS = "6" COLS = "30"
                       WRAP = "HARD">
    Here is some defalt text
    </TEXTAREA>
    </FORM>
    

Previous | Next | Table of Contents