HTML5 Input Types

HTML5 introduced many new input types that make forms more powerful and user-friendly.

These types help browsers show appropriate keyboards on mobile, validate data, and give better UI.

Common HTML5 Input Types

1. type="text"

Basic single-line text input.

<label>Name:</label>
<input type="text" name="name">

2️. type="email"

Validates input to be a valid email format.

<label>Email:</label>
<input type="email" name="email" placeholder="example@example.com">

3️. type="number"

Allows only numbers, with optional min and max.

<label>Age:</label>
<input type="number" name="age" min="1" max="100">

4️. type="tel"

Used for phone numbers. On mobile, shows number keypad.

<label>Phone:</label>
<input type="tel" name="phone" placeholder="+91-XXXXXXXXXX">

5️. type="url"

Validates for proper URL format.

<label>Website:</label>
<input type="url" name="website" placeholder="website url">

6️. type="password"

Hides the characters entered.

<label>Password:</label>
<input type="password" name="passwo

7️. type="date"

Shows a date picker.

<label>Birthday:</label>
<input type="date" name="dob">

8️. type="time"

Selects time.

<label>Meeting Time:</label>
<input type="time" name="meeting_time">

9️. type="range"

Creates a slider.

<label>Volume:</label>
<input type="range" name="volume" min="0" max="100">

1️0. type="color"

Color picker.

<label>Choose Color:</label>
<input type="color" name="favcolor">

1️1️. type="search"

Styled for search input.

<label>Search:</label>
<input type="search" name="query">

1️2️. type="checkbox"

Multiple selections.

<label><input type="checkbox" name="interest" value="coding"> Coding</label>
<label><input type="checkbox" name="interest" value="music"> Music</label>

1️3️. type="radio"

Single selection among options.

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

1️4️. type="file"

For uploading files.

<label>Upload File:</label>
<input type="file" name="file">

Example form:

<form>
  <input type="text" name="username" placeholder="Username"><br>
  <input type="email" name="email" placeholder="Email"><br>
  <input type="password" name="password" placeholder="Password"><br>
  <input type="date" name="dob"><br>
  <input type="number" name="quantity" min="1" max="10"><br>
  <input type="color" name="color"><br>
  <input type="range" min="0" max="100" value="50"><br>
  <input type="file" name="file"><br>
  <button type="submit">Submit</button>
</form>

HTML5 Input Types

On this page