Forem

Cover image for HTML input types
Matt Miller
Matt Miller

Posted on • Edited on

HTML input types

The HTML input element is a fundamental building block of web forms, allowing users to input various types of data. Below are the most recent definitive HTML input types, along with detailed descriptions of each:

1 - Text (type="text"):

<input type="text">
Enter fullscreen mode Exit fullscreen mode
  • Used for single-line text input.
  • Commonly used for names, addresses, and general text input.

2 - Password (type="password"):

<input type="password">
Enter fullscreen mode Exit fullscreen mode
  • Masks input characters to obscure sensitive information.
  • Typically used for passwords and other confidential data.

3 - Number (type="number"):

<input type="number">
Enter fullscreen mode Exit fullscreen mode
  • Accepts numeric input.
  • Includes controls for incrementing and decrementing values.
  • Useful for fields like age, quantity, or any numerical input.

4 - Search (type="search"):

<input type="search">
Enter fullscreen mode Exit fullscreen mode
  • Optimized for search input fields.
  • May include built-in search functionalities depending on the browser.

5 - URL (type="url"):

<input type="url">
Enter fullscreen mode Exit fullscreen mode
  • Validates and restricts input to valid URL formats.
  • Useful for collecting website URLs or links.

6 - Email (type="email"):

<input type="email">
Enter fullscreen mode Exit fullscreen mode
  • Validates input to ensure it conforms to the email format.
  • Displays a warning if the input does not match the expected email pattern.

7 - Range (type="range"):

<input type="range">
Enter fullscreen mode Exit fullscreen mode
  • Renders a slider control for selecting numeric values within a specified range.
  • Useful for selecting values like volume, brightness, or any range-based input.

8 - Checkbox (type="checkbox"):

<input type="checkbox">
Enter fullscreen mode Exit fullscreen mode
  • Allows users to select one or more options from a list of choices.
  • Each checkbox operates independently and can be toggled on or off.

9 - Radio (type="radio"):

<input type="radio">
Enter fullscreen mode Exit fullscreen mode
  • Presents a list of mutually exclusive options.
  • Users can select only one option from the list.

10 - Time (type="time"):

<input type="time">
Enter fullscreen mode Exit fullscreen mode
  • Enables users to input a time value.
  • May include controls for selecting hours, minutes, and seconds.

11 - Month (type="month"):

<input type="month">
Enter fullscreen mode Exit fullscreen mode
  • Accepts input in the format "YYYY-MM" for specifying a month and year.
  • Typically used for selecting dates without specifying a specific day.

12 - Reset (type="reset"):

<input type="reset">
Enter fullscreen mode Exit fullscreen mode
  • Resets form controls to their default values.
  • Often used in conjunction with a submit button to provide users with the option to clear form data.

13 - Submit (type="submit"):

<input type="submit">
Enter fullscreen mode Exit fullscreen mode
  • Submits form data to the server for processing.
  • Initiates form submission when clicked by the user.

These HTML input types offer a wide range of functionalities, catering to diverse user input requirements in web forms. By leveraging these input types appropriately, developers can enhance the usability, accessibility, and overall user experience of web applications.


Enjoying the content? If you'd like to support my work and keep the ideas flowing, consider buying me a coffee! Your support means the world to me!

Buy Me A Coffee

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay