Como hemos visto antes, el elemento más potente de un formulario es el input. Este elemento espera datos del usuario. Centrémonos en él.

Tipos de input

Entrada de texto

Diseñada para la introducción de datos textuales cortos, como nombres de usuario, direcciones de correo electrónico o mensajes breves.

<input type="text" />

Entrada de contraseña

Utilizada para la introducción de contraseñas, donde los caracteres se ocultan por motivos de seguridad. Garantiza la privacidad al ocultar los caracteres introducidos.

<input type="password" />

Entrada de correo electrónico

Utilizada para recopilar direcciones de correo electrónico de los usuarios. Realiza validación del lado del cliente para asegurar que el valor introducido tenga un formato de correo electrónico válido.

<input type="email" />

Entrada de Teléfono

Utilizada para recopilar números de teléfono de los usuarios. Permite ingresar números telefónicos en varios formatos, incluidos números internacionales.

<input type="tel" />

Entrada Numérica

Utilizada para recopilar datos numéricos de los usuarios. Proporciona un teclado numérico en dispositivos móviles para facilitar la entrada.

<input type="number" />

Casilla de Verificación

Permite a los usuarios seleccionar una o más opciones de una lista de alternativas. Adecuada para situaciones donde se permiten múltiples selecciones, como seleccionar varios elementos de una lista o aceptar términos y condiciones.

<input type="checkbox" />

Botón de opción (Radio Button)

Permite a los usuarios seleccionar una opción de una lista de opciones mutuamente excluyentes. Adecuado para situaciones donde solo se debe elegir una opción, como la selección de género o la elección de un método de pago.

<input type="radio" />

Entrada de archivo (File Input)

Permite a los usuarios cargar archivos desde su dispositivo, elegir desde su sistema de archivos local y enviarlos junto con los datos del formulario. Esta función es especialmente útil al adjuntar documentos o imágenes.

<input type="file" />

Entrada de fecha, hora y fecha-hora (Date Input, Time Input y DateTime Input)

Permite a los usuarios ingresar fechas, horas o ambos. Proporciona interfaces intuitivas para seleccionar fechas y horas. Útil para capturar fechas de nacimiento, horarios de citas o programación de eventos.

<input type="date" />
<input type="time" />
<input type="datetime-local" />

Ejemplo: Introduce algo en los campos y se sugerirán varias opciones. No te preocupes; no se recopilarán datos.

Es posible que hayas notado que completar el formulario no es muy conveniente cuando no se entiende qué se solicita en cada campo. Por eso las etiquetas nos ayudan.

Etiquetas

Las etiquetas (<label>) son esenciales para vincular textos descriptivos con los elementos de entrada de formularios, mejorando la accesibilidad y la facilidad de uso. Es fundamental que el atributo for de la etiqueta <label> coincida con el atributo id del elemento input asociado.
Ejemplo:

<label for="username">Username:</label>
<input type="text" id="username" />

En el ejemplo anterior:

• Al hacer clic en la etiqueta Username:, el foco se ubicará automáticamente en el campo de entrada correspondiente;
• La label y el input están vinculados mediante los atributos for e id, respectivamente;
• Ambos atributos, for e id, tienen el mismo valor (username).

Facilitemos el llenado del formulario añadiendo etiquetas a los campos de entrada del ejemplo anterior.
Ejemplo:

Tutorial en video