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

Checks Performed

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/