Formulário de cadastro com atributos do HTML5
Formulários são uma parte fundamental da web, pois permitem o envio de dados para o back-end da aplicação. Nessa documentação criaremos um formulário de cadastro para uma pizzaria hipotética chamada Hello Pizza.
Projeto já adicionado aos favoritos. Clique aqui para ver todos seus favoritos
Obrigado pela sua avaliação, deixe o seu feedback nos comentários :D
Expressões regulares
As expressões regulares buscam em textos através de um Regex Engine (motor) disponível em linguagens como HTML, PHP, JavaScript e etc. Informamos um padrão que queremos que o Regex encontre, passando um alvo (bloco de texto) para que ele valide, extraia ou busque em um texto.
Existe o site Regex101 onde é possível testar as expressões regulares em diversas linguagens.
Também existe o site regexlib, que serve como um repositório de expressões regulares.
Para utilizá-las em inputs é bem simples: basta usar o atributo pattern como exibido abaixo:
<input type="text" placeholder="Ex: (99) 99999-9999"
pattern="\([0-9]\)[\s][0-9]-[0-9]" maxlength="15" />
No nosso exemplo validamos o número de telefone, obrigando o usuário a digitar seguindo o formato igual ao exemplo no placeholder.
Usando essa abordagem é possível avaliar a maioria dos dados que o usuário preencher antes mesmo de enviar a requisição para o servidor.
Esse projeto faz parte da Série Dê o próximo passo após o HTML/CSS!