A practical, interactive guide to all 22 HTML5 input types — with live previews, copy-ready code, and real-world form patterns.
https://thewestboy.github.io/html-input-types-reference
- Features
- Tech Stack
- Project Structure
- Installation
- Getting Started
- Configuration
- Usage
- Responsive Design
- Performance
- Accessibility
- Browser Support
- Deployment
- Learning Goals
- Roadmap
- Contributing
- FAQ
- License
- Author
- 📋 22 input types, fully documented — text, email, password, search, tel, url, number, range, date, time, month, week, datetime-local, checkbox, radio, color, file, submit, reset, button, image, hidden
- 📝 Live previews — every card has a working input you can interact with
- 📋 One-click copy — copy buttons on every code block with visual feedback
- 🧪 Real registration form — a complete sign-up flow combining multiple input types
⚠️ Common mistakes section — side-by-side wrong vs. correct markup with explanations- 📊 Cheat sheet table — quick-reference table with type, purpose, example, and browser support
- 🎨 Dark theme design — glassmorphism cards, subtle glows, and native dark form controls via
color-scheme: dark - 📱 Fully responsive — clean layouts from 320px mobile to large desktop
- ♿ Accessibility-minded — semantic HTML, proper labels, focus-visible styles, reduced-motion support
- ✨ Interactive polish — scroll progress bar, section highlighting, reveal-on-scroll animations, hero parallax tilt, back-to-top button
| Layer | Technology |
|---|---|
| Markup | HTML5 (semantic elements, ARIA roles, SVG icon sprite) |
| Styling | CSS3 (custom properties, Grid, Flexbox, clamp(), backdrop-filter, CSS masking) |
| Scripting | Vanilla JavaScript (ES6+, no dependencies) |
| Fonts | Inter (UI) + JetBrains Mono (code) via Google Fonts |
| Build Tooling | None — zero-config static site |
| Package Manager | None — no package.json or external packages |
ℹ️ This project intentionally ships with no framework, bundler, or dependency — it's pure HTML/CSS/JS, runnable by simply opening
index.htmlor serving the folder statically.
html-input-types-reference/
├── index.html # Single-page document (all sections, modals, form)
├── style.css # Complete stylesheet — design tokens, layout, responsive rules
├── script.js # All client-side behavior — player, modals, form, interactions
├── images/
│ └── cover.png # Repository cover image
├── README.md # This file
└── LICENSE.md # MIT License
The entire site is contained in three files. No node_modules, no build output, no external assets beyond the two Google Fonts requests.
No build step, no dependencies, no package manager required.
# Clone the repository
git clone https://github.com/thewestboy/html-input-types-reference.git
# Move into the project directory
cd html-input-types-referenceThat's it — there is nothing to npm install.
You can run this project in two ways:
Option 1 — Open directly
Simply open index.html in your browser.
Option 2 — Serve locally (recommended)
# Using Python
python3 -m http.server 8000
# Or using Node's http-server (if installed globally)
npx http-server .Then open http://localhost:8000 in your browser.
There are no environment variables or .env files — all configuration lives directly in the source files:
| What | Where |
|---|---|
| Site metadata (title, description, OG tags) | index.html <head> |
| Design tokens (colors, spacing, fonts, radii) | :root CSS custom properties in style.css |
| Section content and markup | index.html body |
| Interactive behavior | script.js |
📝 Before deploying: Update the
<meta>tags inindex.htmlwith your own site description and Open Graph data if you fork this project.
This project is a reference, not a library. Use it to:
- Look up an input type — jump to the relevant section via the nav or in-page links
- Copy code — click the copy button on any code block to grab the markup
- Test on mobile — open the page on a phone to see how each input type triggers the correct virtual keyboard
- Check the cheat sheet — bookmark the table section for a quick lookup of all 22 types
- Review the mistakes section — avoid common pitfalls like using
type="number"for phone numbers
The layout adapts across five breakpoints:
| Range | Layout |
|---|---|
| 320–480px | Single column, stacked hero CTAs, full-width cards, 16px input font (prevents iOS zoom) |
| 481–640px | Two-column float chips, maintained card spacing |
| 641–860px | Two-column grids for cards, side-by-side form rows |
| 861–1024px | Three-column float chips, two-column card grids |
| 1025–1280px | Four-column float chips, full desktop layout |
| 1281px+ | Original desktop design |
Touch devices get enhanced tap targets (44px minimum) via the pointer: coarse media query.
| Metric | Value |
|---|---|
| Total page weight | ~116 KB (HTML + CSS + JS) |
| External requests | 2 (Google Fonts) |
| JavaScript size | 6.2 KB (unminified) |
| CSS size | 46.9 KB (unminified) |
| No render-blocking JS | All scripts are deferred via async IIFE |
| Passive scroll listeners | { passive: true } on scroll events |
will-change hints |
Applied to animated elements for GPU compositing |
The page scores well on Core Web Vitals because there is no JavaScript framework to hydrate, no large CSS framework to parse, and no external images to fetch.
- Semantic HTML —
<main>,<nav>,<section>,<article>,<form>, and proper heading hierarchy - Labels — Every interactive input has an associated
<label>(not just placeholder text) - Focus management — Visible focus rings, logical tab order, and keyboard-navigable mobile menu
- Screen readers —
aria-label,aria-hidden, andsr-onlytext where visual labels aren't sufficient - Motion —
prefers-reduced-motionrespects user settings and disables animations - Color contrast — Text colors meet WCAG AA standards against the dark background
- Tables — Sticky headers and horizontal scroll with touch momentum on narrow screens
| Browser | Supported |
|---|---|
| Chrome (latest) | ✅ |
| Firefox (latest) | ✅ |
| Safari (latest) | ✅ |
| Edge (latest) | ✅ |
| iOS Safari | ✅ |
| Android Chrome | ✅ |
| IE11 | ❌ |
Relies on modern CSS (Grid, custom properties) and ES6+ JavaScript — no transpilation or polyfills are included.
This is a static site, so it can be deployed to any static host with zero build configuration.
Deploy to Netlify
- Push this repository to GitHub.
- In Netlify, click Add new site → Import an existing project.
- Select the repository — leave the build command empty and set the publish directory to
/. - Deploy.
Deploy to Vercel
- Push this repository to GitHub.
- In Vercel, click Add New → Project and import the repo.
- Framework preset: Other. No build command required.
- Deploy.
Deploy to GitHub Pages
- Push this repository to GitHub.
- Go to Settings → Pages.
- Set the source branch to
mainand the folder to/ (root). - Save — your site will be live at
https://thewestboy.github.io/html-input-types-reference/.
If you're studying this codebase, here are the specific techniques worth noting:
- Custom properties (variables) for a maintainable design system
clamp()for fluid typography that scales smoothly between breakpointsbackdrop-filterfor glassmorphism card effects- CSS Grid with
minmax(0, 1fr)to prevent overflow in dense layouts color-scheme: darkto theme native form controls (calendars, checkboxes, file inputs)- CSS masking for the subtle grid background fade
- Keyframe animations with custom easing curves
- Intersection Observer API for scroll-triggered reveals and nav section highlighting
- Clipboard API with graceful fallback to
document.execCommand requestAnimationFramefor smooth parallax tilt without jank- Passive event listeners for scroll performance
- Touch-friendly event handling for mobile menu dismissal
- SVG sprite sheets — all 33 icons are defined once and referenced via
<use> - Semantic sectioning — proper use of
<section>,<article>, and<form> - Native input behavior — leveraging browser validation, keyboards, and pickers instead of custom widgets
- Add
inputmodeattribute examples alongside each type - Include
autocompleteattribute recommendations - Add a "copy all" button for the full registration form markup
- Include
patternregex examples forteland custom validations - Add a contrast checker tool for the color input demo
- Dark/light theme toggle (currently dark-only)
- Search/filter the cheat sheet table
- Print-friendly stylesheet for the cheat sheet
This is a personal reference project, but suggestions and corrections are welcome. If you spot an error in the documentation or a browser support note that needs updating, feel free to open an issue.
- Fork the repository
- Create a feature branch (
git checkout -b fix/typo-or-improvement) - Commit your changes
- Open a pull request
Please keep the scope focused — this is a reference page, not a component library.
Do I need Node.js or npm to run this?
No. This is a pure static site — just open index.html or serve the folder with any static file server.
Why does the page look dark?
The design is intentionally dark-themed. There is no light mode toggle yet — it's on the roadmap.
Can I use this as a template for my own reference site?
Yes — it is MIT licensed. Swap out the content, branding, colors, and it is ready to go.
This project is licensed under the MIT License. See the LICENSE file for details.
TheAria Azimi
- GitHub: @thewestboy
- LinkedIn: TheAria Azimi
- Repository: html-input-types-reference