AInput en HTML: guía exhaustiva con todos los tipos y usos explicados

Si te estás sumergiendo en el mundo del desarrollo web, hay un elemento fundamental del que tienes que tener un conocimiento profundo: el <input> en HTML. Este pequeño, pero versátil bloque de código es el encargado de facilitar una de las funciones más esenciales en cualquier página web moderna: la interacción del usuario con los formularios. Desde enviar un simple nombre, elegir una fecha o subir un archivo, pasando por validaciones y accesibilidad, el input lo hace prácticamente todo.

Conocer a fondo cómo funciona la etiqueta <input>, sus diversos tipos y atributos, es clave para poder manipular la experiencia del usuario, recolectar información y dar vida a nuestros proyectos web. En este artículo te lo vamos a contar absolutamente todo de forma clara, detallada y con ejemplos, para que no se te quede ningún cabo suelto. Prepárate para descubrir todo lo que debes saber sobre los inputs en HTML.

¿Qué es la etiqueta `<input>` en HTML?

La etiqueta <input> es un componente básico usado en formularios HTML. Sirve para capturar información del usuario a través de diferentes mecanismos como campos de texto, botones de selección, listas desplegables o subidas de archivo. Para obtener más información sobre otras características importantes, te recomendamos leer sobre el tema en el contexto de las funciones de entrada en HTML.

Cada tipo de input está definido por el atributo type. Este atributo determina el comportamiento específico y la apariencia del campo. Si no se especifica, por defecto se interpreta como text.

Su estructura general es muy sencilla:

<input type="text" name="usuario" placeholder="Escribe tu nombre">

Aunque sea una etiqueta autocontenida (no se cierra con </input>), esta puede personalizarse ampliamente con otros atributos que modifican su valor, visibilidad, validación y comportamiento.

Listado completo de tipos de input

HTML5 ha ampliado considerablemente el número de tipos posibles para los <input>. Aquí tienes un desglose de los más usados y cómo funcionan:

text: Campo de texto de una sola línea. Ideal para nombres, direcciones, etc.
password: Similar al texto, pero oculta los caracteres introducidos. Perfecto para contraseñas.
email: Acepta direcciones de correo electrónico y valida el formato antes de enviar.
number: Permite ingresar solo números. Puedes agregar min, max y step.
tel: Para introducir números de teléfono sin validación estricta.
url: Valida que se escriba una dirección web bien formada.
date: Selecciona fechas desde un calendario integrado.
time: Usa un reloj para elegir una hora.
datetime-local: Fecha y hora sin zona horaria.
month: Permite seleccionar solo mes y año.
week: Selecciona la semana del año.
checkbox: Casillas de verificación para múltiples opciones.
radio: Selección única entre varias opciones.
file: Permite subir archivos locales.
range: Control deslizante para seleccionar un número.
color: Selector gráfico de colores.
search: Campo optimizado para búsquedas.
image: Botón gráfico de envío con imagen integrada.
submit: Botón que envía el formulario.
reset: Restablece los valores del formulario.
button: Botón sin acción predefinida. Se combina con JavaScript.
hidden: Campo invisible usado para enviar valores sin interacción del usuario.

Atributos más comunes y útiles de un input

Los inputs en HTML pueden ir acompañados de múltiples atributos que controlan su comportamiento de forma específica. Algunos de los más utilizados son:

name: Asocia un nombre al input que se usará como clave al enviar el formulario.
placeholder: Muestra un texto indicativo dentro del campo de entrada.
required: Obliga al usuario a completar el campo antes de enviar el formulario.
readonly: El campo es visible pero no editable.
disabled: Campo inactivo, no se puede interactuar y no se envía al servidor.
value: Asigna el valor por defecto del input.
maxlength / minlength: Define la longitud máxima o mínima permitida.
pattern: Se usa para definir una expresión regular de validación.
autocomplete: Permite o impide que el navegador sugiera valores previamente utilizados.
autofocus: Coloca el cursor automáticamente en ese campo al cargar la página.
step: Indica los intervalos válidos para inputs numéricos. Ej: 5, 10, 0.01.
min / max: Valores mínimos y máximos aceptados.
multiple: Permite subir más de un archivo o seleccionar múltiples emails con type="email".

Subida de archivos con input file

Uno de los usos más prácticos es el input de tipo file, que habilita que el usuario suba documentos, imágenes o cualquier archivo local. Para tener más información sobre este tipo de funcionalidad, puedes consultar más sobre cómo manejar los inputs en tus formularios en el artículo de .

Ejemplo básico:

<form action="/subir" method="POST" enctype="multipart/form-data">
  <input type="file" name="documento">
  <input type="submit" value="Subir archivo">
</form>

Para permitir subir varios archivos a la vez, solo hay que añadir el atributo multiple:

<input type="file" name="archivos[]" multiple>

Recuerda que este tipo de input solo funciona con method=»POST» y enctype=»multipart/form-data».

Además, puedes definir tipos de archivos permitidos usando el atributo accept:

<input type="file" accept=".jpg, .png, .pdf">

Sliders o controles de rango

El tipo range permite incluir un control deslizante. Es útil cuando el valor exacto no es crucial, como seleccionar el volumen, edad estimada o rangos de precio. Este tipo de input se puede ver como parte de un enfoque más amplio sobre la personalización de formularios, tema que se aborda también en .

<input type="range" min="0" max="100" step="5" value="50">

Para mostrar el valor actual del slider se recomienda enlazarlo con una etiqueta <output> y usar JavaScript para actualizarla dinámicamente:

<input type="range" id="rango" min="0" max="100" value="50">
<output id="valorRango">50</output>

<script>
  const slider = document.getElementById("rango");
  const output = document.getElementById("valorRango");

  output.textContent = slider.value;
  slider.addEventListener("input", () => output.textContent = slider.value);
</script>

Campos de selección: radio, checkbox y select

Para ofrecer varias opciones al usuario, HTML proporciona:

Radio: Permite seleccionar una sola opción entre un grupo.
Checkbox: Permite marcar varias opciones simultáneamente.
Select: Despliega una lista con opciones personalizables.

Ejemplo de radio:

<input type="radio" name="color" value="rojo"> Rojo
<input type="radio" name="color" value="azul"> Azul

Ejemplo de checkbox:

<input type="checkbox" name="intereses[]" value="lectura"> Lectura
<input type="checkbox" name="intereses[]" value="cine"> Cine

Accesibilidad, compatibilidad y buenas prácticas

Para garantizar una buena experiencia de usuario, es vital tener en cuenta algunos aspectos técnicos y de accesibilidad, que son esenciales al trabajar con formularios y inputs. Si te interesa profundizar más en este tipo de recomendaciones, puedes consultar .

Usa siempre etiquetas <label> para describir el input, y asócialas mediante el atributo for.
Evita usar inputs de tipo text para contraseñas, correos o fechas. Usa los tipos correctos.
Valida los datos siempre tanto en frontend como en backend. Los atributos HTML no son suficientes para prevenir envíos maliciosos.
Revisa la compatibilidad entre navegadores. Algunos tipos no están disponibles en todos (como date en Safari).
Incluye atributos como aria-label o aria-describedby si el input carece de texto visible.

Aplicando estas recomendaciones, tus formularios no solo serán más robustos, sino también inclusivos y accesibles para cualquier tipo de usuario.

El <input> es una herramienta súper poderosa en HTML, que va mucho más allá de un simple campo de texto. Desde recolectar emails, facilitar búsquedas, permitir subidas de archivos o añadir validaciones clave, su uso es indispensable. Conociendo a fondo cada uno de sus tipos y atributos, puedes elevar la interacción y mejorar la experiencia de usuario a niveles profesionales.

¿Qué es la etiqueta <input> en HTML?