Tutorials - HTML - Forms - Textarea

Textareas in HTML are similar to text fields, but with multiple lines. Instead of being a type of input element, textareas have their own element: <textarea> </textarea>. Pre-populated content which could be in the value="" attribute of a text field is places between the textarea tags:

<textarea>This is a textarea</textarea>

Textarea Attributes

There are a number of attributes you can use to change the behavior of textareas:


<h3>Cols and Rows</h3>
<!-- Cols and Rows define the size of the textarea -->
<textarea cols="20" rows="20">This is a textarea</textarea> <br />
<textarea cols="40" rows="5">This is a textarea</textarea> <br />
<br />


<h3>Wrapping</h3>
<!-- Text areas can be wrapped in three ways: "hard" preserves the lines breaks when the data is passed to the scripting language, "soft" wraps the text in the box but does not preserve the line breaks when passing the data to the scripting language (default) and "off" provides no wrapping -->
<textarea cols="90" rows="20" wrap="hard">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui justo, imperdiet non vestibulum id, aliquet sit amet orci. Ut tempus mauris in elit suscipit non laoreet neque ullamcorper. Mauris augue ante, pharetra nec hendrerit sed, tempor vel orci. Sed laoreet, felis egestas posuere molestie, ipsum orci imperdiet est, in convallis lacus dui in eros. Sed eget tortor arcu, at eleifend ipsum. Maecenas condimentum, lorem ac semper malesuada, urna nunc interdum tortor, sit amet blandit nunc magna quis arcu. Curabitur leo sapien, dictum nec convallis non, blandit vitae diam. Aenean facilisis scelerisque ultricies. Etiam laoreet, nisi a posuere facilisis, risus ipsum placerat elit, vel viverra nulla leo iaculis metus. Quisque nec arcu orci, ut ullamcorper diam. Donec sodales diam a massa bibendum non sollicitudin est dictum. </textarea> <br />
<textarea cols="90" rows="20" wrap="off">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui justo, imperdiet non vestibulum id, aliquet sit amet orci. Ut tempus mauris in elit suscipit non laoreet neque ullamcorper. Mauris augue ante, pharetra nec hendrerit sed, tempor vel orci. Sed laoreet, felis egestas posuere molestie, ipsum orci imperdiet est, in convallis lacus dui in eros. Sed eget tortor arcu, at eleifend ipsum. Maecenas condimentum, lorem ac semper malesuada, urna nunc interdum tortor, sit amet blandit nunc magna quis arcu. Curabitur leo sapien, dictum nec convallis non, blandit vitae diam. Aenean facilisis scelerisque ultricies. Etiam laoreet, nisi a posuere facilisis, risus ipsum placerat elit, vel viverra nulla leo iaculis metus. Quisque nec arcu orci, ut ullamcorper diam. Donec sodales diam a massa bibendum non sollicitudin est dictum. </textarea> <br />
<br />


<h3>Read-Only and Disabled</h3>
<!-- Read-Only textareas cannot be altered by the user, but can have text highlighted and copied, disabled textareas cannot have their content highlighted or copied -->
<textarea cols="90" rows="20" wrap="hard" readonly="yes">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui justo, imperdiet non vestibulum id, aliquet sit amet orci. Ut tempus mauris in elit suscipit non laoreet neque ullamcorper. Mauris augue ante, pharetra nec hendrerit sed, tempor vel orci. Sed laoreet, felis egestas posuere molestie, ipsum orci imperdiet est, in convallis lacus dui in eros. Sed eget tortor arcu, at eleifend ipsum. Maecenas condimentum, lorem ac semper malesuada, urna nunc interdum tortor, sit amet blandit nunc magna quis arcu. Curabitur leo sapien, dictum nec convallis non, blandit vitae diam. Aenean facilisis scelerisque ultricies. Etiam laoreet, nisi a posuere facilisis, risus ipsum placerat elit, vel viverra nulla leo iaculis metus. Quisque nec arcu orci, ut ullamcorper diam. Donec sodales diam a massa bibendum non sollicitudin est dictum. </textarea> <br />
<textarea cols="90" rows="20" wrap="hard" disabled="yes">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui justo, imperdiet non vestibulum id, aliquet sit amet orci. Ut tempus mauris in elit suscipit non laoreet neque ullamcorper. Mauris augue ante, pharetra nec hendrerit sed, tempor vel orci. Sed laoreet, felis egestas posuere molestie, ipsum orci imperdiet est, in convallis lacus dui in eros. Sed eget tortor arcu, at eleifend ipsum. Maecenas condimentum, lorem ac semper malesuada, urna nunc interdum tortor, sit amet blandit nunc magna quis arcu. Curabitur leo sapien, dictum nec convallis non, blandit vitae diam. Aenean facilisis scelerisque ultricies. Etiam laoreet, nisi a posuere facilisis, risus ipsum placerat elit, vel viverra nulla leo iaculis metus. Quisque nec arcu orci, ut ullamcorper diam. Donec sodales diam a massa bibendum non sollicitudin est dictum. </textarea> <br />

Cols and Rows

Wrapping

Read-Only and Disabled

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui justo, imperdiet non vestibulum id, aliquet sit amet orci. Ut tempus mauris in elit suscipit non laoreet neque ullamcorper. Mauris augue ante, pharetra nec hendrerit sed, tempor vel orci. Sed laoreet, felis egestas posuere molestie, ipsum orci imperdiet est, in convallis lacus dui in eros. Sed eget tortor arcu, at eleifend ipsum. Maecenas condimentum, lorem ac semper malesuada, urna nunc interdum tortor, sit amet blandit nunc magna quis arcu. Curabitur leo sapien, dictum nec convallis non, blandit vitae diam. Aenean facilisis scelerisque ultricies. Etiam laoreet, nisi a posuere facilisis, risus ipsum placerat elit, vel viverra nulla leo iaculis metus. Quisque nec arcu orci, ut ullamcorper diam. Donec sodales diam a massa bibendum non sollicitudin est dictum.

Page Responses

Currently there have been no responses to this page...

Post Response

If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.