📄️ Text
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.
📄️ Password
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.
📄️ Email
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.
📄️ Tel
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.
📄️ URL
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.
📄️ Search
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.
📄️ Number
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.
📄️ Date
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.
📄️ Time
Capture hours, minutes, and seconds using input type='time' with native time pickers and step granularity configuration.
📄️ Datetime-local
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.
📄️ Month
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.
📄️ Week
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.
📄️ Color
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.
📄️ Checkbox
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.
📄️ Radio
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.
📄️ File
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.
📄️ Range
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.
📄️ Hidden
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.
📄️ Submit, Reset, and Button
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.