Open navigation menu

HTML Forms with Validation

Creates accessible HTML forms with various input types, built-in validation attributes, proper labeling, and user-friendly error messaging.

HtmlForm Validation

Code

snippet
<form action="/submit" method="POST" novalidate>
  <fieldset>
    <legend>Contact Information</legend>

    <div class="form-group">
      <label for="name">Full Name <span class="required">*</span></label>
      <input type="text" id="name" name="name" required
             minlength="2" maxlength="50"
             autocomplete="name"
             placeholder="John Doe">
    </div>

    <div class="form-group">
      <label for="email">Email Address <span class="required">*</span></label>
      <input type="email" id="email" name="email" required
             autocomplete="email"
             placeholder="[email protected]">
      <span class="error" id="email-error"></span>
    </div>

    <div class="form-group">
      <label for="phone">Phone Number</label>
      <input type="tel" id="phone" name="phone"
             pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
             placeholder="555-123-4567">
    </div>

    <div class="form-group">
      <label for="age">Age</label>
      <input type="number" id="age" name="age"
             min="18" max="120" value="25">
    </div>

    <div class="form-group">
      <label for="country">Country</label>
      <select id="country" name="country" required>
        <option value="">Select...</option>
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="ca">Canada</option>
      </select>
    </div>

    <div class="form-group">
      <label>
        <input type="checkbox" name="subscribe" checked>
        Subscribe to newsletter
      </label>
    </div>

    <button type="submit">Submit Form</button>
  </fieldset>
</form>

Related Examples