Form Tutor - Lesson 10

A very useful type of input is <textarea>.

 
<form>
<textarea name="comments">
</textarea>
</form>


You control the size of the box like so...

 
<form>
<textarea name="comments" rows="6" cols="50">
</textarea>
</form>

rows is the height, cols is the width.


 
<form>
<textarea name="comments" rows="16" cols="67">
 
                            \\|// 
                            (@ @)   
 +--------------------oOO----(_)----OOo-----------------------+
 |                                                            |
 |  This is to illustrate that if you type something between  |
 |  the TEXTAREA tags, it will show up in the window as the   |
 |  default text. The cool part is... it shows up EXACTLY     |
 |  the way you type it! (sort of like between PRE tags)      |
 |                                                            |
 |  * Most, but not all, browsers behave this way.            |
 +------------------------------------------------------------+
                           |__|__|  
                            || ||
                           ooO Ooo
</textarea>
</form>


Have a look at this...

 
<form>
<textarea name="comments" rows="3" cols="30">
Now is the time for all good men to come to the aid of their country.
</textarea>
</form>

You'll notice the text in the box wraps to fit the box. This is the default behavior for most browsers and the text is usually sent unwrapped. If the user types in line breaks those will usually be sent as well.


You can change this with the wrap attribute...

 
<form>
<textarea name="comments" rows="3" cols="30" wrap="off">
Now is the time for all good men to come to the aid of their country.
</textarea>
</form>

The user can of course type in his line breaks (hitting Enter while typing) and the data will usually be sent just as he entered it.

size=2 width="100%" align=center>

 


While wrap is not an official part of any HTML specification, it is a commonly implemented feature of most modern web browsers when dealing with a textarea. Useful wrap attributes are as follows...

default (no wrap attribute)

Text in the box is wrapped to the confines of the box, but the data is sent exactly as typed. Line breaks sent only if the user typed them in. For most purposes I highly recommend you omit the wrap attribute and allow this default.
 

wrap="off"

Text in the box is NOT wrapped to the confines of the box, and the data is sent exactly as typed. Line breaks sent only if the user typed them in.
 

wrap="hard"

Text in the box is wrapped to the confines of the box, and the data is sent exactly as it appears in the box, sending line breaks wherever they show in the box.

<< BACK NEXT >>