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.

292

Iniciando o formulário

Para iniciar nosso formulário vamos usar o elemento form, que possui dois atributos importantes: o action e o method.

O action especifica o endereço (URL) para onde os dados serão enviados, enquanto o method é responsável por definir qual método será usado para enviar os dados.

O elemento <form /> é usado da seguinte forma:

<form method="GET" action="endereço da requisição">
   ...
 </form>

Entendendo o atributo method

No elemento form podemos definir o verbo HTTP, que será usado para enviar os dados do formulário, usando a propriedade method. Nele é possível usar os seguintes valores:

  • GET - Envia os dados do formulário através da URL, deixando-os visíveis no endereço da requisição, como acontece na busca do Google, ilustrada na Figura 1. Essa é a forma padrão de envio dos dados, sendo utilizada pelo navegador na ausência de um valor indicado para o atributo.
  • POST - Envia os dados em um bloco separado da URL, sendo considerado mais seguro por isso. Normalmente é usado para enviar dados sensíveis, como a senha de um usuário, por exemplo.
Página de busca Google
Figura 1. Página de busca Google

Uma sugestão de leitura, trazendo mais informações sobre os verbos HTTP é o artigo Serviços RESTful: Verbos HTTP, que explica mais detalhadamente sobre os verbos mencionados para que você possa decidir em quais ocasiões usar cada um.

Atributo action

O atributo action recebe o endereço (URL) para onde a requisição será feita. Seu uso é exemplificado abaixo:

<form action=”http://arquivo.devmedia.com.br/projeto/requisicao.php” />

Conheça o elemento <label />

O elemento label e responsável por exibir uma legenda, normalmente associado a um input, textarea ou select pelo atributo for, que recebe o ID do elemento ao qual ele se refere:

  <div>
    <label for=”nome”>Nome</label>
    <input id=”nome” type=”text” />
  </div>

Entendendo o elemento <input/>

Para preenchermos campos de texto com informações precisamos de um elemento especial chamado input. Sua aparência é apresentada na Figura 2.

Aparência de um input no Google Chrome
Figura 2. Aparência de um input no Google Chrome

Sua sintaxe básica é apresentada no código a seguir:

<input />

Com esse elemento é possível informar diversos tipos de dados através do atributo type.

Este pode possuir um dos seguintes valores:

  • button;
  • checkbox;
  • text;
  • number;
  • date;
  • month;
  • file;
  • color;
  • range, entre outros .

O type serve como uma forma de validação, verificando, por exemplo, se o valor é um e-mail, número, telefone ou data.

Repare que em dispositivos móveis (iOS, Android, Windows Phone, etc.) o teclado sofre algumas mudanças de acordo com o tipo (type) definido no input, como mostra a Figura 3.

Teclado do iOS para campos de email
Figura 3. Teclado do iOS para campos de email

O tipo e-mail é usado para representar um campo que será preenchido com um endereço de e-mail válido Em dispositivos móveis, o teclado passa a apresentar alguns caracteres extras, como vimos na Figura 3.

A seguir temos um exemplo um input do tipo email:

<input type=”email” />

Outro exemplo de type é o password, usado para representar um campo senha, no qual os caracteres digitados ficam ocultos, de forma semelhante ao ilustrado na Figura 4.

Campo de senha no Google Chrome
Figura 4. Campo de senha no Google Chrome

Sua sintaxe pode ser observada no código a seguir:

<input type=”password” />
Série

Esse projeto faz parte da Série Dê o próximo passo após o HTML/CSS!

Chega de perder tempo!
Comece hoje mesmo a programar de verdade
Apenas 12x de R$ 54,90
Por que a DevMedia?
  • Didática focada no iniciante
  • Aprenda construindo projetos reais
  • Domine as tecnologias mais usadas no mercado
  • Professores online o tempo todo
  • + de 8000 exercícios gamificados
  • + de 100 mil alunos formados

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários,
consulte nossa política de privacidade.

Aceitar