Runnable HTML Docs: Input Types

Q: How many input types are there in HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url and week. An unknown or missing type behaves as text.

Q: What is the default input type in HTML?

text. An with no type, or with a type the browser does not know, is a single-line text field.

Q: Should I use type="number" for phone numbers or zip codes?

No. number is for quantities: it adds spin buttons, and it rejects the +, spaces and hyphens that phone numbers contain. Use type="tel" for phone numbers, and type="text" with inputmode="numeric" for codes like zip codes and card numbers.

Q: What format does input type date use?

The value is always YYYY-MM-DD, such as 2026-09-24, whatever format the reader sees on screen. The display follows the reader's locale; the submitted and scripted value does not.

Q: Does the input tag need a closing tag?

No. is a void element: write . A closing is invalid, and the self-closing slash in is allowed but does nothing.

The input tag and its types

<input> is a form field, and its type attribute decides which kind. The same tag makes a text box, a slider, a date picker or a color picker. Try each field below and press Submit to see what the form sends:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Input types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: grid; grid-template-columns: 90px auto; align-items: center; gap: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>text <input type="text" name="text" value="Hello"></label>
    <label>email <input type="email" name="email" value="ada@example.com"></label>
    <label>password <input type="password" name="password" value="secret"></label>
    <label>number <input type="number" name="number" value="3" min="1" max="10"></label>
    <label>range <input type="range" name="range" min="0" max="100" value="40"></label>
    <label>date <input type="date" name="date" value="2026-09-24"></label>
    <label>color <input type="color" name="color" value="#2563eb"></label>
    <label>checkbox <input type="checkbox" name="checkbox" value="on" checked></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

<input> is a void element, so it has no closing tag. Its name is the key the value is sent under, and value is the starting value. A missing or misspelled type gives a plain text field.

All HTML input types

`type`	What it is	Notes
`text`	One line of text	The default
`password`	Text shown as dots	Not encrypted by itself; send it over HTTPS
`email`	An email address	Validates the format; `@` key on phone keyboards
`url`	A web address	Must start with a scheme such as `https://`
`tel`	A phone number	Phone keypad on mobile, no format check
`search`	A search box	Often shows a clear button
`number`	A number	Spin buttons, `min`, `max`, `step`
`range`	A slider	Imprecise by design; the value is a number
`date`	A date	Value is `YYYY-MM-DD`
`time`	A time of day	Value is `HH:MM` (24-hour)
`datetime-local`	Date and time, no time zone	Value is `YYYY-MM-DDTHH:MM`
`month`	A year and month	Not supported in every browser
`week`	A year and week number	Not supported in every browser
`color`	A color picker	Value is `#rrggbb` in lowercase
`checkbox`	An on/off box	See HTML checkbox
`radio`	One choice out of a group	See HTML radio button
`file`	A file chooser	`accept`, `multiple`
`hidden`	A value sent but not shown	For IDs and tokens
`submit`	A submit button	`<button type="submit">` is more flexible
`reset`	A reset button	Rarely a good idea
`button`	A button that does nothing by itself	For JavaScript
`image`	A submit button drawn as an image	Also sends the click coordinates

Text types and phone keyboards

email, url, tel, search and text all look like a text box on a desktop. The difference is validation and, on phones, which keyboard opens. The border in this example turns green or red as the browser judges the value:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; padding: 4px 8px; border: 2px solid #9ca3af; border-radius: 6px; }
    input:valid { border-color: #16a34a; }
    input:invalid { border-color: #dc2626; }
  </style>
</head>
<body>
  <form>
    <label>email <input type="email" name="email" value="ada@example"></label>
    <label>url <input type="url" name="site" value="example.com"></label>
    <label>tel <input type="tel" name="phone" value="+1 555 0100"></label>
    <label>text with inputmode="numeric" <input type="text" name="zip" inputmode="numeric" pattern="[0-9]{5}" value="02134"></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

ada@example is a valid email to the browser: it only checks for text, @ and a domain, not that the domain has a dot. Real checking happens on the server.
example.com is not a valid url, because it has no scheme. https://example.com is.
tel accepts anything. Phone formats differ too much between countries, so there is no built-in check; add a pattern if you need one.
inputmode="numeric" asks phones for a digit keyboard without the problems of type="number", which is why it is the right choice for zip codes, one-time codes and card numbers.

number and range

Both take min, max and step. number is for exact values; range is a slider for values where the exact number matters less. A range slider shows no number, so pair it with an <output>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>number and range</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
  </style>
</head>
<body>
  <form>
    <label>Tickets
      <input type="number" name="tickets" min="1" max="8" step="1" value="2">
    </label>
    <label>Price per kg
      <input type="number" name="price" min="0" step="0.01" value="4.99">
    </label>
    <label>Volume
      <input type="range" name="volume" id="volume" min="0" max="100" step="5" value="60">
      <output for="volume" id="shown">60</output>
    </label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const volume = document.querySelector('#volume');
    volume.addEventListener('input', () => {
      document.querySelector('#shown').textContent = volume.value;
    });
  </script>
</body>
</html>

step defaults to 1 for number, so a price field without step="0.01" rejects 4.99 when the form is submitted. In JavaScript, input.value is always a string; use input.valueAsNumber to get a number.

Dates and times

The date and time types open the browser's own picker. What the reader sees follows their locale (09/24/2026, 24.09.2026), but the value is always the same fixed format:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Date and time</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    code { background: #e5e7eb; padding: 2px 6px; }
  </style>
</head>
<body>
  <form>
    <label>date <input type="date" name="date" value="2026-09-24" min="2026-01-01"></label>
    <label>time <input type="time" name="time" value="14:30"></label>
    <label>datetime-local <input type="datetime-local" name="when" value="2026-09-24T14:30"></label>
  </form>
  <p>Values: <code id="out"></code></p>

  <script>
    const form = document.querySelector('form');
    const show = () => {
      document.querySelector('#out').textContent =
        [...form.elements].map((f) => f.value).join('  |  ');
    };
    form.addEventListener('input', show);
    show();
  </script>
</body>
</html>

That fixed format is what the server receives and what JavaScript reads, so you never have to parse "24.09.2026". min and max take the same format. datetime-local has no time zone: if it matters, convert on the server using the reader's zone.

color and file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>color and file</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
    #swatch { display: inline-block; width: 60px; height: 24px; border-radius: 4px; vertical-align: middle; }
  </style>
</head>
<body>
  <form>
    <label>Theme color <input type="color" name="color" id="color" value="#16a34a"></label>
    <p>Preview: <span id="swatch"></span></p>
    <label>Photos <input type="file" name="photos" accept="image/*" multiple></label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const color = document.querySelector('#color');
    const paint = () => { document.querySelector('#swatch').style.background = color.value; };
    color.addEventListener('input', paint);
    paint();
  </script>
</body>
</html>

accept="image/*" limits the file picker to images (and offers the camera on phones); it also takes extensions, like accept=".pdf,.docx". It is only a hint for the picker, so check the file type on the server. multiple allows several files. A real upload also needs method="post" and enctype="multipart/form-data" on the form.

Suggestions with datalist

A <datalist> gives a text field a list of suggestions while still allowing any value. Connect them with the list attribute:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datalist</title>
</head>
<body>
  <form>
    <label>Language
      <input name="language" list="languages" placeholder="Start typing">
    </label>
    <datalist id="languages">
      <option value="JavaScript"></option>
      <option value="Python"></option>
      <option value="Java"></option>
      <option value="Rust"></option>
    </datalist>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Type "ja" in the field to see the matching suggestions. Unlike a select, the reader can type a value that is not in the list.

Attributes that work on inputs

Attribute	Does
`name`	The key the value is submitted under
`value`	The starting value
`placeholder`	A hint shown while the field is empty (not a label)
`required`	Must be filled in before submitting
`disabled`	Cannot be used, and is not submitted
`readonly`	Cannot be edited, but is submitted
`autocomplete`	What to autofill: `email`, `name`, `current-password`, `one-time-code`, `off`
`min`, `max`, `step`	Limits for numbers, ranges, dates and times
`minlength`, `maxlength`	Length limits for text types
`pattern`	A regular expression the whole value must match
`inputmode`	Which phone keyboard to show: `numeric`, `decimal`, `email`, `tel`, `url`
`list`	The `id` of a `<datalist>`
`multiple`	Several values, for `email` and `file`
`accept`	File types for `file`

Common mistakes

type="number" for phone numbers, zip codes or card numbers. They are not quantities. Use tel or text with inputmode="numeric".
A price field without step="0.01". Decimal values fail validation.
Using placeholder as the label. It disappears as soon as the reader types.
Relying on accept or type="email" for security. They are conveniences; the server checks again.
type="month" or type="week" without a fallback. Some browsers show a plain text field.
A closing </input> tag. <input> is void.

Frequently Asked Questions

How many input types are there in HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url and week. An unknown or missing type behaves as text.

What is the default input type in HTML?

text. An <input> with no type, or with a type the browser does not know, is a single-line text field.

Should I use type="number" for phone numbers or zip codes?

No. number is for quantities: it adds spin buttons, and it rejects the +, spaces and hyphens that phone numbers contain. Use type="tel" for phone numbers, and type="text" with inputmode="numeric" for codes like zip codes and card numbers.

What format does input type date use?

The value is always YYYY-MM-DD, such as 2026-09-24, whatever format the reader sees on screen. The display follows the reader's locale; the submitted and scripted value does not.

Does the input tag need a closing tag?

No. <input> is a void element: write <input type="text" name="city">. A closing </input> is invalid, and the self-closing slash in <input /> is allowed but does nothing.

Related concepts