DONATE  
MENU
JAVASCRIPT
JSON
AJAX
HTML

HTML Tutorials

INTRODUCTION

» Introduction to HTML

» PRACTICE IT Editor

» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols

TAGS/ELEMENTS

» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata

ATTRIBUTES

» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width

HTML FORMS

» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select

HTML EXAMPLE

» Login Page

.. » HTML » Html Forms » HTML Textarea
Share Tweet WhatsApp

HTML Textarea

The HTML textarea is similar to inputs of type "text" but then, textarea elements are used in collecting texts that can span multiple lines from user. For example, users' comments. Comments usually span multiple lines, have paragraphs, line breaks, tabs and a lot other. Input cannot be used in collecting such data therefore, the textarea element. The textarea element can collect whatever kind of text irrespective of length. A textarea can be created using the <textarea> tag, which unlike the input tag, is a non - empty tag.
<textarea>
</textarea>

Copy PRACTICE IT

As a non - empty tag, its content is what is typed into it. TEXTAREA DEFAULT TEXT You can specify a default text in a textarea. Simply write such text inside the textarea element.
<textarea>
The HTML textarea is similar to inputs of type "text" but then, the textarea elements are used in collecting texts that can span multiple lines from user. For example, users' comments. Comments usually span multiple lines, have paragraphs, line breaks, tabs and a lot other. Input cannot be used in collecting such data therefore, the textarea element.
</textarea>

Copy PRACTICE IT

TEXTAREA ATTRIBUTES Textarea elements have some attributes that can be used in achieving whatever we desire from it. Some of such are: ROWS: The textarea rows attribute is used in specifying the rows or lines of characters a textarea should comprise of. You can liken this to the height of the textarea or the lines of characters that can be displayed in the textarea at any particular time. For example, if the rows attribute has a value of 5, it means a user can see 5 lines of characters in the textarea at any given point.
<textarea rows='10'>
1
2
3
4
5
6
7
8
9
10
</textarea>

Copy PRACTICE IT

COLS: The textarea cols is used in specifying columns, a textarea width should be made of. The width of the textarea element is determined by the number of columns contained in it. It can also be seen as the number of characters, the width of a textarea should accommodate.
<textarea cols='40'>1234567890123456789012345678901234567890</textarea>

Copy PRACTICE IT

MAXLENGTH: The textarea maxlength attribute is used in specifying the maximum number of characters a user can enter into a textarea. If its value is 1, it means the user can only enter 1 character.
<textarea maxlength="3" placeholder="You can't enter more than 3 characters"></textarea>

Copy PRACTICE IT

MINLENGTH: Opposite of the maxlength attribute. It is used in specifying the minimum number of characters a user is required to enter into a textarea. If the user enters less characters and submits the form, the browser will automatically prompt him/her to add more texts.
<form action="">
<textarea minlength="200"></textarea>
<p><input type='submit' value='SUBMIT'/></p>
</form>

Copy PRACTICE IT

AUTOCOMPLETE: Enables you to specify if a browser should be able to help users complete texts while they type. Its value can either be on or off.
<textarea autocomplete="off" placeholder="autocomplete is off in this textarea" rows="10" cols="40"></textarea>
<textarea autocomplete="on" placeholder="autocomplete is on in this textarea" rows="10" cols="40"></textarea>

Copy PRACTICE IT

AUTOCORRECT: Enables you to specify if a browser should be able to help users correct their spellings while they type. Its value can either be on or off.
<textarea autocorrect="off" placeholder="autocorrect is off in this textarea" rows="10" cols="40"></textarea>
<textarea autocorrect="on" placeholder="autocorrect is on in this textarea" rows="10" cols="40"></textarea>

Copy PRACTICE IT

DISABLED: Just as the name, this attribute is an empty (does not require a value) attribute that disables a textarea thereby preventing a user from clicking on it and editing its content.
<textarea disabled>Hello World</textarea>

Copy PRACTICE IT

READONLY: Almost like the disabled attribute but here, the user is not prevented from clicking on the textarea. He/she can only not edit its content.
<textarea readonly>Hello World</textarea>

Copy PRACTICE IT

SPELLCHECK: Enables us to indicate if a user's textarea input should be subjected to spelling errors checking by the browser. Its value can be true(That is, it should be spell checked) or false (it should not be spell checked) or even, default (act according to a default behavior, possibly based on the parent element's own spellcheck value).
<textarea spellcheck="false"></textarea>

Copy PRACTICE IT

When it is true, an incorrect spelling will always be underline. SUMMARY
  1. A textarea is an advanced input of type "text".
  2. This is because while inputs of type "text" do not allow line breaks and others, textareas do.
  3. Therefore, use inputs of type "text" when the input won't be much and won't involve any form of line breaks. Such as username, address and etcetera.
  4. And use textareas when the input may or may not be lengthy and may or may not involve line breaks and tabs.
Take a short quiz on HTML Textarea.
Ask a question or tell us if HTML Textarea is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode