Apa itu text area html?

Question

The <textarea> tag creates a multi-line text input control.

Table of Contents Show

Using <textarea>
More Examples
Attributes for <textarea>
Obsolete Attributes
More Examples
Textarea with maxlength
Textarea with placeholder
Disabled textarea
Did you know?
Disabling line break (enter key) in a textarea
Browser support
You may also like
Apa itu textarea pada HTML?
Apa HTML yang benar untuk membuat text area?

It accepts an unlimited number of characters. Textareas will create scrollbars when the text becomes too large.

Example

#

A <textarea> with 6 visible rows.
With more than 6 rows of text a scrollbar appears.

<textarea rows="6" cols="40">
Rembrandt van Rijn was a Dutch draughtsman, painter, and printmaker. An innovative and prolific master in three media, he is generally considered one of the greatest visual artists in the history of art and the most important in Dutch art history.
</textarea>

Using <textarea>

The <textarea> tag creates a multi-line text input control.

This element accepts an unlimited number of characters and line breaks.

By default, the textarea will create scrollbars when the text becomes too large.

The <textarea> element can be used for comments, reviews, addresses, and more.

Textareas honor spaces and line-breaks. They will format text as provided (see example below).

More Examples

A <textarea> with 12 rows and a 45 character row limit. The control has a scrollbar because the text exceeds 12 rows.

Textareas honor spaces and line-breaks. You can see this by how the text inside the textarea indents and wraps the same as specified in the HTML.

<textarea rows="12" cols="45">
      Unlike most Dutch masters of the 
   17th century, Rembrandt's works depict 
   a wide range of style and subject matter, 
   from portraits and self-portraits to 
   landscapes, genre scenes, allegorical 
   and historical scenes, and biblical and 
   mythological themes as well as animal 
   studies.
   
      His contributions to art came in a 
   period of great wealth and cultural 
   achievement  that historians call the 
   Dutch Golden Age, when Dutch art 
   (especially Dutch painting), although 
   in many ways antithetical to the 
   Baroque style that dominated Europe, 
   was extremely prolific and innovative 
   and gave rise to important new genres. 
   Like many artists of the Dutch Golden 
   Age, such as Jan Vermeer of Delft, 
   Rembrandt was also an avid art 
   collector and dealer.
</textarea>

Attributes for <textarea>

This table lists the <textarea> tag attributes.

Attribute	Value	Description
id	identifier	Defines a unique identifier for the textarea.
class	classnames	Sets one or more CSS classes to be applied to the textarea.
style	CSS-styles	Sets the style for the textarea.
data-*	value	Defines additional data that can be used by JavaScript.
hidden	hidden	Specifies whether the textarea is hidden.
title	text	Sets a title that displays as a tooltip.
tabindex	index	Sets a tab sequence relative to the other elements.
lang	language	Sets the language for the textarea.
autocomplete	on \| off	Presents the user with previously entered values
autofocus	no value	Sets the focus on the specified textarea when the page loads
cols	number	Textarea width
dirname	textareaname.dir	Text direction of the textarea
disabled	disabled	Disables textarea
form	form-id	Id of the form the textarea belongs to
maxlength	number	Maximum number of characters allowed in the textarea
name	text	Textarea name
placeholder	text	Displays hint for the textarea
readonly	readonly	Makes the textarea read-only
required	no value	Requires textarea value
rows	number	Allowed number of lines or rows in a textarea
wrap	hard soft	How the text in a textarea is to be wrapped

For additional global attributes see our global attributes list.

Obsolete Attributes

Do not use the attribute listed below. It is not standardized in HTML5.

Attribute	Description	Alternative
`autocapitalize`	Sets how characters are automatically capitalized. Not supported by today's browsers.	n/a

More Examples

Textarea with maxlength

#

A <textarea> with a maxlength attribute limits the number of characters to 50. Once it reaches 50 the textarea stops accepting characters.

<textarea rows="3" cols="45" 
          maxlength="50">
Textarea with a max of 50 characters
</textarea>

Textarea with placeholder

#

A <textarea> with a placeholder attribute which adds a muted text hint to the control. As soon as data is entered, the placeholder disappears.

<textarea rows="5" cols="45" 
          placeholder="Please enter your feedback">
</textarea>

Disabled textarea

#

A <textarea> with a disabled attribute. The control is grayed out and users cannot interact with the control.

<form action="/tutorial/action.html">
  <textarea rows="3" cols="45" disabled>
    This is a message. 
  </textarea><br />

  <button type="submit">Submit</button>
</form>

Did you know?

Disabling line break (enter key) in a textarea

By default, the <textarea> element accepts a new line or line break as input.

With JavaScript users can be prevented from using the enter key to add a line break.

Type some text in the <textarea> and notice that pressing the enter-key has no effect.

<script>
  window.addEventListener('keydown',function(e) {
    if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13) {
      if(e.target.id=='feedback') {
        e.preventDefault();
        return false;
      }
    }
  },true);
</script>

<textarea id="feedback" rows="4" cols="45" 
          placeholder="Start typing here..."></textarea>

Form Tags

The <textarea> tag is part of a group of tags that are used to create data entry forms. This group is referred to as the Form tag group. Together, they allow you to create comprehensive data input solutions.

Here is a list of form tags

Element	Description
<form>	Defines a data entry area that contains input elements
<input>	Creates an input field in which data can be entered
<label>	Creates a label or brief description before input elements
<textarea>	Creates a multi-line text input control
<select>	Creates a dropdown control
<button>	Creates a clickable button that can contain text or an image
<datalist>	Specifies a list of options for a textfield (<input>) element
<fieldset>	Groups related form elements and displays a box with a legend around these
<legend>	Defines a caption for a fieldset