HTML Input Types and Uses

I came across one of those infographic’s today detailing a couple of uses of the HTML input tag and decided to dig a bit deeper into the uses for it and was quite surprised to find quite a few I didn’t know of.

This is a reference primarily for me detailing the types and their uses. But as the saying goes, “Knowledge shared is knowledge doubled.” If even one person finds this useful, I’ll consider it a win.

text

• Description: A single-line text input field.
• Use case: Capturing names, addresses, search queries, etc.
• Example:

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

password

• Description: Similar to “text” but the characters entered are obscured.
• Use case: Capturing password or any confidential information.
• Example:

<input
  type="password"
  name="password"
  placeholder="Enter your password"
/>

submit

• Description: A button that submits the form.
• Use case: Submitting form data to the server.
• Example:

<input type="submit" value="Submit" />

reset

• Description: A button that resets all the form inputs to their default values.
• Use case: Letting users easily clear out the form.
• Example:

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

radio

• Description: Allows selection among multiple options but only one can be selected.
• Use case: Choosing gender, age groups, or any single-choice scenario.
• Example:

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

Male Female

checkbox

• Description: A box that can be toggled. Multiple boxes can be checked.
• Use case: Selecting multiple interests, settings, or any multi-choice scenario.
• Example:

<input type="checkbox" name="interest" value="books" /> Books
<input type="checkbox" name="interest" value="movies" /> Movies

Books Movies

button

• Description: A clickable button. It doesn’t have a default behaviour.
• Use case: To trigger JavaScript actions.
• Example:

<input
  type="button"
  value="Click me"
  onclick="{() => alert('Hello!')}"
/>

color

• Description: Allows users to pick a color.
• Use case: Picking a favourite color, setting theme color, etc.
• Example:

<input type="color" name="fav-color" value="#663399" />

date

• Description: Allows users to select a date.
• Use case: Choosing birthdate, event date, etc.
• Example:

<input type="date" name="birth-date" />

datetime-local

• Description: Allows users to pick a date and time, without the time zone.
• Use case: Setting reminders, events, etc.
• Example:

<input type="datetime-local" name="event-time" />

email

• Description: For inputting email addresses.
• Use case: Capturing user email for registration, subscriptions, etc.
• Example:

<input type="email" name="email" placeholder="Enter your email" />

file

• Description: Lets users select one or more files.
• Use case: Uploading images, documents, etc.
• Example:

<input type="file" name="my-file" />

hidden

• Description: Holds data that the user doesn’t see but is submitted with the form.
• Use case: Storing session data, user ID, etc.
• Example:

<input type="hidden" name="userID" value="12345" />

image

• Description: A graphical submit button.
• Use case: Using an image as a submit button.
• Example:

<input type="image" src="submit.png" alt="Submit Button" />

month

• Description: Lets users select a month and year.
• Use case: Selecting a month for monthly reports, subscriptions, etc.
• Example:

<input
  type="month"
  name="select-month"
  placeholder="YYYY-MM"
  pattern="d{4}-d{2}"
/>

number

• Description: For inputting numbers.
• Use case: Age, quantity of items, etc.
• Example:

<input type="number" name="age" min="0" max="100" />

range

• Description: A slider control to input a number in a range.
• Use case: Setting volume, brightness, or any other sliding scale value.
• Example:

<input type="range" name="volume" min="0" max="10" />

search

• Description: A search field.
• Use case: Search bars on websites.
• Example:

<input type="search" name="query" placeholder="Search..." />

tel

• Description: For inputting telephone numbers.
• Use case: Capturing user’s phone number.
• Example:

<input
  type="tel"
  name="phone"
  placeholder="Enter your phone number"
/>

time

• Description: Lets users select a time (hour and minute, and optionally second).
• Use case: Setting an alarm, choosing a time for a reservation, etc.
• Example:

<input type="time" name="alarm-time" />

url

• Description: For inputting URLs.
• Use case: Capturing user’s website, promotional links, etc.
• Example:

<input
  type="url"
  name="website"
  placeholder="Enter your website URL"
/>

week

• Description: Lets users select a week.
• Use case: Choosing a week for scheduling, reporting, etc.
• Example:

<input type="week" name="selectWeek" />