The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

HTML Textarea Wrap

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines

Textarea Wrap Behaviour ...

This tutorial includes 'try it for yourself' tests that are designed to help you understand the behaviour of the different 'wrap' attributes that can be used in the HTML Textarea Tag. These tests enable you to see how text is displayed on a form's Textarea input box and also enable you to see what is sent to the web server.

Page Organization ...

The more we study the subject of HTML Textarea Wrap the more we realize that it is a complex subject that has many different threads. Because of this we have organized the information on the page into sections which you can access using the following menu.

  1. HTML Textarea Wrap - Background Discussion
  2. HTML Textarea Wrap - Immediate Conclusions
  3. HTML Textarea Wrap - Server Side Checking
  4. HTML Textarea Wrap - User Wrap Testing
  5. HTML Textarea Wrap - Complete Forms Example
  6. HTML Textarea Wrap - MIME Type Problem
  7. HTML Textarea Wrap - Form To Email Gateways
  8. HTML Textarea Wrap - CSS Wrap Formatting
  9. HTML Textarea Wrap - W3C Validation & Accessibility
  10. HTML Textarea Wrap - Textarea Maxlength
  11. HTML Textarea Wrap - Link Directly To This Page
  12. HTML Textarea Wrap - Featured Links
 

Background Discussion ...

The HTML Textarea Wrap Attribute is widely used by web authors to format the layout of text in HTML Form Textarea inputs and is supported by all browsers that I have tested it in. However, HTML Textarea Wrap behaviour varies between different browsers and different browser versions. W3C, either intentionally or by mistake, have not specified any standards for Textarea Wrap behaviour, either in the current HTML Specifications or the current CSS Specifications. Yet there is a high demand from web authors to specify and vary the wrap behaviour of their Textarea input boxes. The whole area of Textarea Wrap could be described as minefield, reminiscent of the days of the 'browser wars' and leaving the poor old web developer to sift through the pieces.

In my opinion, this leaves web developers in the position of having to revisit some of the basic principles of web design. The web developers primary duty is to their user base (or to the largest group of their users that they can accommodate) which in reality means that any Textarea Wrap solution they use must work to their satisfaction in Microsoft browsers, v5 onwards, simply because at the time of writing, this represents by far the largest group of Internet users.

Immediate Conclusions ...

Server Side Checking ...

This feature requires JavaScript to be enabled ...

This tutorial has undergone a complete makeover and is now much larger because of this. The reason for the rewrite is that there are some problems appearing with the new Netscape Gecko browsers and one of the problems appears to be that these browsers are not handling the textarea wrap attribute in the same way as Internet Explorer and Navigator v4 browsers. To demonstrate the textarea attributes properly we have expanded this tutorial to include a 'Server Check' test for each attribute. This means that you will be able to see the data that is sent to the web server as well as seeing the data displayed in the textarea box on the HTML form.

MIME Type Tip:  If you are using a Form to Email gateway program (e.g.FormMail, etc.) and the contents of an HTML Textarea box is not behaving or formatting as expected then check that the MIME type specified in the Form to Email gateway program is specified as "text/plain" and not as "text/html". If the MIME Type is specified as "text/html" then it becomes your responsibility to apply HTML/CSS formatting Markup to the whole of the email including the contents of the HTML Textarea box (more information provided below).

User Wrap Testing ...

Start by typing in some lines of text that are longer than the input boxes below (or use the 'Auto Text' facility to save some typing). This will show you how the different 'wrap' attributes display the text in the textarea boxes on the browser that you are using. You can then use the 'Server Check' facility to see what data is actually being sent to the web server. To the very best of my knowledge this 'Server Check' facility is unique and it must make this page the definitive guide to the HTML forms 'textarea wrap' attribute, anywhere on the Web. As new browsers appear you can check their 'textarea wrap' behaviour for yourself.

Netscape v6/Mozilla:  If you are using a Netscape v6/Mozilla browser then the 'Server Check' demonstrations will only work if you use the 'GET' method. The demonstrations use a target attribute in the FORM tag (to open a new window) and for some reason the 'POST' method does not work in Netscape v6, if a target attribute is used.

wrap="off"

Conclusion: Do not use in cross-browser scripts.

Text in the box does not wrap and is sent to the server as one long string:
  • Internet Explorer v4/5: Text in box does not wrap, sent as one long string.
  • Netscape Navigator v4: Text in box does not wrap, sent as one long string.
  • Netscape v6/Mozilla: Text in box is wrapped, sent as one long string.
  • Opera Browser v5.12: Text in box is wrapped, sent as one long string.

Try entering some text or use 'Auto Text' ...

HTML Code ...

<textarea name="userInput" cols="36" rows="5" wrap="off"></textarea>
Notes ...

This is the default setting but we recommend that you use 'wrap=virtual' for most purposes.

 

wrap="virtual"

Conclusion: OK to use in cross-browser scripts.

Text in the box wraps but is sent to the server as one long string:-
  • Internet Explorer v4/5: Text in box wraps, sent as one long string.
  • Netscape Navigator v4: Text in box wraps, sent as one long string.
  • Netscape v6/Mozilla: Text in box wraps, sent as one long string.
  • Opera Browser v5.12: Text in box wraps, sent as one long string.

Try entering some text or use 'Auto Text' ...

HTML Code ...

<textarea name="userInput" cols="36" rows="5" wrap="virtual"></textarea>

Notes ...

wrap="virtual" is probably the best general purpose setting for most purposes. If you are in any doubt about which setting to use then we recommend that you start with this setting.

 

wrap="hard"

Conclusion:  OK to use in cross-browser scripts (apart from Opera 5.12).

Text in the box wraps and is sent to the server wrapped in exactly the same way:
  • Internet Explorer v4/5: Text in box wraps, sent to server wrapped.
  • Netscape Navigator v4: Text in box wraps, sent to server wrapped.
  • Netscape v6/Mozilla: Text in box wraps, sent to server wrapped.
  • Opera Browser v5.12: Text in box wraps, sent as one long string.

try entering some text or use 'Auto Text' ...

HTML Code ...

<textarea name="userInput" cols="36" rows="5" wrap="hard"></textarea>
 

wrap="physical"

Conclusion:  Do not use in cross-browser scripts.

Text in the box wraps but is sent to the server as one long string:
  • Internet Explorer v4/5: Text in box wraps, sent as one long string.
  • Netscape Navigator v4: Text in box wraps, sent as one long string.
  • Netscape v6/Mozilla: Text in box wraps, sent to server wrapped..
  • Opera Browser v5.12: Text in box wraps, sent as one long string.

try entering some text or use 'Auto Text' ...

HTML Code ...

<textarea name="userInput" cols="36" rows="5" wrap="physical"></textarea>
 

wrap="soft"

Conclusion:  Same as 'wrap=virtual', do not use. Use 'wrap=virtual' instead.

Text in the box wraps but is sent to the server as one long string:
  • Internet Explorer v4/5: Text in box wraps, sent as one long string.
  • Netscape Navigator v4: Text in box wraps, sent as one long string.
  • Netscape v6/Mozilla: Text in box wraps, sent as one long string.
  • Opera Browser v5.12: Text in box wraps, sent as one long string.

try entering some text or use 'Auto Text' ...

HTML Code ...

<textarea name="userInput" cols="36" rows="5" wrap="soft"></textarea>
 

no wrap attribute (should default to wrap="off")

Conclusion:  Do not use in cross-browser scripts.

Text in the box does not wrap and is sent to the server as one long string:
  • Internet Explorer v4/5: Text in box does not wrap, sent as one long string.
  • Netscape Navigator v4: Text in box does not wrap, sent as one long string.
  • Netscape v6/Mozilla: Text in box is wrapped, sent as one long string.
  • Opera Browser v5.12: Text in box is wrapped, sent as one long string.

try entering some text or use 'Auto Text' ...

HTML Code ...

<textarea name="userInput" cols="36" rows="5" wrap="off"></textarea>

Notes ...

This is the default setting but we recommend that you use 'wrap=virtual' for most purposes.

Carriage Returns:  If, when entering text into a textarea input box, you use a carriage return to start a new line, then that carriage return will be sent to the server 'as is' (wrapped). This applies to all textarea wrap attributes and to all browsers that we have tested.

 

Complete Forms Example ...

For those of you who are new to HTML or who wish to experiment further we have provided example Markup for an HTML form which incorporates a Textarea input box. If you copy/paste the example script into one of your own web pages it should work immediately and we have included the link to our 'textarea-wrap-test.cgi' script which you are welcome to use for testing purposes. You will have to be connected to the Internet to use this example Form.

You can also try changing the Wrap Attributes yourself to test the behaviour of the different attributes and you can also experiment with other changes or additions to the form. Although it is beyond the scope of this tutorial this complete example is a good way for you to start to understand the interaction between an HTML form and a server-side CGI script. Enjoy!

HTML Code ...

<form method="get" action="http://www.web-wise-wizard.com/cgi-bin/cgi-tests/textarea-wrap-test.cgi">
<textarea name="userInput" cols="36" rows="5" wrap="virtual">Default Text</textarea>
<input type="hidden" name="wrapAttribute" value="virtual">
<input type="submit" value="Server Check">
</form>
 
 

MIME Type Problem ...

Many web authors point their HTML Forms to CGI 'Forms to Email' gateway type programs located on their web server. One popular example is 'FormMail' from Matt's Script Archive but there are many other similar programs. The web author then finds that when they receive the email that all the fields are reasonably formatted except the contents of their HTML Textarea input boxes and that the Textarea formatting looks nothing like they originally intended. Typically, all the Textarea text will squashed into a single paragraph with none of the original line breaks or spacing in evidence.

The reason for this is that the CGI program has to specify a MIME Type when they are preparing the email or other document and many of these programs elect to use a MIME Type of "text/html" so that they can use HTML formatting to make the email or document more presentable. The problem with this approach is that the contents of an HTML Textarea input box require the use of a MIME Type "text/plain" otherwise the Textarea formatting will not display properly in the final output.

If we take a moment to revisit how HTML rendering works we will remember that HTML ignores all white space (including line breaks) and the only white space it will render are single blank spaces. This results in the contents of the HTML Textarea box not rendering as plain text, in the way it was originally displayed or sent to the CGI program by the HTML Form.

Form To Email Gateways ...

Following on from the 'MIME Type Problem' section we will now examine the solutions that are available to you if your CGI program is outputting the contents of your HTML Form, including your HTML Textarea inputs, using a MIME Type of "text/html". In essence, you have three options available to you and we list them here.

  1. Leave the situation as it is, accepting that the contents of your HTML Textarea input boxes are not going to display in the way you originally intended.
  2. Change the MIME Type used in your CGI program from "text/html" to "text/plain" and then remove all the HTML Tags from the document being created by the CGI program (e.g. the email). This will result in a less formatted appearance for your final document but in many cases it may be the preferred option for other reasons. One reason may be that the likely recipients of the email may be located on a corporate network that can only handle "text/plain" emails and a second reason may be a situation where the contents of the document are to be captured and stored in a database for later retrieval.
  3. Leave the MIME Type used in your CGI program as "text/html" and intervene in the operation of the CGI program to htmlify the contents of your HTML Textarea input box. In programming terms this is a fairly simple job and we have provided an explanation of the process together with and an example Perl script that will htmlify the HTML Textarea input.

HTML Textarea Conversion

we will use the following example to emulate text being displayed in an HTML Textarea box ...

This is the first paragraph and all paragraphs in an HTML Textarea box end with a Carriage Return/Line Feed combination.
 
This is the third paragraph, the second paragraph being the blank line above.
This is the fourth paragraph.

this is how the HTML Textarea sends the text to the web server ...

This is the first paragraph and all paragraphs in an HTML Textarea box end with a Carriage Return/Line Feed combination.{cr}{lf}{cr}{lf}This is the third paragraph, the second paragraph being the blank line above.{cr}{lf}This is the fourth paragraph.{cr}{lf}

to htmlify you would convert the cr/lf combinations to HTML Markup ...

This is the first paragraph and all paragraphs in an HTML Textarea box end with a Carriage Return/Line Feed combination.<br>&nbsp;<br>This is the third paragraph, the second paragraph being the blank line above.<br>This is the fourth paragraph.<br>

notes ...

  • A Carriage Return is ASCII character 13 (Hex 0D).
  • A Line Feed is ASCII character 10 (Hex 0A).
  • In the HTML conversion, blank lines require an extra '&nbsp;' statement inserting before the <br> Tag.
 

CSS Wrap Formatting ...

At the time of writing I know of no way that you can use CSS to properly emulate the behaviour of the HTML Textarea Wrap Attribute in cross browser scripts. I have read reports that W3C may be providing support for Textarea Wrap in the upcoming CSS3 Specification but any CSS3 additions to CSS are not likely to come into general use for some considerable time.

Because of this lack of official support for Textarea Wrap in CSS many of the web developer forums have large numbers of posts about the subject. Unfortunately, many of these posts generate more heat than light but we have developed two CSS examples from some of the suggestions we found. We have included these examples so that those of you who are interested in a CSS solution can try them yourselves and if anyone can improve on our example then please Contact Us and we will gladly publish it.

We have created the following HTML Textarea inputs, one using CSS to emulate Wrap Attribute 'VIRTUAL' and the other using CSS to emulate Wrap Attribute 'OFF'. In each case we have replaced the Textarea Attributes Cols, Rows and Wrap with CSS Styles.

Emulating wrap="virtual"

This works fine in the version of Internet Explorer that we tested (v 6.0) and it also works in the version of Firefox that we tested (v 1.0.3) although this may be because this wrap style is the default setting in Firefox anyway. We also tested it in Mozilla (v 1.7.7) and Netscape (v 7.0) browsers and the behaviour was the same as Firefox which was to be expected. In addition, we tested it in Opera (v 8.0) and it worked fine.

Conclusion:  Should be OK for cross-browser scripts in modern browsers (v5 on).

Check what is sent to the server ...

Method: Get Post  >>>  

HTML Code ...

<textarea name="userInput" style="width:310px;height:80px;white-space:pre;overflow:auto;"></textarea>

Emulating wrap="off"

This works fine in the version of Internet Explorer that we tested (v 6.0) but it is just plain broken in the version of Firefox that we tested (v 1.0.3). It is also broken in Mozilla (v 1.7.7) and Netscape (v 7.0) browsers. Perhaps we should not find this surprising because when we specify rows="5", Firefox displays six rows. It does however work OK in Opera (v 8.0).

Conclusion:  Do not use in cross-browser scripts.

Check what is sent to the server ...

Method: Get Post  >>>  

HTML Code ...

<textarea name="userInput" style="width:310px;height:80px;white-space:nowrap;overflow:auto;"></textarea>
 

W3C Validation & Accessibility ...

The Textarea Wrap Attribute is widely used by web authors to format the layout of text in HTML Forms Textarea inputs and it is supported by all browsers that we have tested although this support varies depending on the browser or browser version that the user is using. However, the Wrap Attribute is not supported by W3C and web pages that use the Wrap Attribute will not validate to 'HTML 4.01 Transitional' or to 'HTML 4.01 Strict' standards. Nor will they meet WCAG Accessibility guidelines.

Also, there is no support for properly formatting the 'wrap' in Textarea Inputs in the CSS1 or CSS2 specifications although W3C are supposed to be including support for Textarea wrap formatting in the upcoming CSS3 specification. Until that day arrives you 'Wrap' or you 'Validate' or you use CSS (or you cheat). The choice is yours.

Textarea Maxlength ...

There appears to be a real deficiency in HTML Textarea design in that HTML does not provide a way to limit the length of FORM Textarea inputs in the way it provides a way to limit the length of FORM Text inputs using the Maxlength Attribute. This means that in theory, a malicious user could use a Textarea input to upload very large text files until they reached the stage where they brought a web server to a halt by overloading the web server hard-drive space. It is my understanding that different browsers impose arbitrary maximum limits but these are very large limits and these limits vary depending on the browser.

There are various solutions on the browser side that limit the length of Textarea input but the disadvantage with these methods is that they all rely on scripting to limit the length of Textarea input. This means that this type of solution will be defeated if a user disables scripting in their browser and because of this the first line of defence should be built in to or added to the CGI program on the web server.

Server Side Solution

You can usually achieve this by adding a few simple lines of program code to the beginning of the target CGI program that limits the length of Textarea inputs. This code will vary according to the programming language that the CGI program is written in and we have provided example code that would achieve this in a Perl program that uses the CGI Module.

my $form = new CGI;
my $MaxInputLen = 5000;
my $message = substr($form->param('textareaMessage'),0,$MaxInputLen);

JavaScript Maxlength

 

Link Directly To This Page ...

help support free information on the Internet ...

Many users consider it useful to link directly to individual content pages on Web-Wise-Wizard. If you would like to link directly to this page yourself then we have provided the following HTML/CSS link script which you can paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - HTML Textarea Wrap This page has 'try it for yourself' tests that show the WRAP attributes that can be used in HTML Textarea tags. They show the text displayed on the form and the text that is sent to the web server.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
HTML Textarea Featured Links
 
 
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England