HTML5 Input Types

New Input Types

HTML5 added over 10 new input types that show appropriate keyboards on mobile and provide native validation without JavaScript.

Example

<form>
  <input type="email"          placeholder="Email address">
  <input type="tel"            placeholder="Phone number">
  <input type="url"            placeholder="https://example.com">
  <input type="number"         min="1" max="100" step="1">
  <input type="range"          min="0" max="100" value="50">
  <input type="date">
  <input type="time">
  <input type="datetime-local">
  <input type="color"          value="#0d6efd">
  <input type="search"         placeholder="Search...">
  <input type="week">
  <input type="month">
</form>

HTML

Full Editor

Pro Tip

HTML5 input types show the correct keyboard on mobile automatically — no JS needed.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned