HTML Tutorial

The language for building web pages.

HTML Input Types

The type attribute of the <input> element specifies what kind of input field to display. If the type is omitted, it defaults to text.

All Input Types:

text, email, password, number, tel, url, date, time, datetime-local, month, week, color, range, file, checkbox, radio, submit, reset, button, hidden, image, search

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
<style>
  body{font-family:Arial; padding:15px;}
  label{display:block; margin:8px 0 2px; font-weight:bold; font-size:.9em;}
  input{padding:6px; border:1px solid #ccc; border-radius:4px;}
</style>
</head>
<body>
  <label>Text:</label>       <input type="text" placeholder="Enter text">
  <label>Email:</label>      <input type="email" placeholder="name@email.com">
  <label>Password:</label>   <input type="password" placeholder="Password">
  <label>Number:</label>     <input type="number" min="1" max="100" value="10">
  <label>Date:</label>       <input type="date">
  <label>Color:</label>      <input type="color" value="#4e54c8">
  <label>Range (0-100):</label><input type="range" min="0" max="100" value="50">
  <label>Checkbox:</label>   <input type="checkbox" checked> I agree
  <label>Radio:</label>
  <input type="radio" name="r" value="html"> HTML
  <input type="radio" name="r" value="css">  CSS
  <label>File:</label>       <input type="file">
</body>
</html>

Result

Topics

HTML Introduction HTML Introduction HTML Editors HTML Elements HTML Basic HTML Attributes HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Block & Inline HTML Div HTML Classes HTML Id HTML Iframes HTML JavaScript HTML Head HTML Layout HTML Responsive HTML Entities HTML Forms HTML Input Types HTML Canvas HTML SVG HTML Video HTML Audio HTML Geolocation HTML Web Storage HTML Favicon HTML Semantics HTML Buttons HTML Computercode HTML Symbols HTML Emojis HTML Drag and Drop HTML Form Elements HTML Accessibility HTML YouTube

HTML Tutorial

Course Topics

HTML Input Types

HTML Input Types

All Input Types:

Try It Yourself

Topics