Syntax
<textarea name="message" rows="4" cols="50">Default text</textarea>Examples
Basic Textarea
A simple multi-line text field.
<label for="msg">Message:</label>
<textarea id="msg" name="message" rows="5" placeholder="Type your message here..."></textarea>Textarea with Character Limit
Restricting input length with maxlength.
<textarea name="bio" maxlength="200" rows="4" placeholder="Tell us about yourself (200 characters max)"></textarea>Non-resizable Styled Textarea
Preventing resizing and applying custom styles.
<textarea rows="6" style="width: 100%; resize: none; padding: 10px; border-radius: 8px; border: 1px solid #d1d5db; font-family: inherit;" placeholder="Write a review..."></textarea>Attributes
- rows (number): The visible number of text lines
- cols (number): The visible width in average character widths
- maxlength (number): The maximum number of characters allowed
- placeholder (string): Hint text shown when empty
- required (boolean): Marks the field as mandatory
Best practices
- Set sensible default rows so the field looks appropriately sized before the user starts typing
- Use the CSS resize property to control whether users can resize the textarea, rather than removing the ability entirely
- Pair with a <label>, same as any other form field
- Consider maxlength with a visible character counter for fields like bios or reviews
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<button>
The <button> element creates a clickable button that can trigger actions like submitting a form, resetting a form, or running custom JavaScript. Unlike <input type="button">, <button> can contain other HTML content such as icons or styled text, not just plain text. Its type attribute determines its default behavior within a form.<input>
The <input> element creates interactive form controls for collecting user data. Its behavior changes dramatically based on the type attribute — a single element can become a text field, checkbox, radio button, date picker, file uploader, and more. It is a void (self-closing) element with no closing tag or child content.<label>
The <label> element defines a caption for a form control, improving both usability and accessibility. Clicking a label activates or focuses its associated input — useful for small targets like checkboxes and radio buttons. Labels can be associated with an input either by wrapping it, or by using a for attribute that matches the input's id.<select>
The <select> element creates a dropdown list of options, letting users pick one or more predefined values. Each choice is defined with an <option> element inside it. Related options can be grouped visually using <optgroup>. It is a compact way to offer a constrained set of choices without the space a list of radio buttons would need.
The <button> element creates a clickable button that can trigger actions like submitting a form, resetting a form, or running custom JavaScript. Unlike <input type="button">, <button> can contain other HTML content such as icons or styled text, not just plain text. Its type attribute determines its default behavior within a form.<input>
The <input> element creates interactive form controls for collecting user data. Its behavior changes dramatically based on the type attribute — a single element can become a text field, checkbox, radio button, date picker, file uploader, and more. It is a void (self-closing) element with no closing tag or child content.<label>
The <label> element defines a caption for a form control, improving both usability and accessibility. Clicking a label activates or focuses its associated input — useful for small targets like checkboxes and radio buttons. Labels can be associated with an input either by wrapping it, or by using a for attribute that matches the input's id.<select>
The <select> element creates a dropdown list of options, letting users pick one or more predefined values. Each choice is defined with an <option> element inside it. Related options can be grouped visually using <optgroup>. It is a compact way to offer a constrained set of choices without the space a list of radio buttons would need.