En este tutorial aprenderás todos los aspectos importantes de los campos de entrada para direcciones de correo electrónico y URL en formularios de HTML. El objetivo es mostrarte cómo implementar de manera efectiva la validación de estas entradas y cómo ajustar el estilo para diferentes estados de entrada. Esto no solo mejorará la experiencia del usuario, sino que también mejorará la calidad de los datos que recopilas.
Principales conclusiones
- Aprenderás la estructura básica y la validación de correos electrónicos y URLs utilizando HTML.
- También aprenderás cómo proporcionar comentarios visuales a los usuarios con CSS cuando las entradas no son válidas.
- Se explica el uso de patrones para una validación adicional de direcciones de correo electrónico y URLs.
Guía paso a paso
1. Crear un campo de entrada básico para correos electrónicos
Empieza creando un elemento de entrada estándar para correos electrónicos. Aquí debes establecer el tipo como "email" para que el navegador valide automáticamente la entrada.
El campo de entrada ahora será tratado por HTML como esperando una dirección de correo electrónico y proporcionará retroalimentación visual en caso de entrada incorrecta. Cuando un usuario empieza a ingresar, el fondo cambia a rosa para indicar que algo no está bien.
2. Validación de la dirección de correo electrónico
La validación del correo electrónico se realiza mediante reglas simples. Debe haber al menos un carácter "@" seguido por al menos otro carácter. Esta es una validación básica de NLP. Sin embargo, esta regla de validación no es suficiente para garantizar que la dirección de correo electrónico exista realmente.
Un ejemplo de una dirección de correo electrónico no válida sería "bla@". En tal caso, el envío del formulario se bloquea y el usuario ve un mensaje de error.
3. Uso de patrones para una validación más precisa
Para lograr una validación más precisa, puedes utilizar el atributo "pattern". Con una expresión regular (Regex) puedes especificar que la dirección de correo electrónico cumpla ciertos requisitos, como una dominio específico.
Mediante esta validación adicional, te aseguras de que solo se acepten direcciones de correo electrónico válidas, como por ejemplo las de Gmail o GMX.
4. Entrada requerida y estilo
Para asegurarte de que el campo de correo electrónico se complete, puedes agregar el atributo "required". Si el usuario intenta enviar el formulario sin ingresar nada, recibirá inmediatamente una retroalimentación visual.
Para estilizar las entradas inválidas, puedes utilizar en CSS el selector ":invalid". De esta forma, el fondo del campo se vuelve rojo para advertir al usuario de que la entrada no es correcta.
5. Crear campo de entrada para URLs
Similar al correo electrónico, es importante crear un elemento de entrada correspondiente para URLs. Establece el tipo como "url" para que el navegador también valide la entrada aquí.
6. Validación de la URL
Los requisitos básicos para una URL válida incluyen que comience con "http://" o "https://" y tenga al menos un carácter posterior. Si el usuario ingresa solo "https", no es suficiente.
El mismo principio se aplica a otros protocolos como "ftp". Si la entrada no cumple con las condiciones, el navegador proporciona retroalimentación y no permite enviar el formulario.
7. Validación avanzada con patrones para URLs
Para hacer más precisa la validación, como por ejemplo para patrones específicos como "https://www.ejemplo.com", también deberías utilizar el atributo "pattern" para ayudar a tus usuarios a ingresar URLs correctas.
8. Usabilidad en dispositivos móviles
Una gran ventaja al utilizar los tipos "email" y "url" en formularios es la mejora en la usabilidad en dispositivos móviles. El teclado se adapta de manera óptima para facilitar a los usuarios la introducción de direcciones de correo electrónico y URL.
Resumen
En este tutorial hemos cubierto los criterios más importantes para la validación de direcciones de correo electrónico y URLs en formularios web. Has aprendido cómo realizar validaciones simples y avanzadas y cómo personalizar el feedback al usuario con CSS para crear una mejor experiencia de usuario.
Preguntas frecuentes
¿Qué sucede si una dirección de correo electrónico ingresada no es válida?Si la dirección de correo electrónico no es válida, el formulario no se puede enviar y el usuario verá un mensaje de error.
¿Cómo puedo asegurarme de que la URL ingresada sea correcta?Puedes usar el atributo "pattern" para establecer requisitos específicos para la URL, como que comience con "http://" o "https://".
¿Puedo especificar varias direcciones de correo electrónico en un campo?Sí, puedes usar el atributo "multiple" para permitir a los usuarios ingresar múltiples direcciones de correo electrónico separadas por comas.
