Last updated
Basic Contact Form
The HTML Form Generator creates complete, accessible forms with proper labeling and validation. Here is a standard contact form:
<form action="/contact" method="POST" novalidate>
<div class="form-group">
<label for="name">Full Name <span aria-hidden="true">*</span></label>
<input
type="text"
id="name"
name="name"
required
minlength="2"
maxlength="100"
autocomplete="name"
placeholder="Jane Smith"
aria-required="true">
<div class="form-group">
<label for="email">Email Address <span aria-hidden="true">*</span></label>
<input
type="email"
id="email"
name="email"
required
autocomplete="email"
placeholder="jane@example.com"
aria-required="true">
</div>
<div class="form-group">
<label for="message">Message <span aria-hidden="true">*</span></label>
<textarea
id="message"
name="message"
required
minlength="10"
maxlength="1000"
rows="5"
aria-required="true"
placeholder="How can we help you?"></textarea>
</div>
<button type="submit">Send Message</button>
</form>User Registration Form with All Input Types
Registration forms use many different input types. The generator handles each with appropriate validation attributes:
<form action="/register" method="POST" novalidate>
<fieldset>
<legend>Account Information</legend>
<div class="form-group">
<label for="username">Username *</label>
<input type="text" id="username" name="username"
required minlength="3" maxlength="20"
pattern="[a-zA-Z0-9_]+"
title="Letters, numbers, and underscores only"
autocomplete="username">
</div>
<div class="form-group">
<label for="reg-email">Email *</label>
<input type="email" id="reg-email" name="email"
required autocomplete="email">
</div>
<div class="form-group">
<label for="password">Password *</label>
<input type="password" id="password" name="password"
required minlength="8"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="At least 8 characters with uppercase, lowercase, and number"
autocomplete="new-password">
</div>
<div class="form-group">
<label for="birthdate">Date of Birth</label>
<input type="date" id="birthdate" name="birthdate"
min="1900-01-01" max="2006-01-01"
autocomplete="bday">
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone"
pattern="[+]?[0-9\s\-\(\)]{7,15}"
title="Valid phone number"
autocomplete="tel">
</div>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<div class="form-group">
<label for="country">Country</label>
<select id="country" name="country" autocomplete="country">
<option value="">Select a country</option>
<option value="US">United States</option>
<option value="GB">United Kingdom</option>
<option value="CA">Canada</option>
<option value="AU">Australia</option>
</select>
</div>
<div class="form-group">
<label>Notification Preferences</label>
<div class="checkbox-group">
<label>
<input type="checkbox" name="notifications" value="email"> Email updates
</label>
<label>
<input type="checkbox" name="notifications" value="sms"> SMS alerts
</label>
</div>
</div>
</fieldset>
<button type="submit">Create Account</button>
</form>File Upload Form
File upload forms require the correct enctype attribute and accept filters:
<form action="/upload" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="profile-photo">Profile Photo</label>
<input
type="file"
id="profile-photo"
name="profile_photo"
accept="image/jpeg,image/png,image/webp"
aria-describedby="photo-hint">
<p id="photo-hint" class="form-hint">
JPG, PNG, or WebP. Maximum 5MB.
</p>
</div>
<div class="form-group">
<label for="documents">Upload Documents</label>
<input
type="file"
id="documents"
name="documents"
accept=".pdf,.doc,.docx"
multiple
aria-describedby="doc-hint">
<p id="doc-hint" class="form-hint">
PDF or Word documents. Up to 10 files.
</p>
</div>
<button type="submit">Upload Files</button>
</form>Accessible Radio Button Group
Radio buttons and checkboxes must be grouped with fieldset and legend for screen reader accessibility:
<form action="/survey" method="POST">
<fieldset>
<legend>How did you hear about us?</legend>
<div class="radio-group">
<label>
<input type="radio" name="source" value="search" required>
Search engine
</label>
<label>
<input type="radio" name="source" value="social">
Social media
</label>
<label>
<input type="radio" name="source" value="friend">
Friend or colleague
</label>
<label>
<input type="radio" name="source" value="ad">
Advertisement
</label>
<label>
<input type="radio" name="source" value="other">
Other
</label>
</div>
</fieldset>
<fieldset>
<legend>Rate your experience (1–5)</legend>
<div class="range-group">
<label for="rating">Rating: <output id="rating-output">3</output></label>
<input type="range" id="rating" name="rating"
min="1" max="5" step="1" value="3"
oninput="document.getElementById('rating-output').value = this.value">
</div>
</fieldset>
<button type="submit">Submit Survey</button>
</form>Form with Inline Validation Error Messages
Accessible error messages use ARIA live regions so screen readers announce them when they appear:
<form action="/login" method="POST" novalidate id="login-form">
<div class="form-group">
<label for="login-email">Email</label>
<input
type="email"
id="login-email"
name="email"
required
aria-describedby="email-error"
aria-invalid="false">
<span
id="email-error"
class="error-message"
role="alert"
aria-live="polite">
<!-- Error message injected here by JavaScript -->
</span>
</div>
<div class="form-group">
<label for="login-password">Password</label>
<input
type="password"
id="login-password"
name="password"
required
aria-describedby="password-error"
aria-invalid="false">
<span
id="password-error"
class="error-message"
role="alert"
aria-live="polite">
</span>
</div>
<button type="submit">Log In</button>
</form>