Form Structure & Attributes

<h2>Labels & Form Structure</h2>
<form class="form-container">
  <!-- Implicit Label Association -->
  <div class="form-group">
    <label>
      <span>Check this option:</span>
      <input type="checkbox">
    </label>
  </div>
  <!-- Explicit Label Association -->
  <div class="form-group">
    <label for="email">Email Address:</label>
    <input type="email" id="email" name="email" required>
    <small>We'll never share your email</small>
  </div>
  <!-- Textarea -->
  <div class="form-group">
    <label for="message">Your Message:</label>
    <textarea id="message" name="message" rows="5" placeholder="Enter your message..." required></textarea>
    <small>Max 500 characters</small>
  </div>
  <!-- Fieldset & Legend -->
  <fieldset class="fieldset-group">
    <legend>Shipping Address</legend>
    <div class="form-group">
      <label for="address">Street Address:</label>
      <input type="text" id="address" name="address" required>
    </div>
    <div class="form-group">
      <label for="city">City:</label>
      <input type="text" id="city" name="city" required>
    </div>
    <div class="form-group">
      <label for="zip">ZIP Code:</label>
      <input type="text" id="zip" name="zip" required>
    </div>
  </fieldset>
  <button type="submit" class="btn">Submit</button>
</form>

<h2>Form Attributes</h2>
<form class="form-container" id="myForm" action="/submit" method="POST" accept-charset="UTF-8" novalidate>
  <div class="form-group">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    <small>Form has novalidate attribute (browser validation disabled)</small>
  </div>
  <div class="form-group">
    <label for="website">Website:</label>
    <input type="url" id="website" name="website">
    <small>Try entering invalid URL (validation disabled)</small>
  </div>
  <div class="form-group">
    <label for="comments">Comments:</label>
    <textarea id="comments" name="comments" form="myForm"></textarea>
    <small>This textarea is associated with form via 'form' attribute</small>
  </div>
  <button type="submit" class="btn">Submit</button>
  <button type="reset" class="btn btn-reset">Reset</button>
</form>