Textarea

<h2>Basic Textarea</h2>
<form class="form-container">
  <div class="form-group">
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="5" cols="50" placeholder="Enter your message here..."></textarea>
  </div>
  <button type="submit" class="btn">Send</button>
</form>

<h2>Textarea Attributes</h2>
<form class="form-container">
  <!-- rows and cols -->
  <div class="form-group">
    <label for="small">Small Textarea (3 rows):</label>
    <textarea id="small" rows="3" placeholder="3 rows..."></textarea>
  </div>
  <!-- required -->
  <div class="form-group">
    <label for="required">Required Field:</label>
    <textarea id="required" required placeholder="This field is required"></textarea>
  </div>
  <!-- maxlength -->
  <div class="form-group">
    <label for="limited">Limited to 100 characters:</label>
    <textarea id="limited" maxlength="100" placeholder="Only 100 chars allowed..."></textarea>
    <small>Max 100 characters</small>
  </div>
  <!-- minlength -->
  <div class="form-group">
    <label for="minimum">Minimum 20 characters:</label>
    <textarea id="minimum" minlength="20" placeholder="At least 20 chars..."></textarea>
    <small>At least 20 characters required</small>
  </div>
  <!-- readonly and disabled -->
  <div class="form-group">
    <label for="readonly">Read-only:</label>
    <textarea id="readonly" readonly>Cannot edit this text</textarea>
    <small>This is read-only - you cannot modify it</small>
  </div>
  <div class="form-group">
    <label for="disabled">Disabled:</label>
    <textarea id="disabled" disabled>This textarea is disabled</textarea>
    <small>This is disabled and grayed out</small>
  </div>
  <button type="submit" class="btn">Submit</button>
</form>

<h2>Advanced Textarea Features</h2>
<form class="form-container">
  <!-- Character counter -->
  <div class="form-group">
    <label for="counter">With Character Counter (max 200):</label>
    <textarea id="counter" maxlength="200" placeholder="Type something..." class="with-counter"></textarea>
    <div class="counter-info">
      <span id="count">0</span> / 200 characters
    </div>
  </div>
  <!-- Auto-expand textarea -->
  <div class="form-group">
    <label for="autoexpand">Auto-expanding Textarea:</label>
    <textarea id="autoexpand" class="auto-expand" placeholder="This expands as you type..."></textarea>
    <small>Expands automatically to fit content</small>
  </div>
  <!-- Wrap attribute -->
  <div class="form-group">
    <label for="wrap">Wrapped Text:</label>
    <textarea id="wrap" wrap="soft" rows="4" placeholder="Text wraps at edge..."></textarea>
    <small>wrap="soft" - text wraps visually but not submitted</small>
  </div>
  <!-- Spellcheck -->
  <div class="form-group">
    <label for="spell">With Spellcheck:</label>
    <textarea id="spell" spellcheck="true" placeholder="Speling errors are underlined..."></textarea>
    <small>Browser checks spelling and grammar</small>
  </div>
  <button type="submit" class="btn">Submit</button>
</form>