How To Create Textarea In HTML Form

This post discusses about how to create textarea in HTML form. <textarea> tag can be written inside the <form> tag and it is used for to get large text like address, resume, etc.

HTML textarea Example

Read How To Create Button In HTML
Read How To Create Radio Button In HTML
Read How To Create Checkbox In HTML
Read How To Create Table In HTML
Read How To Create Text and Password Fields In HTML

Syntax of textarea:

<form>
 <textarea></textarea>
</form>

<textarea> tag has following most common used attributes:

• cols
• dir
• disabled
• name
• readonly
• rows
• tabindex

cols attribute:

This attribute is used to give number of columns to textarea. This attribute takes numeric value. cols is one of the important attribute of textarea tag.

For example:

<form>
 <textarea cols="50">
  This is textarea
 </textarea>
</form>

dir attribute:

dir attribute contains two values:

• ltr (left to right)
• rtl (right to left)

If you use "ltr" value then text is displayed as left alignment and if you use "rtl" value then text is displayed as right alignment.

For example:

<form>
 <textarea dir="rtl">
  This is textarea
 </textarea>
</form>

disabled attribute:

If textarea has disabled attribute then you can not interact with textarea.

For example:

<form>
 <textarea disabled="disabled">
  This is textarea
 </textarea>
</form>

name attribute:

This attribute is common attribute for all HTML elements. This attribute specifies name of textarea.

For example:

<form>
 <textarea name="txtarea">
  This is textarea
 </textarea>
</form>

readonly attribute:

This attribute makes textarea as readonly that means you can not type anything inside textarea but you can select text and copy it.

For example:

<form>
 <textarea readonly="readonly">
  This is textarea
 </textarea>
</form>

rows attribute:

This attribute is important attribute of textarea. This attribute makes number of rows to textarea.

For example:

<form>
 <textarea rows="3">
  This is textarea
 </textarea>
</form>

tabindex attribute:

This attribute specifies tab order of an element when you use tab key for navigation.

For example:

<form>
 <textarea tabindex="1">
  This is textarea
 </textarea>
</form>

HTML Textarea Example:

<form>
 Address:<br />
 <textarea cols="40" dir="ltr" rows="3" tabindex="1">
  Type Your Address
 </textarea>
</form>

OUTPUT:

Address:
Type Your Address