← Back to HTML Course | Chapter 5: Forms | Lesson 4 of 7

HTML Input Types

Imagine filling out a paper form at a local clinic. If the form has a box labeled 'Date of Birth', you expect to write a date. If it asks for your phone number, you write numbers. If the form just had blank, unlabeled boxes with zero formatting guidance, users would write all kinds of messy inputs. HTML input types serve as those guides for web browsers. By setting the type attribute, you tell the browser exactly what kind of data you expect, such as emails, passwords, dates, or colors. This helps browsers display custom keyboards on mobile devices and automatically validate user inputs before they are submitted to your server.

In this page:

  1. Text Inputs
  2. Email and URL
  3. Numeric Inputs
  4. Date and Time
  5. Selection
  6. Action buttons
  7. Special
Syntax
markup 
<input type="text" name="name">
<input type="password" name="name">
<input type="checkbox" name="name" value="value">
<input type="radio" name="name" value="value">
<input type="submit" value="Label">

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.
  • Accepted values:
  • text — single-line text
  • password — masked text
  • search — search field
  • tel — telephone number
  • hidden — not displayed but submitted
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

markup 
<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.
  • Accepted values:
  • email — validated email address; multiple allowed
  • url — validated absolute URL
  • Both support placeholder, required, pattern, minlength, maxlength
Warning: Native browser validation only checks the formatting pattern; always verify and sanitize inputs on your server.

Example: Email and URL

markup 
<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.
  • Accepted values:
  • number — min | max | step (number | any)
  • range — slider; min | max | step; default 0-100
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

markup 
<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.
  • Accepted values:
  • date — YYYY-MM-DD
  • time — HH:MM
  • datetime-local — YYYY-MM-DDTHH:MM
  • month — YYYY-MM
  • week — YYYY-Www
  • min / max / step limit accepted dates
Warning: Legacy browsers do not support native date pickers, automatically falling back to a standard text input instead.

Example: Date and Time

markup 
<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.
  • Accepted values:
  • checkbox — zero or more; checked
  • radio — one per name group; checked
  • color — #rrggbb
  • file — accept | multiple | capture
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

markup 
<input type="radio" name="plan" value="basic"> Basic
<input type="checkbox" name="agree"> Agree

Action 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.
  • Accepted values:
  • submit — submits the form
  • reset — resets the form
  • button — no default action
  • image — graphical submit; needs src and alt
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

markup 
<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.
  • Accepted values:
  • file — accept (e.g. image/*, .pdf) | multiple
  • hidden — value is submitted, not shown
  • color — #rrggbb
  • range — min | max | step
Warning: Never store sensitive user credentials or keys inside hidden inputs, as anyone can inspect the HTML code using developer tools.

Example: Special

markup 
<input type="color">
<input type="file" accept="image/*">
<input type="hidden" name="token" value="abc123">
Live Example
Related Topics

HTML Input Attributes · HTML Input Form Attributes · HTML Input Validation · HTML Form Elements

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using standard text fields for passwords, exposing sensitive user codes on screen.
  2. Forgetting to specify identical name attributes on radio buttons, allowing users to select multiple options.
  3. Omitting accept attributes on file inputs, allowing users to select and upload incompatible file formats.
Chapter Summary
  • 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.
Browser Support

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:

← Previous Lesson HTML Optgroup Next Lesson → HTML Input Attributes

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.