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
Introdução
Destaques do projeto
- 100% HTML5
- Uso do atributo type com os valores date, e-mail, number e file
- Uso de atributos de validação como required, min, max, minlength e maxlength
- Uso do atributo pattern para validar por expressão regular (REGEX)
- Uso do atributo accept em campos do tipo file para limitar o tipo MIME dos arquivos enviados no formulário
Introdução
Este projeto cria um formulário, o qual contém grande parte dos campos presentes requeridos em um cadastro. Ele utiliza validação e boas práticas, conceitos que devem ser aplicados por todo desenvolvedor em seus projetos.
Apesar de usarmos como cenário a página de cadastro de uma pizzaria, com nenhuma ou poucas adaptações, o formulário da Figura 1 poderá ser utilizado nas páginas dos seus próprios projetos.
Conhecendo o projeto
Este projeto é composto de uma página HTML, sendo essa a única linguagem que necessitamos conhecer para a criação do mesmo.
Grande parte dos elementos que ganharam maior relevância com o HTML5 (como fieldsets, legends, labels, inputs e muitos outros) estão presentes aqui.
Juntamente desses elementos, aplicamos atributos de validação como min/max, minlength/maxlength, expressões regulares, bem como placeholders.
Na Figura 2 vemos um erro de validação sendo disparado, pois o telefone não está preenchido conforme o formato definido no atributo pattern.
Ainda no campo de imagem restringimos o tipo MIME que pode ser selecionado pelo usuário a partir do atributo accept, conforme apresentado na Figura 3.
Agora que conhecemos as principais características do projeto podemos partir a sua criação.