`<textarea>` - Multi-line text input

<textarea> is a tag in HTML used to create a multi-line text input box, suitable for scenarios where users need to enter longer text, such as comments, messages, or free-form text input in forms. It supports features like dynamic resizing, placeholder text, disabled state, and can be further customized in terms of interaction effects through CSS and JavaScript.

Basic Syntax of <textarea>

<textarea> is a double tag, and its basic structure is as follows:

<textarea rows="4" cols="50">
  Default text content (optional)
</textarea>

• rows and cols define the initial number of rows and columns (in characters) of the text box, respectively. If not specified, the browser will use default values.
• The content between the tags will be displayed as default text in the input box.

Core Attributes Explained

1. name and id

• name: Used to identify data during form submission; the backend retrieves the value through this attribute.
• id: Used for JavaScript or CSS selectors.

<textarea name="user_comment" id="comment_field"></textarea>

2. placeholder

Provides hint text that disappears when the user starts typing:

<textarea placeholder="Enter at least 20 characters..."></textarea>

3. disabled and readonly

• disabled: Disables input, and the data will not be submitted.
• readonly: Makes the field read-only, but the data will be submitted.

<textarea disabled>Non-editable content</textarea>
<textarea readonly>Read-only content (will be submitted)</textarea>

4. maxlength and minlength

Limits the number of input characters:

<textarea maxlength="200" minlength="10"></textarea>

5. autofocus

Automatically focuses the field when the page loads:

<textarea autofocus></textarea>

6. form

Associates the <textarea> with a form ID, allowing submission even if the <textarea> is outside the <form> tag:

<form id="my_form">
  <button type="submit">Submit</button>
</form>
<textarea form="my_form" name="external_text"></textarea>

Styling and Layout Control

1. Adjusting Dimensions with CSS

Prefer using CSS width and height over rows/cols:

textarea {
  width: 300px;
  height: 150px;
  resize: both; /* Allows users to resize (options: none|both|horizontal|vertical) */
}

2. Responsive Design

Use relative units or media queries to adapt to different screens:

textarea {
  width: 100%;
  min-height: 100px;
}

JavaScript Interaction Examples

1. Dynamically Getting and Setting Values

// Get value
const textarea = document.querySelector('textarea');
console.log(textarea.value);

// Set value
textarea.value = 'New text content';

2. Real-Time Character Count

<textarea id="dynamic_text"></textarea>
<div id="counter">0/200</div>

<script>
  const textarea = document.getElementById('dynamic_text');
  const counter = document.getElementById('counter');
  const maxLength = 200;

  textarea.addEventListener('input', () => {
    counter.textContent = `${textarea.value.length}/${maxLength}`;
  });
</script>

Practical Use Cases

1. Form Submission

Combined with <form> and server-side processing:

<form action="/submit-comment" method="POST">
  <textarea name="comment" required></textarea>
  <button type="submit">Submit Comment</button>
</form>

2. Basic Rich Text Editor

Enhanced functionality (e.g., bold, italic) via JavaScript:

<textarea id="rich_text"></textarea>
<button onclick="formatText('bold')">Bold</button>

<script>
  function formatText(format) {
    const textarea = document.getElementById('rich_text');
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const selectedText = textarea.value.substring(start, end);
    let wrappedText;

    if (format === 'bold') {
      wrappedText = `**${selectedText}**`;
    }
    
    textarea.value = 
      textarea.value.substring(0, start) + 
      wrappedText + 
      textarea.value.substring(end);
  }
</script>

Compatibility and Considerations

• Browser Support: All modern browsers support <textarea>, but some attributes (e.g., minlength) may not work in older versions of IE.
• Performance Issues: Extremely long text (e.g., tens of thousands of lines) may cause rendering lag; consider pagination or virtual scrolling.
• Line Break Handling: When submitting a form, line breaks are converted to \r\n (HTTP specification), so the backend needs to handle them uniformly.