Validação de campos de entrada de e-mail e URL em formulários HTML

Neste tutorial, você aprenderá todos os aspectos importantes dos campos de entrada de endereços de e-mail e URLs em formulários HTML. O objetivo é mostrar como implementar efetivamente a validação dessas entradas e como personalizar o estilo para diferentes estados de entrada. Isso não apenas melhorará a experiência do usuário, mas também a qualidade dos dados que você coleta.

Principais Conclusões

• Você aprenderá a estrutura básica e validação para e-mail e URL usando HTML.
• Também aprenderá como fornecer um feedback visual aos usuários quando as entradas são inválidas usando CSS.
• O uso de padrões para validação adicional de endereços de e-mail e URLs é explicado.

Guia Passo a Passo

1. Criando um campo de entrada básico para e-mail

Comece criando um elemento de entrada padrão para E-mail. Aqui, você deve definir o tipo como "email" para que o navegador valide automaticamente a entrada.

O campo de entrada agora será tratado pelo HTML esperando um endereço de e-mail e fornecendo feedback visual em caso de entrada incorreta. Assim que um usuário começa a inserir, o fundo muda para rosa para indicar que há algo errado.

2. Validando o endereço de e-mail

A validação do e-mail é feita por meio de regras simples. Deve haver pelo menos um símbolo "@" seguido de pelo menos um outro caractere. Isso é uma validação básica de NLP. No entanto, essa regra de validação não é suficiente para garantir que o endereço de e-mail realmente exista.

Um exemplo de um endereço de e-mail inválido seria "bla@". Nesse caso, o envio do formulário seria bloqueado e o usuário veria uma mensagem de erro.

3. Usando padrões para validação mais precisa

Para obter uma validação mais precisa, você pode usar o atributo "pattern". Com uma expressão regular (Regex), você pode definir que o endereço de e-mail deve atender a determinados requisitos, como um domínio específico, por exemplo.

Com essa validação adicional, você garante que apenas endereços de e-mail válidos sejam aceitos, como por exemplo apenas endereços Gmail ou GMX.

4. Input obrigatório e Estilização

Para garantir que o campo de e-mail seja preenchido, você pode adicionar o atributo "required". Se o usuário tentar enviar o formulário sem preencher o campo, ele receberá imediatamente um feedback visual.

Para estilizar as entradas inválidas, você pode usar no CSS o seletor ":invalid". Isso fará com que o fundo do campo fique vermelho, alertando o usuário de que a entrada está incorreta.

5. Criando campo de entrada para URL

Assim como no caso do e-mail, é importante criar um elemento de entrada apropriado para URLs. Defina o tipo como "url" para que o navegador valide também a entrada neste caso.

6. Validando a URL

Os requisitos básicos para uma URL válida incluem começar com "http://" ou "https://" e ter pelo menos um caractere subsequente. Se o usuário digitar apenas "https", isso não será suficiente.

O mesmo princípio se aplica a outros protocolos, como o "ftp". Se a entrada não atender às condições, o navegador fornecerá feedback e não permitirá o envio do formulário.

7. Validação avançada com padrões para URLs

Para tornar a validação mais precisa para certos padrões, como "https://www.example.com", você também deve usar o atributo "pattern" para ajudar seus usuários a inserir URLs corretas.

8. Usabilidade em dispositivos móveis

Uma grande vantagem ao usar os tipos "email" e "url" em formulários é a melhoria da usabilidade em dispositivos móveis. O teclado é otimizado para facilitar aos usuários a digitação de endereços de e-mail e URLs.

Resumo

Neste tutorial, cobrimos os principais critérios para validação de endereços de e-mail e URLs em formulários da web. Você aprendeu como realizar validações simples e avançadas e como personalizar o feedback do usuário através de CSS para criar uma melhor experiência do usuário.