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/