HTML5 New Input Types

HTML5 revolutionized web forms with a suite of new <input> types that bring validation, UI enhancements, and native controls — no JavaScript required. Let’s explore each one through simple, everyday examples.

Used to collect email addresses, this type includes built-in validation for @ and domain formatting.

<label>Your Email:</label>
<input type="email" name="email" required>

[ Shows input with validation error if format is incorrect ]

Validates that the entered value is a properly formatted web address.

<label>Website:</label>
<input type="url" name="homepage" placeholder="https://example.com">

Optimized for phone numbers — especially helpful on mobile devices where it brings up the dial pad.

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

Ideal for numeric inputs. You can set minimum, maximum, and step values to control the range.

<label>How many apples?</label>
<input type="number" name="quantity" min="1" max="10" step="1">

[ Displays up/down arrows and restricts value range ]

Displays a slider to select a number within a range — perfect for rating systems or volume controls.

<label>How ripe is your banana?</label>
<input type="range" name="ripeness" min="0" max="10">

Lets users pick a date using a native calendar UI.

<label>Pick a Cherry Date:</label>
<input type="date" name="cherrydate">

Opens a color picker for selecting a hex color value.

<label>Choose a Fruit Color:</label>
<input type="color" name="fruitcolor">

[ A clickable color swatch appears ]

• Built-in validation without JavaScript
• Mobile-friendly (context-aware keyboards)
• Cleaner and more semantic markup
• Improved accessibility and user experience

<form>
  Email: <input type="email" name="email" required><br>
  Phone: <input type="tel" name="phone"><br>
  Website: <input type="url" name="site"><br>
  Quantity: <input type="number" min="1" max="5"><br>
  Rating: <input type="range" min="0" max="100"><br>
  Favorite Date: <input type="date"><br>
  Favorite Color: <input type="color">
</form>

[ Interactive form with modern controls ]

HTML5 input types simplify form creation and validation. Today you explored:

• email, url, tel — for specific text formats
• number, range — for numeric input
• date, color — for UI-driven selections

With these tools, you can build modern forms that are accessible, reliable, and user-friendly.

Choose the option that lists all and only the correct statements.

1. email
2. url
3. color
4. password

Choose the option that lists all and only the correct statements.

1. email
2. url
3. number
4. range

Next up: Let’s take these inputs further by learning how to validate and enhance them using JavaScript — giving you complete control over form behavior and feedback.