Elementos de Entrada de Formulario y Etiqueta

Como hemos visto antes, el elemento más poderoso de un formulario es el input. Este elemento espera datos del usuario. Vamos a centrarnos en él.

Tipos de Input

Input de Texto

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

<input type="text" />

Input de Contraseña

Utilizado para la entrada de contraseñas, donde los caracteres están enmascarados por razones de seguridad. Asegura la privacidad ocultando los caracteres ingresados.

<input type="password" />

Input de Correo Electrónico

Utilizado para recopilar direcciones de correo electrónico de los usuarios. Realiza validación del lado del cliente para asegurar que el valor ingresado sea válido en formato de correo electrónico.

<input type="email" />

Input de Teléfono

Utilizado para recopilar números de teléfono de los usuarios. Permite a los usuarios ingresar números de teléfono en varios formatos, incluidos números internacionales.

<input type="tel" />

Input de Número

Utilizado 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 opciones. Adecuado para escenarios 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

Permite a los usuarios seleccionar una opción de una lista de opciones mutuamente excluyentes. Adecuado para escenarios donde solo se debe seleccionar 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

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

<input type="file" />

Entrada de fecha, Entrada de hora y Entrada de fecha y hora

Permite a los usuarios ingresar fechas, horas o ambas. Proporciona interfaces amigables para seleccionar fechas y horas. Útil para capturar fechas de nacimiento, horarios de citas o calendarios de eventos.

9
1
2
3
<input type="date" />
<input type="time" />
<input type="datetime-local" />

Ejemplo: Ingrese algo en los campos, y sugerirán varias opciones. No se preocupe; no se recopilarán datos.

Es posible que haya notado que completar el formulario no es muy conveniente cuando no entiende lo que se solicita en cada campo. Por eso las etiquetas vienen en nuestra ayuda.

Etiquetas

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

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

En el ejemplo anterior:

• Cuando haces clic en la etiqueta Username:, se enfocará automáticamente en el campo de entrada correspondiente;
• La label y el input están vinculados juntos usando los atributos for y id, respectivamente;
• Ambos atributos for y id tienen el mismo valor (username).

Hagamos que completar el formulario sea más fácil agregando etiquetas a las entradas del ejemplo anterior.
Ejemplo:

Tutorial en Video