<textarea>

The <textarea> tag is used to create a multiline input field. For example, comment input fields. If necessary, the field can have a resizable size.

        
          
          <label for="story">Tell us about yourself:</label><textarea id="story" name="story" rows="5" cols="33">Frontend developer with experience</textarea>
          <label for="story">Tell us about yourself:</label>
<textarea id="story" name="story" rows="5" cols="33">Frontend developer with experience</textarea>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Forms are often found on websites where you need to write multiline text. For example, when you need to leave a comment, write a review, or an article. For these purposes, a multiline input field is used, which is styled with the <textarea> tag. It should be noted that only plain text can be written in this field. Text styling panels, like in Word, are additional extensions using JavaScript.

An attribute indicating whether the field should be automatically filled with values saved in the browser. It is useful to use if the same form will potentially be frequently submitted with the same values.

Attribute values:

on — the field will be automatically filled with the value saved in the browser during the previous form submission

off — the field will not be automatically filled by the browser. Also, this value should be used if the document provides its own method of autofilling fields.

If the attribute is not specified at all, the browser will take the value from the autocomplete attribute of the parent element <form>, or — if there is no parent form — from the form referenced by the id in the form attribute.

        
          
          <textarea autocomplete="off"></textarea>
          <textarea autocomplete="off"></textarea>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

A boolean type attribute (without a value, either the attribute exists in the tag or it does not at all). If specified, the focus will automatically be placed in this input field upon page loading.

        
          
          <textarea autofocus></textarea>
          <textarea autofocus></textarea>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Specifies the width of the input field in characters. If the attribute is defined, it must have a value of a positive integer. If not specified, it defaults to 20.

A boolean type attribute. If set, the field is disabled for user interaction. If the attribute is not set, it may be inherited from one of the ancestors (for example, from the container <fieldset> or <form>). If neither ancestor up the tree has this attribute set, the field is available for editing.

When submitting the form, the values from disabled fields will not be sent.

This attribute points to the <form> element to which the input field is linked. The value of the attribute must be the id of the form within the current document. If the attribute is not specified, the <textarea> must be inside the form> tag. However, if the attribute is specified, being inside a form is not required, and the <textarea> can be located anywhere on the page.

The maximum number of characters in the field (including spaces and line breaks) that the user can input. The value must be a positive integer.

The minimum number of characters that the user must input. This attribute is used during validation of the field before form submission.

The name of the field. Upon form submission, the value of the name attribute will be the key in the submitted object.

A hint for the user about what to input in this field. If the hint needs to be multiline, you can directly break the lines in the HTML code.

The placeholder should only provide a hint on how to fill out the field. However, it is not a full replacement for the <label> tag. If the layout has input fields with only placeholders but no labels, talk to the designer 😉

A boolean type attribute. If specified, the user cannot edit the text in the field but can still interact with it: click, copy text. When the form is submitted, the value of the field will be sent as usual.

A boolean type attribute. Indicates whether the field must be filled in. The attribute is taken into account during form validation upon submission. If the field is left empty, the browser will display an error when attempting to submit the form.

Specifies the height of the input field in lines. If the attribute is defined, it must have a value of a positive integer. If not specified, the default height is set to two lines.

This attribute indicates whether spell checking should be enabled in the field. It can take the following values:

true — spell checking is enabled

default — indicates the default behavior. With this value, the input field may inherit the value of a similar attribute from parent elements.

false — spell checking is disabled

This attribute determines whether line break characters will be added to the text when submitting the form. It can take the values:

hard — when the form is submitted, the browser, based on the value of the cols attribute, adds line break control characters (CR+LF) to the text. Thus, the information about line breaks made by the user in the input field is retained.

soft — the default value. When the form is submitted, line break characters will not be added, and the text will be sent as one long line.

💡 The <textarea> field is styled just like the <input> field. All block model properties apply to it.

💡 By default, the <textarea> input field can change its size if you pull on the lower right corner. This behavior can be changed by manipulating the CSS resize property.