Text Inputs

<h2>Text Input Types</h2>
<div class="form-container">
  <div class="form-group">
    <label for="text-input">Basic Text</label>
    <input type="text" id="text-input" placeholder="Enter any text">
    <small>Accepts any text characters</small>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" id="password" placeholder="••••••••">
    <small>Characters are masked</small>
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" placeholder="user@example.com">
    <small>Browser validates email format</small>
  </div>
  <div class="form-group">
    <label for="url">Website URL</label>
    <input type="url" id="url" placeholder="https://example.com">
    <small>Must be a valid URL format</small>
  </div>
  <div class="form-group">
    <label for="tel">Telephone</label>
    <input type="tel" id="tel" placeholder="(555) 123-4567">
    <small>Phone number input (mobile shows dial pad)</small>
  </div>
  <div class="form-group">
    <label for="search">Search</label>
    <input type="search" id="search" placeholder="Search something...">
    <small>Optimized for search input</small>
  </div>
</div>

<h2>Text Input Attributes</h2>
<div class="form-container">
  <div class="form-group">
    <label for="required-field">Required Field</label>
    <input type="text" id="required-field" placeholder="This field is required" required>
    <small>Try submitting without entering text</small>
  </div>
  <div class="form-group">
    <label for="placeholder">Placeholder Text</label>
    <input type="text" id="placeholder" placeholder="This text disappears when you type">
    <small>Shows helpful hint inside the field</small>
  </div>
  <div class="form-group">
    <label for="maxlength">Max Length (20 chars)</label>
    <input type="text" id="maxlength" placeholder="Type something..." maxlength="20">
    <small>Cannot exceed 20 characters</small>
  </div>
  <div class="form-group">
    <label for="minlength">Min Length (5 chars)</label>
    <input type="text" id="minlength" placeholder="At least 5 chars..." minlength="5">
    <small>Must be at least 5 characters</small>
  </div>
  <div class="form-group">
    <label for="readonly">Read-only Field</label>
    <input type="text" id="readonly" value="Cannot edit this" readonly>
    <small>User cannot modify this value</small>
  </div>
  <div class="form-group">
    <label for="disabled">Disabled Field</label>
    <input type="text" id="disabled" placeholder="Cannot interact" disabled>
    <small>Field is disabled and grayed out</small>
  </div>
  <button type="submit" class="btn">Submit</button>
</div>