Form Attributes

<form action="/api/submit" method="POST" class="demo-form">
  <div class="form-info">
    <p><strong>action:</strong>
      <code>/api/submit</code> - Where data is sent</p>
      <p><strong>method:</strong>
        <code>POST</code> - HTTP method (GET/POST)</p>
      </div>
      <div class="input-group">
        <label for="username1">Username</label>
        <input type="text" id="username1" name="username" placeholder="Enter username" required>
      </div>
      <div class="input-group">
        <label for="email1">Email</label>
        <input type="email" id="email1" name="email" placeholder="you@example.com" required>
      </div>
      <button type="submit" class="btn-primary">Submit via POST</button>
    </form>
    <p class="note">📤 <code>action</code> defines destination, <code>method</code> specifies HTTP verb (GET/POST)</p>

<form class="demo-form">
  <div class="input-group">
    <label for="email-req">Email (required) *</label>
    <input type="email" id="email-req" name="email" required placeholder="you@example.com">
    <small>Attribute: <code>required</code> - Must be filled before submit</small>
  </div>
  <div class="input-group">
    <label for="password-min">Password (min 8 chars) *</label>
    <input type="password" id="password-min" name="password" required minlength="8" placeholder="••••••••">
    <small>Attributes: <code>required minlength="8"</code></small>
  </div>
  <div class="input-group">
    <label for="age-range">Age (18-120) *</label>
    <input type="number" id="age-range" name="age" min="18" max="120" value="25" required>
    <small>Attributes: <code>min="18" max="120" required</code></small>
  </div>
  <button type="submit" class="btn-primary">Validate & Submit</button>
</form>
<p class="note">✅ Browser validates before submission, shows error messages</p>

<form class="demo-form">
  <div class="input-group">
    <label for="phone-pattern">Phone (Format: 123-456-7890)</label>
    <input
      type="tel"
      id="phone-pattern"
      name="phone"
      pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
      placeholder="123-456-7890"
      title="Phone format: 123-456-7890"
      >
      <small>🔍 Pattern: <code>pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"</code></small>
    </div>
    <div class="input-group">
      <label for="zip-pattern">ZIP Code (5 digits)</label>
      <input
        type="text"
        id="zip-pattern"
        name="zip"
        pattern="[0-9]{5}"
        placeholder="12345"
        title="5-digit ZIP code"
        maxlength="5"
        >
        <small>🔍 Pattern: <code>pattern="[0-9]{5}" maxlength="5"</code></small>
      </div>
      <button type="submit" class="btn-primary">Submit with Pattern Check</button>
    </form>
    <p class="note">🔍 Combine <code>pattern</code> + <code>title</code> for helpful error messages</p>

<form class="demo-form">
  <div class="input-group">
    <label for="readonly-field">User ID (readonly)</label>
    <input type="text" id="readonly-field" name="user_id" value="USER_12345" readonly>
    <small>🔒 <code>readonly</code> - Visible but not editable, value IS submitted</small>
  </div>
  <div class="input-group">
    <label for="disabled-field">Legacy System (disabled)</label>
    <input type="text" id="disabled-field" name="legacy" value="old-system-ref" disabled>
    <small>🚫 <code>disabled</code> - Grayed out, value NOT submitted</small>
  </div>
  <button type="submit" class="btn-primary">Submit (readonly will send, disabled won't)</button>
</form>
<p class="note">🔑 Readonly fields submit, disabled fields don't</p>

<form class="demo-form">
  <div class="input-group">
    <label for="search-auto">Search (autofocused)</label>
    <input type="search" id="search-auto" name="search" autofocus placeholder="Search articles...">
    <small>🎯 <code>autofocus</code> - Gets focus on page load</small>
  </div>
  <div class="input-group">
    <label for="email-placeholder">Email</label>
    <input type="email" id="email-placeholder" name="email" placeholder="you@example.com">
    <small>💬 <code>placeholder</code> - Hint text shown when empty</small>
  </div>
  <div class="input-group">
    <label for="bio-placeholder">Bio</label>
    <textarea id="bio-placeholder" name="bio" rows="3" placeholder="Tell us about yourself..."></textarea>
    <small>💬 Works with textarea too!</small>
  </div>
  <button type="submit" class="btn-primary">Submit</button>
</form>
<p class="note">👁️ Autofocus improves UX but use sparingly (one per page)</p>