Learn how to build forms that everyone can complete: visible labels, fieldset and legend, hints and required fields with aria-describedby, the right input types and autocomplete, clear error messages, sensible validation timing, and safe, accessible sign-in. Includes a live field builder, a validation timing lab, and a form checker.
Learn how to build accessible HTML forms: visible labels, grouping with fieldset and legend, hints and instructions, marking required fields, clear error messages with aria-invalid and aria-describedby, autocomplete, keyboard and focus, touch target size, WCAG 2.2 rules for forms, redundant entry and accessible authentication, and a practical testing checklist.
Learn how aria-describedby adds extra help to a control: form hints and errors, warnings on buttons, dialog text, and accessible tooltips. Understand the difference between a name and a description, why descriptions can be missed, and how to keep them accurate. Includes a description builder lab, a tooltip lab for WCAG 1.4.13, and a live aria-describedby checker.
Learn how to move keyboard focus on purpose: how focus() and document.activeElement work, when to move focus (dialogs, deleted items, form errors, page changes), how to return focus, and how to avoid stealing it. Includes three live labs: a delete-and-lose-focus lab, a dialog focus lab, and a form error summary lab.
Learn the HTML autocomplete attribute: helping browsers and password managers fill in names, emails, addresses, phone numbers, and payment details, the most useful autocomplete tokens, shipping and billing sections, current-password, new-password, and one-time-code, when autocomplete off is appropriate, accessibility benefits (WCAG 1.3.5), and security and privacy notes.
Learn the HTML button element: the type attribute (submit, reset, button) and why submit is the default, stable name and value for multiple actions, icons and rich content inside a button, toggle buttons with aria-pressed, disabled versus aria-disabled, loading states, button versus link, styling, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML datalist element for suggestions: connecting an input with the list attribute, suggestions versus restrictions, option value and label, using datalist with search, email, number, range, and color inputs, limiting input to the list with JavaScript, loading suggestions dynamically, accessibility limits, and common mistakes on CodeHarborHub.
Learn the HTML fieldset and legend elements: grouping related form controls, naming a group for screen readers, radio and checkbox groups, split date fields, address blocks, disabling a whole group with the disabled attribute, styling the border and legend, nesting rules, and common mistakes on CodeHarborHub.
Learn the HTML form action attribute: where a form sends its data, absolute and relative URLs, what happens when action is left out, the GET query string trap, formaction on buttons, the target attribute, third-party form services, mailto actions, progressive enhancement with fetch, and security notes on HTTPS, CSRF, and the Content-Security-Policy form-action rule.
Learn the HTML form element: what it does, how browsers collect and send name and value pairs, the main attributes (action, method, enctype, target, autocomplete, novalidate), submitting with buttons and the Enter key, search forms, the form attribute, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML form method attribute: how GET puts data in the URL and POST sends it in the request body, when to use each one, URL encoding, the post-redirect-get pattern, method dialog, why HTML forms cannot send PUT or DELETE, CSRF and privacy notes, and how to choose the safe method for search, login, and checkout forms.
Learn HTML form validation: the built-in constraint validation attributes, the ValidityState flags, checkValidity, reportValidity, and setCustomValidity, the :valid, :invalid, and :user-invalid CSS pseudo-classes, novalidate, writing friendly accessible error messages with aria-invalid and an error summary, and why the server must always validate again.
Learn how to collect information from visitors with HTML forms. Understand the form element, labels, inputs, input types, textarea, select, buttons, validation attributes, submitting data, accessible forms, and secure form design with live examples on CodeHarborHub.
Learn the HTML input element: the void element behind most form fields. Understand type, name, id, value, placeholder, required, disabled versus readonly, autofocus, size, inputmode, and other key attributes, how values are sent, and common mistakes with live examples on CodeHarborHub.
Learn the HTML input type checkbox: single and grouped checkboxes, the checked attribute, what is sent when a box is ticked or not (and the default value on), required consent boxes, the indeterminate state, select all, fieldset groups, accent-color styling, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML input type color: the colour picker, the #rrggbb value format, the black default, input versus change events, preset swatches with datalist, converting hex to RGB, checking contrast for accessibility, and common mistakes on CodeHarborHub.
Learn the HTML input type date: the date picker, the yyyy-mm-dd value format, min, max, and step, valueAsDate, time zone and off-by-one-day traps, setting today as the minimum, birthdays and autocomplete, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML input type datetime-local: choosing a date and time together, the yyyy-mm-ddThh:mm value format, why it has no time zone, min, max, and step, converting to UTC, setting the current time as a default, daylight saving traps, and common mistakes on CodeHarborHub.
Learn the HTML input type email: built-in format checking, the @ keyboard on phones, the multiple attribute, autocomplete values, trimming, international addresses, why the browser check is not proof, and common mistakes on CodeHarborHub.
Learn the HTML input type file: uploading one or many files, the accept, multiple, capture, and required attributes, why a form needs method=post and enctype=multipart/form-data, reading file name, size, and type with JavaScript, image previews, size checks, styling the button, and safe server-side handling on CodeHarborHub.
Learn the HTML input type hidden: sending values the visitor does not see, such as record ids, CSRF tokens, return pages, and multi-step state. Understand why hidden is not secret, why the server must never trust it, how it differs from the hidden attribute, disabled, and readonly, and common mistakes on CodeHarborHub.
Learn the HTML input type month: picking a year and month, the yyyy-mm value format, min, max, and step in months, valueAsNumber (months since 1970), browser support and a text fallback with pattern, card expiry and billing periods, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML input type number: min, max, and step, how validation works (rangeUnderflow, rangeOverflow, stepMismatch, badInput), decimals and money, spinner arrows and mouse-wheel surprises, when not to use number (phones, postal codes, card numbers), and common mistakes on CodeHarborHub.
Learn the HTML input type password: how it masks characters, what it does not protect, the autocomplete values current-password and new-password, a show-password toggle that is accessible, minlength and pattern rules, password managers, HTTPS, and common security mistakes on CodeHarborHub.
Learn the HTML input type radio: radio button groups with the same name, the value attribute, what is sent, checked and required, keyboard arrow-key behaviour, why you cannot untick a radio, fieldset and legend, an Other option with a text field, styling, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML input type range: the slider, its min, max, and step defaults, the always-present midpoint value, showing the value with the output element, tick marks with datalist, pairing a slider with a number field, keyboard controls, styling the track and thumb, accessibility with aria-valuetext, and common mistakes on CodeHarborHub.
Learn the HTML input type search: how it differs from text, the clear button, the search keyboard key, the search landmark (the search element and role=search), GET forms with name=q, live filtering, accessible result counts, and common mistakes on CodeHarborHub.
Learn the HTML input type tel for phone numbers: the phone keypad, why the browser does not validate or format numbers, pattern and inputmode, autocomplete values, international formats (E.164), tel links, and common mistakes on CodeHarborHub.
Learn the HTML input type text: the default single-line text field. Understand its attributes (value, placeholder, maxlength, minlength, size, pattern, readonly, autocomplete, spellcheck, dirname), when to choose a more specific type, how whitespace is handled, names and usernames for a global audience, and common mistakes on CodeHarborHub.
Learn the HTML input type url for web addresses: what counts as a valid URL, why a scheme like https:// is required, restricting to http and https with pattern, autocomplete, trimming, the javascript: danger, safe ways to display user links, and common mistakes on CodeHarborHub.
Learn the HTML input type week: picking a week of the year, the yyyy-Www value format, ISO 8601 week rules (Monday start, 52 or 53 weeks), min, max, and step, converting a week to dates, browser support and a fallback, timesheets and weekly planners, and common mistakes on CodeHarborHub.
Learn the HTML input types submit, reset, button, and image: how the submit button sends a form, how to use several submit buttons with name and value, formaction and formnovalidate overrides, why reset restores default values (not blanks), implicit submission with the Enter key, preventing double submits, and common mistakes on CodeHarborHub.
Learn the HTML label element: how to name every form field with for and id, wrap controls inside labels, why placeholders are not labels, how labels improve clicking and screen reader support, visually hidden labels, hints and required markers, and common mistakes on CodeHarborHub.
Learn the HTML min, max, and step attributes: limiting numbers, ranges, dates, times, months, and weeks, how the step base works, the rangeUnderflow, rangeOverflow, and stepMismatch validity flags, setting today as a minimum date, linking two date fields, money and decimal pitfalls, and why the server must check ranges again.
Learn the HTML minlength and maxlength attributes: setting minimum and maximum text lengths on inputs and textareas, how browsers count characters (UTF-16 code units, emoji, and line breaks), the tooShort and tooLong validity flags, accessible character counters, sensible limits for passwords and names, and why the server must enforce limits too.
Learn the HTML form enctype attribute: application/x-www-form-urlencoded, multipart/form-data, and text/plain, why file uploads need multipart, what a multipart request body looks like, using FormData with fetch without setting the Content-Type, formenctype on buttons, and safe server-side handling of uploaded files, size limits, and filenames.
Learn the HTML option and optgroup elements: the value, selected, disabled, and label attributes, how text and value differ, grouping long lists with optgroup, disabled options and groups, how the default choice is picked, adding and removing options with JavaScript, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML pattern attribute: how regular expressions validate text fields, which input types support it, the implicit anchoring rule, writing helpful title messages, common patterns for codes and usernames, why strict patterns for names and phone numbers fail global visitors, the patternMismatch validity flag, and why the server must validate again.
Learn the HTML required attribute: which form controls support it, how it behaves for text, checkboxes, radio groups, selects, and files, the :required and :optional CSS pseudo-classes, how to mark required fields accessibly with aria-required and clear labels, whitespace-only values, and why the server must still check for missing data.
Learn the HTML select element for dropdown lists: building a dropdown with option, the placeholder option pattern with required, what is sent, multiple selection and the size attribute, change events, dependent dropdowns, keyboard use, styling limits, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML textarea element for multi-line text: rows and cols, the starting text between the tags, maxlength and minlength, a live character counter, auto-growing height, wrap, resize, how line breaks are sent, showing user text safely, accessibility, and common mistakes on CodeHarborHub.
Learn secure HTML form design: never trusting the browser, server-side validation with allow-lists, HTTPS, escaping output to stop XSS, parameterised queries against SQL injection, CSRF tokens and SameSite cookies, safe password handling, rate limiting and bot defences, avoiding information leaks, safe file uploads, mass assignment, privacy and data minimisation, and a practical security checklist.
Capture hours, minutes, and seconds using input type='time' with native time pickers and step granularity configuration.