Check Forms
Analyze and validate forms on web pages for accessibility and UX compliance.
Quick Start
cd /path/to/html-checker/scripts
bun src/check-forms.ts <URL>
CLI Options
| Option | Short | Default | Description |
|---|
--verbose | -v | false | Show all form elements |
--json | -j | false | Output results as JSON |
Checks Performed
| Check | Severity | Description |
|---|
| Missing label | Error | Input has no associated label |
| Empty label | Error | Label exists but has no text |
| Missing id | Warning | Input has no id for label association |
| Placeholder as label | Warning | Using placeholder instead of label |
| Missing required | Info | Required field without required attribute |
| Invalid input type | Warning | Using text for email/phone/date fields |
| Missing autocomplete | Info | No autocomplete for common fields |
| No submit button | Warning | Form has no submit mechanism |
| Missing form action | Warning | Form has no action attribute |
| Missing method | Info | Form has no method (defaults to GET) |
Usage Examples
# Basic check
bun src/check-forms.ts https://example.com
# Verbose output
bun src/check-forms.ts https://example.com --verbose
# JSON output
bun src/check-forms.ts https://example.com --json
Output Example
Form Analysis for https://example.com
Summary:
Total Forms: 2
Total Inputs: 12
Issues Found: 6
Form 1: Login Form
Inputs: 3 (email, password, submit)
[OK] All inputs have labels
[WARNING] Password field missing autocomplete="current-password"
Form 2: Contact Form
Inputs: 9 (name, email, phone, subject, message, checkbox, submit)
[ERROR] Phone input missing label
[WARNING] Email using type="text" instead of type="email"
[WARNING] Phone using type="text" instead of type="tel"
[INFO] Missing autocomplete on name field
Issues:
[ERROR ] Missing label for input at position 5
<input type="text" name="phone" placeholder="Phone">
[WARNING] Wrong input type at position 4
<input type="text" name="email"> should be type="email"
Recommendations:
- Add <label for="phone">Phone</label> to input
- Change input type to "email" for email fields
- Change input type to "tel" for phone fields
- Add autocomplete attributes for better UX
Accessibility (WCAG)
- SC 1.3.1: Labels must be programmatically associated
- SC 3.3.2: Labels or instructions required for inputs
- SC 4.1.2: Name, role, value must be exposed
Best Practices
- Every input needs a visible label (not just placeholder)
- Use appropriate input types (email, tel, date, number)
- Add autocomplete for common fields
- Mark required fields with required attribute and visual indicator
Related Files
- Command:
plugins/html-checker/commands/check-forms.md
- Scripts:
plugins/html-checker/scripts/src/check-forms.ts
- Check A11y:
plugins/html-checker/skills/check-a11y/
- Check Links:
plugins/html-checker/skills/check-links/
