HTML Input Types
In this page:
Text Inputs
Text inputs gather standard alphanumeric characters. By selecting different types, you can mask password fields for privacy, customize search configurations, or optimize telephone layout pads on mobile devices.
Note: Use specialized text types like search and tel to trigger optimized software keyboards on mobile displays.
Warning: Never use the standard text type for sensitive inputs like passwords, as the typed characters will be displayed openly on the screen.
Example: Text Inputs
<input type="text" name="username">
<input type="password" name="password">Email and URL
The email and URL types enforce basic syntactic validation. They tell the browser to check that the entered text matches standard email or web link formats before submitting, while optimizing mobile keyboard buttons like '@' or '.com'.
Note: Add the multiple attribute to your email input if you want to allow users to submit lists of addresses.
Warning: Native browser validation only checks the formatting pattern; always verify and sanitize inputs on your server.
Example: Email and URL
<input type="email" name="email">
<input type="url" name="website">Numeric Inputs
Numeric inputs restrict user entry to numbers. The number type allows users to click spin buttons to increase or decrease values, while the range type displays an adjustable slider bar, making it perfect for layout adjustments.
Note: Use min, max, and step attributes to define exact boundaries and incremental limits for your numeric selectors.
Warning: Do not use the number type for credit card numbers, zip codes, or phone numbers, as it can strip out essential leading zeros.
Example: Numeric Inputs
<input type="number" min="1" max="10">
<input type="range" min="0" max="100">Date and Time
Date and time inputs tell the browser to display a clean, built-in calendar or clock picker. This keeps your interface consistent and makes entering dates easy for mobile users, removing the need for heavy third-party calendar plugins.
Note: Define min and max attribute coordinates to prevent users from selecting invalid past or future calendar days.
Warning: Legacy browsers do not support native date pickers, automatically falling back to a standard text input instead.
Example: Date and Time
<input type="date">
<input type="time">Selection
Selection inputs let users choose from pre-set options. Radio buttons are used when users can select only one option from a grouped category, while checkboxes allow users to select multiple independent options at the same time.
Note: Wrap your selection inputs inside label tags to create larger, easily clickable touch targets.
Warning: Always assign the exact same name attribute to your radio buttons to group them, or users will be able to select multiple.
Example: Selection
<input type="radio" name="plan" value="basic"> Basic
<input type="checkbox" name="agree"> AgreeAction buttons
Action inputs create clickable controls that interact with your forms. Submit buttons package and send form data to the server, reset buttons clear all fields instantly, and image inputs act as graphical submission buttons.
Note: Use type="button" inside your forms to trigger custom JavaScript actions without reloading the page.
Warning: The image input type behaves exactly like a submit button, but it also transmits the exact pixel coordinates of where the user clicked.
Example: Action buttons
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="image" src="submit.png" alt="Submit">Special
Specialized inputs handle unique tasks. The color type launches a native color picker, the file type displays an uploader button for document transfers, and the hidden type passes background variables silently without displaying anything to the user.
Note: Always specify the accept attribute on your file inputs to restrict the allowed file formats.
Warning: Never store sensitive user credentials or keys inside hidden inputs, as anyone can inspect the HTML code using developer tools.
Example: Special
<input type="color">
<input type="file" accept="image/*">
<input type="hidden" name="token" value="abc123">- Using standard text fields for passwords, exposing sensitive user codes on screen.
- Forgetting to specify identical name attributes on radio buttons, allowing users to select multiple options.
- Omitting accept attributes on file inputs, allowing users to select and upload incompatible file formats.
- The input type attribute tells the browser what kind of data to expect in the field.
- Use email, URL, and number types to trigger specialized mobile keyboards and enable native browser validation.
- Use date, color, and file types to integrate built-in system selectors and widgets cleanly on your page.
All 22 standard input types are supported natively, with older browsers falling back to standard text fields if a type is unsupported.
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: