Docs ejecutables de HTML: Tipos de input

Q: ¿Cuántos tipos de input hay en HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url y week. Un tipo desconocido o ausente se comporta como text.

Q: ¿Cuál es el tipo de input por defecto en HTML?

text. Un sin type, o con un tipo que el navegador no conoce, es un campo de texto de una sola línea.

Q: ¿Debo usar type="number" para teléfonos o códigos postales?

No. number es para cantidades: añade botones de incremento y rechaza el +, los espacios y los guiones que tienen los números de teléfono. Usa type="tel" para teléfonos, y type="text" con inputmode="numeric" para códigos como el código postal y los números de tarjeta.

Q: ¿Qué formato usa input type date?

El valor siempre es YYYY-MM-DD, como 2026-09-24, sea cual sea el formato que el lector ve en pantalla. La presentación sigue la configuración regional del lector; el valor que se envía y que leen los scripts no.

Q: ¿La etiqueta input necesita etiqueta de cierre?

No. es un elemento vacío: escribe . Un de cierre no es válido, y la barra de autocierre en está permitida pero no hace nada.

La etiqueta input y sus tipos

<input> es un campo de formulario, y su atributo type decide de qué clase. La misma etiqueta crea un cuadro de texto, un control deslizante, un selector de fecha o un selector de color. Prueba cada campo de abajo y pulsa Submit para ver lo que envía el formulario:

<!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> es un elemento vacío, así que no tiene etiqueta de cierre. Su name es la clave con la que se envía el valor, y value es el valor inicial. Un type ausente o mal escrito da un campo de texto normal.

Todos los tipos de input en HTML

`type`	Qué es	Notas
`text`	Una línea de texto	El valor por defecto
`password`	Texto mostrado como puntos	No se cifra por sí solo; envíalo por HTTPS
`email`	Una dirección de correo	Valida el formato; tecla `@` en los teclados de teléfono
`url`	Una dirección web	Debe empezar por un esquema como `https://`
`tel`	Un número de teléfono	Teclado telefónico en móvil, sin comprobar el formato
`search`	Un cuadro de búsqueda	A menudo muestra un botón para borrar
`number`	Un número	Botones de incremento, `min`, `max`, `step`
`range`	Un control deslizante	Impreciso a propósito; el valor es un número
`date`	Una fecha	El valor es `YYYY-MM-DD`
`time`	Una hora del día	El valor es `HH:MM` (formato de 24 horas)
`datetime-local`	Fecha y hora, sin zona horaria	El valor es `YYYY-MM-DDTHH:MM`
`month`	Un año y un mes	No lo admiten todos los navegadores
`week`	Un año y un número de semana	No lo admiten todos los navegadores
`color`	Un selector de color	El valor es `#rrggbb` en minúsculas
`checkbox`	Una casilla de activar y desactivar	Consulta checkbox en HTML
`radio`	Una opción de un grupo	Consulta radio button en HTML
`file`	Un selector de archivos	`accept`, `multiple`
`hidden`	Un valor que se envía pero no se muestra	Para ID y tokens
`submit`	Un botón de envío	`<button type="submit">` es más flexible
`reset`	Un botón de reinicio	Rara vez es buena idea
`button`	Un botón que no hace nada por sí solo	Para JavaScript
`image`	Un botón de envío dibujado como imagen	También envía las coordenadas del clic

Tipos de texto y teclados de teléfono

email, url, tel, search y text parecen un cuadro de texto en el escritorio. La diferencia está en la validación y, en los teléfonos, en qué teclado se abre. El borde de este ejemplo se vuelve verde o rojo según juzga el navegador el valor:

<!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 es un correo válido para el navegador: solo comprueba que haya texto, @ y un dominio, no que el dominio tenga un punto. La comprobación real ocurre en el servidor.
example.com no es una url válida, porque no tiene esquema. https://example.com sí lo es.
tel acepta cualquier cosa. Los formatos de teléfono cambian demasiado entre países, así que no hay comprobación integrada; añade un pattern si la necesitas.
inputmode="numeric" pide a los teléfonos un teclado de dígitos sin los problemas de type="number", y por eso es la opción correcta para códigos postales, códigos de un solo uso y números de tarjeta.

number y range

Los dos aceptan min, max y step. number es para valores exactos; range es un control deslizante para valores en los que el número exacto importa menos. Un control deslizante no muestra ningún número, así que acompáñalo de un <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 vale 1 por defecto en number, así que un campo de precio sin step="0.01" rechaza 4.99 al enviar el formulario. En JavaScript, input.value siempre es una cadena; usa input.valueAsNumber para obtener un número.

Fechas y horas

Los tipos de fecha y hora abren el selector propio del navegador. Lo que ve el lector sigue su configuración regional (09/24/2026, 24.09.2026), pero el valor siempre tiene el mismo formato fijo:

<!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>

Ese formato fijo es lo que recibe el servidor y lo que lee JavaScript, así que nunca tienes que analizar "24.09.2026". min y max usan el mismo formato. datetime-local no tiene zona horaria: si importa, conviértela en el servidor con la zona del lector.

color y 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/*" limita el selector de archivos a imágenes (y ofrece la cámara en los teléfonos); también acepta extensiones, como accept=".pdf,.docx". Solo es una pista para el selector, así que comprueba el tipo de archivo en el servidor. multiple permite varios archivos. Una subida real necesita además method="post" y enctype="multipart/form-data" en el formulario.

Sugerencias con datalist

Un <datalist> le da a un campo de texto una lista de sugerencias y sigue permitiendo cualquier valor. Conéctalos con el atributo list:

<!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>

Escribe "ja" en el campo para ver las sugerencias que coinciden. A diferencia de un select, el lector puede escribir un valor que no está en la lista.

Atributos que funcionan en los inputs

Atributo	Hace
`name`	La clave con la que se envía el valor
`value`	El valor inicial
`placeholder`	Una pista que se muestra mientras el campo está vacío (no es una etiqueta)
`required`	Hay que rellenarlo antes de enviar
`disabled`	No se puede usar y no se envía
`readonly`	No se puede editar, pero se envía
`autocomplete`	Qué autocompletar: `email`, `name`, `current-password`, `one-time-code`, `off`
`min`, `max`, `step`	Límites para números, rangos, fechas y horas
`minlength`, `maxlength`	Límites de longitud para los tipos de texto
`pattern`	Una expresión regular con la que debe coincidir el valor entero
`inputmode`	Qué teclado de teléfono mostrar: `numeric`, `decimal`, `email`, `tel`, `url`
`list`	El `id` de un `<datalist>`
`multiple`	Varios valores, para `email` y `file`
`accept`	Tipos de archivo para `file`

Errores comunes

type="number" para teléfonos, códigos postales o números de tarjeta. No son cantidades. Usa tel o text con inputmode="numeric".
Un campo de precio sin step="0.01". Los valores decimales no pasan la validación.
Usar placeholder como etiqueta. Desaparece en cuanto el lector escribe.
Confiar en accept o type="email" para la seguridad. Son comodidades; el servidor vuelve a comprobar.
type="month" o type="week" sin alternativa. Algunos navegadores muestran un campo de texto normal.
Una etiqueta de cierre </input>. <input> es vacío.

Preguntas frecuentes

¿Cuántos tipos de input hay en HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url y week. Un tipo desconocido o ausente se comporta como text.

¿Cuál es el tipo de input por defecto en HTML?

text. Un <input> sin type, o con un tipo que el navegador no conoce, es un campo de texto de una sola línea.

¿Debo usar type="number" para teléfonos o códigos postales?

No. number es para cantidades: añade botones de incremento y rechaza el +, los espacios y los guiones que tienen los números de teléfono. Usa type="tel" para teléfonos, y type="text" con inputmode="numeric" para códigos como el código postal y los números de tarjeta.

¿Qué formato usa input type date?

El valor siempre es YYYY-MM-DD, como 2026-09-24, sea cual sea el formato que el lector ve en pantalla. La presentación sigue la configuración regional del lector; el valor que se envía y que leen los scripts no.

¿La etiqueta input necesita etiqueta de cierre?

No. <input> es un elemento vacío: escribe <input type="text" name="city">. Un </input> de cierre no es válido, y la barra de autocierre en <input /> está permitida pero no hace nada.

Conceptos relacionados