DEV Community

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

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay