Welcome to HTML5-Tutorials

Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.

In this page,we will learn about HTML <textarea> tag.

Overview Content

1 Use of <textarea> tag
2 Example of <textarea> tag
3 Supported Browsers
4 Full Code Example
5 Attributes of <textarea> tag
     5.1 autofocus
     5.2 cols
     5.3 disabled
     5.4 form
     5.5 maxlength
     5.6 minlength
     5.7 name
     5.8 placeholder
     5.9 readonly
     5.10 required
     5.11 rows
     5.12 spellcheck
     5.13 wrap

Use of <textarea> tag

According to W3C,the <textarea> tag defines a multi-line text input control.
By default, the texts within the <textarea> element is rendered in monospace(usually Courier) or fixed-width font.
It is possible to bear unlimited number of characters within the <textarea> element.

Display:Block

Example of <textarea> tag

    <textarea>
       Our website is all about HTML Learning.You can easily become a pro in HTML by accessing with this website only.
    </textarea>

Supported Browsers.

Tag
<textarea> Yes Yes Yes Yes Yes

Full Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea rows="6" cols="50">
Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.
</textarea>
</body>
</html>

Output

Attributes of <textarea> tag

Tag Value Notes
autofocus autofocus It specifies that a form control should automatically get focused when the page loads until the user overrides it.
cols cols It specifies the visible width of the text control.
disabled disabled If it specified, the disabled attribute is disabled.
form form_id It specifies one or more forms the text area belongs to.
maxlength number It defines the maximum number of characters that can be written by the user within the <textarea> element.
minlength number It defines the minimum number of characters that can be written by the user within the <textarea&g; element.
name text It defines the name of the >textarea< element.
placeholder text It gives a short hint to the user what can enter in the <textarea> element
readonly readonly It disallows the users to change the texts or any characters contained in the <textareagt; element.
required required It specifies that the text-area should be fill-up in order to submit the relative form.
rows rows It specifies the visible height of the text control in line.
spellcheck true
false
It is used to find error like mistake in grammar or spelling.
wrap hard
soft
It specifies how the texts in the text-area wrap when the relative form is submitted.

1. autofocus attribute

Explaination:The autofocus attribute is a boolean attribute.This attribute specifies that a form control should automatically get focused when the page loads until the user overrides it.This attribute is new in HTML5.

In XHTML, the autofocus attribute is defined as:
<textarea autofocus = "autofocus">

Syntax:

<textarea autofocus>

Example:

<textarea autofocus>
Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.
</textarea>

Supported Browsers

Attribute
autofocus Yes 10.0 or higher 4.0 or higher Yes Yes

2. cols attribute

Explaination:The cols attribute specifies the visible width of the text control.Its value must be a positive number.The size of the textarea can also be modified by using CSS properties:-"height" & "width".
The default value of the cols attribute is 20.

Syntax:

<textarea cols="number">

Example:

<textarea cols="50">
Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.
</textarea>

Supported Browsers

Attribute
cols Yes Yes Yes Yes Yes

3. disabled attribute

Explaination: The disabled attribute is a boolean attribute.If this attribute is specified, the textarea is disabled i.e. user cannot interact with the control.
By default(without mentioning the attribute), the value is enabled in which the user can interact the control or can modify the former written characters.
In XHTML, the disabled attribute is defined as:
<textarea disabled = "disabled">

Syntax:

<textarea disabled>

Example:

<textarea disabled>
Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.
</textarea>

Supported Browsers

Attribute
disabled Yes Yes Yes Yes Yes

4. form attribute

Explaination: The form attribute specifies one or more forms the text area belongs to.This attribute is new in HTML5.
The value of this attribute must be equal with the id of the form element which should also within the same page or document.

Syntax:

<textarea form="form_id">

Example:

<form action="example.php" id="demo">
<input type="submit">
<textarea form="demo">
Leave a Comment apropos our website............
</textarea>

Supported Browsers

Attribute
form Yes Not Supported Yes Yes Yes

5. maxlength attribute

Explaination: The maxlength attribute defines the maximum number of characters that can be written by the user within the <textarea> element.This attribute is new in HTML5.
By default, users can enter unlimited number of characters.

Syntax:

<textarea maxlength="number">

Example:

<textarea maxlength="150">
Leave a Comment apropos our website............
</textarea>

Supported Browsers

Attribute
maxlength Yes 10.0 or higher 4.0 or higher Yes Yes

6. minlength attribute

Explaination: The minlength attribute defines the minimum number of characters that can be written by the user within the <textarea> element.This attribute is new in HTML5.
By default, users can enter unlimited number of characters.

Syntax:

<textarea minlength="number">

Example:

<textarea minlength="10">
Leave a Comment apropos our website............
</textarea>

Supported Browsers

Attribute
minlength Yes Yes Yes Yes Yes

7. name attribute

Explaination: The name attribute defines the name of the <textarea> element.This attribute is used to reference elements in JavaScript
.

Syntax:

<textarea name="text">

Example:

<textarea name="demo">
Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.
</textarea>

Supported Browsers

Attribute
name Yes Yes Yes Yes Yes

8. placeholder attribute

Explaination: The placeholder attribute gives a short hint to the user what can enter in the <textarea> element.This attribute is new in HTML5.
The value of this attribute is visible half-opacity inside the textarea.When you click any character in the control, the value of the placeholder attribute will be vanished.

Syntax:

<textarea placeholder="text">

Example:

<textarea placeholder="Write the problem of yours........."></textarea>

Supported Browsers

Attribute
placeholder Yes 10.0 or higher 4.0 or higher 5.0 or higher 11.5 or higher

9. readonly attribute

Explaination: The readonly attribute disallows the users to change the texts or any characters contained in the <textarea> element i.e. the text-area is only for reading.This attribute is a boolean attribute and new in HTML5.
By default, the text-area can be modified.
In XHTML, the readonly attribute is defined as:
<textarea readonly = "readonly">

Syntax:

<textarea readonly>

Example:

<textarea readonly">
Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.
</textarea>

Supported Browsers

Attribute
readonly Yes Yes Yes Yes Yes

10. required attribute

Explaination:The required attribute is a boolean attribute.This attribute specifies that the text-area should be fill-up in order to submit the relative form.
The required attribute is new in HTML5.

In XHTML, the required attribute is defined as:
<textarea required = "required">

Syntax:

<textarea required>

Example:

<form action="example.php">
<textarea name="comment" required >
</textarea>
<input type="submit">
<form>

Supported Browsers

Attribute
required 5.0 or higher 10.0 or higher 4.0 or higher Not supported Yes

11. rows attribute

Explaination:The rows attribute specifies the visible height of the text control in line.Its value must be a positive number.The size of the textarea can also be modified by using CSS properties:-"height" & "width".
The default value of the rows attribute is 2.

Syntax:

<textarea rows="number">

Example:

<textarea rows="5">
Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.
</textarea>

Supported Browsers

Attribute
rows Yes Yes Yes Yes Yes

12. spellcheck attribute

Explaination: The spellcheck attribute is used to find error like mistake in grammar or spelling.If its value is set as "true", the active browsers the elements will be checked while it is not check when its value is set as "false".
The default value of spellcheck attribute vary with different browsers.

Syntax:

<textarea spellcheck="true | false">

Example:

<textarea spellcheck="true">
Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.
</textarea>

Supported Browsers

Attribute
spellcheck Yes Yes Yes Yes Yes

13. wrap attribute

Explaination: The wrap attribute specifies how the texts in the text-area wrap when the relative form is submitted. This tag is new in HTML5.
There are two possible values of wrap attribute:-

  • soft :The texts in the text-area is not wrapped while submitting the relative form.In other words,it does not add additional line-breaks other than the original.
    This value is default value of <wrap> attribute.

  • hard :The browsers automatically gives a line-break when submit the relative form.It prevents each line cannot have more than the width of the text-control.
    If this value is set, you must give the cols attribute to the <textarea> element.

Syntax:

<textarea wrap="hard | soft">

Example:

<form action="example.php">
<textarea cols="50" rows="4" name="usrtxt" hard >
</textarea>
<input type="submit">
<form>

Supported Browsers

Attribute
wrap Yes Yes Yes Yes Yes