Contenido del Curso
Conceptos básicos de HTML
Conceptos básicos de HTML
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 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 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 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 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.
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.
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.
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.
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.
Ejemplo: Ingrese algo en los campos, y sugerirán varias opciones. No se preocupe; no se recopilarán datos.
index
index
index
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:
En el ejemplo anterior:
- Cuando haces clic en la etiqueta
Username:
, se enfocará automáticamente en el campo de entrada correspondiente; - La
label
y elinput
están vinculados juntos usando los atributosfor
yid
, respectivamente; - Ambos atributos
for
yid
tienen el mismo valor (username
).
Hagamos que completar el formulario sea más fácil agregando etiquetas a las entradas del ejemplo anterior.
Ejemplo:
index
index
index
Tutorial en Video
¡Gracias por tus comentarios!