{
    "slug": "html_forms",
    "term": "HTML Forms — Validation & Accessibility",
    "category": "frontend",
    "difficulty": "beginner",
    "short": "Native HTML form validation, input types, and accessibility patterns — using browser built-ins before reaching for JavaScript.",
    "long": "HTML5 input types give free validation and mobile-optimised keyboards: email, tel, number, date, url, color. Constraint validation attributes: required, minlength, maxlength, pattern (regex), min, max, step. The browser validates on submit and shows native UI unless novalidate is added. For custom validation, use the Constraint Validation API: input.setCustomValidity('message'). Accessibility: always associate <label> with input via for/id or wrapping; use aria-describedby for hint text; aria-invalid='true' on failed fields; aria-live='polite' on error containers. Never rely solely on placeholder — it disappears on focus and has poor contrast. Server-side validation (PHP) is mandatory regardless of client validation — never trust the client.",
    "aliases": [
        "HTML form elements",
        "form validation HTML",
        "input types"
    ],
    "tags": [
        "frontend",
        "html",
        "ux",
        "accessibility"
    ],
    "misconception": "HTML5 form validation removes the need for server-side validation. HTML5 validation improves UX but can be bypassed by disabling JavaScript or crafting raw HTTP requests. Server-side validation is always required for security; client-side validation is always optional for usability.",
    "why_it_matters": "Proper HTML form structure (labels, fieldsets, validation attributes) provides built-in accessibility and browser validation — missing these requires JavaScript to recreate what the browser offers for free.",
    "common_mistakes": [
        "Input without a label — placeholder is not a substitute; it disappears when the user types.",
        "Not using the correct input type (email, tel, number) — loses browser-native validation and mobile keyboard.",
        "Form submission via JavaScript without a fallback for disabled JS users.",
        "Not using autocomplete attributes — browsers cannot autofill correctly without them."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "html_semantic",
        "html_accessibility",
        "input_validation"
    ],
    "prerequisites": [
        "accessible_forms",
        "html_accessibility",
        "js_form_data_api"
    ],
    "refs": [
        "https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation"
    ],
    "bad_code": "<input type=\"text\" placeholder=\"Enter your email\">\n<input type=\"text\" id=\"pass\">",
    "good_code": "<!-- Label association, correct input type, built-in validation -->\n<label for=\"email\">Email address</label>\n<input\n  type=\"email\"\n  id=\"email\"\n  name=\"email\"\n  required\n  autocomplete=\"email\"\n  aria-describedby=\"email-hint\"\n>\n<span id=\"email-hint\">We'll never share your email</span>\n\n<!-- Password with show/hide -->\n<label for=\"password\">Password</label>\n<input type=\"password\" id=\"password\" name=\"password\"\n  required minlength=\"8\" autocomplete=\"current-password\">",
    "quick_fix": "Use native form elements (input, select, textarea) over custom JS widgets where possible — they provide built-in accessibility, keyboard handling, and mobile keyboard types free",
    "severity": "medium",
    "effort": "low",
    "created": "2026-03-15",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/html_forms",
        "html_url": "https://codeclaritylab.com/glossary/html_forms",
        "json_url": "https://codeclaritylab.com/glossary/html_forms.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[HTML Forms — Validation & Accessibility](https://codeclaritylab.com/glossary/html_forms) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/html_forms"
            }
        }
    }
}