HTML input types complete guide

Text input types include text, password, email, tel, url and search, which are used to process various text data and provide format verification; 2. Numerical and range input types such as number, range, date, time, datetime-local, month and week, which support input and limitations of digital and time data; 3. Selection and file input types include checkbox, radio and file, which are used for multiple selection, single selection and file upload respectively; 4. Button and hidden input types include button, submit, reset and hidden, which are used for form operations and storage of invisible data; 5. Advanced input types color and image provide color selection and image submission functions; all input types should be combined with placeholder, required, autofocus and other attributes to enhance user experience, and cooperate with server-side verification to ensure data security, ultimately improving the accessibility, availability and accuracy of the form.

HTML input types are essential for creating interactive forms on web pages. They define what kind of data users can enter, how it's displayed, and how it's validated. With the evolution of HTML5, input types have expanded significantly, offering better user experience and built-in validation. Below is a complete guide to all standard HTML input types, their uses, and key attributes.

1. Text Input Types

These are used for textual input and include several variations.

type="text"

• The default input type.
• Used for single-line text input.
• Example:

   <input type="text" placeholder="Enter your name">

type="password"

• Masks input characters (usually with dots or asterisks).
• Automatically disables browser autofill in some cases.
• Example:

   <input type="password" placeholder="Enter password">

type="email"

• Validates input as a well-formed email address.
• Mobile browsers may show an email-friendly keyboard.
• Example:

   <input type="email" placeholder="name@example.com">

type="tel"

• Designed for telephone numbers.
• Triggers a numeric keypad on mobile devices.
• No automatic validation unless used with pattern .
• Example:

   <input type="tel" pattern="[0-9]{10}" placeholder="123-456-7890">

type="url"

• Expects a valid URL (eg, https://example.com ).
• Validates format on form submission.
• Example:

   <input type="url" placeholder="https://www.example.com">

type="search"

• Semantic for search fields.
• May display a clear button in some browsers.
• Styling can different slightly from text .
• Example:

   <input type="search" placeholder="Search...">

2. Numeric and Range Input Types

Used for numbers, dates, and ranges.

type="number"

• Accepts only numeric input.
• Can include min , max , and step attributes.
• Example:

   <input type="number" min="1" max="100" step="1" value="10">

type="range"

• Slider control for selecting a value within a range.
• Less precision than number , good for inputs like volume or rating.
• Often used with <output> to display value.
• Example:

   <input type="range" min="0" max="10" value="5" oninput="this.nextElementSibling.value = this.value">
  <output>5</output>

type="date"

• Opens a date picker.
• Format: YYYY-MM-DD .
• Example:

   <input type="date">

type="time"

• Select time (hours and minutes).
• Supports min , max , and step .
• Example:

   <input type="time" min="09:00" max="18:00">

type="datetime-local"

• Combines date and time without timezone.
• Example:

   <input type="datetime-local">

type="month"

• Selects a month and year.
• Format: YYYY-MM .
• Example:

   <input type="month">

type="week"

• Selects a week number and year.
• Format: YYYY-W## .
• Example:

   <input type="week">

3. Selection and File Input Types

For choosing from options or uploading files.

type="checkbox"

• Allows multiple selections.
• Use checked for default selection.
• Example:

   <input type="checkbox" name="interest" value="coding"> Coding
  <input type="checkbox" name="interest" value="design" checked> Design

type="radio"

• Allows one selection from a group.
• All inputs in the group must share the same name .
• Example:

   <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female

type="file"

• Lets users upload one or more files.
• Use accept to restrict file types.
• Add multiple for multiple files.
• Example:

   <input type="file" accept="image/*" multiple>

4. Button and Hidden Input Types

For actions and storing invisible data.

type="button"

• A clickable button with no default behavior.
• Usually used with JavaScript.
• Example:

   <input type="button" value="Click Me" onclick="alert(&#39;Hello&#39;)">

type="submit"

• HTML input types complete guides the form to the server.
• Default behavior: send form data.
• Example:

   <input type="submit" value="HTML input types complete guide Form">

type="reset"

• Resets all form fields to their initial values.
• Use sparingly — can frustrate users.
• Example:

   <input type="reset" value="Reset">

type="hidden"

• Stores data not visible to users.
• Often used to pass metadata (eg, user ID, session token).
• Example:

   <input type="hidden" name="userId" value="12345">

5. Advanced and Specialized Input Types

Newer types with specific purposes.

type="color"

• Opens a color picker.
• Value is a lowercase hex color (eg, #ff0000 ).
• Example:

   <input type="color" value="#ff0000">

type="image"

• Acts as a submit button using an image.
• Requires src and alt .
• Sends click coordinates ( x , y ) with form data.
• Example:

   <input type="image" src="submit.png" alt="HTML input types complete guide">

Key Attributes Common to Many Input Types

• placeholder – Hint text showed when empty.
• required – Makes field mandatory.
• disabled – Disables input.
• readonly – Prevents editing but submits value.
• autofocus – Focuses input on page load.
• autocomplete – Controls browser autofill (eg, on , off , name , email ).
• pattern – Regular expression for validation (works with text , tel , email , etc.).

Browser Support and Fallbacks

Old browsers may not support newer HTML5 input types (like date , color , email ). When unsupported:

• Browsers typically fall back to type="text" .
• Always use server-side validation — never rely solely on client-side input types.

For maximum compatibility:

• Use polyfills for date or color if needed.
• Test forms across browsers.

Summary of All HTML Input Types

Using the right input type improves accessibility, usability, and validation. Always pair them with proper labels ( <label for="id"></label> ) and consider mobile UX. While HTML5 input types are powerful, remember to validate on the server side — client-side features can be bypassed.

Basically, choose the input type that best matches your data needs, and let the browser help you enforce correctness.

The above is the detailed content of HTML input types complete guide. For more information, please follow other related articles on the PHP Chinese website!