Série da semana: Angular, API RESTful e Banco de Dados

Veja mais
O projeto está inativo

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.

29

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.

Formulário de cadastro em HTML5
Figura 1. Formulário de cadastro em HTML5

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.

Validação sobre o campo telefone
Figura 2. Validação sobre o campo telefone

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.

Seleção de arquivo a partir do valor de accept
Figura 3. Seleção de arquivo a partir do valor de accept

Agora que conhecemos as principais características do projeto podemos partir a sua criação.

Suporte ao aluno - Deixe a sua dúvida.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrado através do seu cartão de crédito. *Tempo minimo de assinatura: 12 meses.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
Conheça agora!
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrada através do seu cartão de crédito. *Tempo mínimo de assinatura: 12 meses.