¿Cuáles son los tipos de campos de entrada («input») más comunes?

La etiqueta <input> es muy versátil gracias a su atributo type. Este atributo define cómo se verá y comportará el campo de entrada.

Aquí tienes algunos de los tipos más comunes que encontrarás y usarás en tus formularios HTML:

1. text: El tipo por defecto. Un campo de texto de una sola línea para introducir texto genérico. <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre_usuario">
2. password: Similar a text, pero los caracteres introducidos se ocultan (normalmente con asteriscos o puntos) por seguridad. <label for="contrasena">Contraseña:</label> <input type="password" id="contrasena" name="clave">
3. email: Diseñado para direcciones de correo electrónico. Los navegadores pueden realizar una validación básica del formato y, en dispositivos móviles, suelen mostrar un teclado optimizado.
4. number: Para introducir números. A menudo muestra controles para incrementar o decrementar el valor y permite atributos como min, max y step.
5. date: Proporciona un selector de fecha nativo del navegador, facilitando la elección de una fecha. Otros relacionados son time, datetime-local, month, week.
6. checkbox: Permite al usuario seleccionar cero, una o más opciones de un conjunto. Cada checkbox es independiente a menos que se gestione con JavaScript. <input type="checkbox" id="terminos" name="acepta_terminos" value="si"> <label for="terminos">Acepto los términos</label>
7. radio: Permite al usuario seleccionar solo una opción de un grupo de opciones mutuamente excluyentes. Todos los botones de radio de un mismo grupo deben compartir el mismo atributo name. <input type="radio" id="opcion1" name="eleccion" value="1"> <label for="opcion1">Opción 1</label> <input type="radio" id="opcion2" name="eleccion" value="2"> <label for="opcion2">Opción 2</label>
8. file: Permite al usuario seleccionar uno o más archivos de su dispositivo para ser enviados al servidor (requiere enctype="multipart/form-data" en la etiqueta <form>).
9. submit: Crea un botón que, al pulsarlo, envía el formulario a la URL especificada en el atributo action del formulario. El texto del botón se define con el atributo value.
10. reset: Crea un botón que restablece todos los campos del formulario a sus valores iniciales.
11. button: Crea un botón genérico sin comportamiento predeterminado. Se suele utilizar junto con JavaScript para ejecutar acciones personalizadas.

HTML5 introdujo muchos más tipos (como search, tel, url, color, range) que ofrecen mejor semántica y experiencias de usuario más ricas con interfaces nativas. Recuerda siempre asociar una <label> a cada campo de entrada para una buena accesibilidad.