Formulário de cadastro com atributos do HTML5

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.

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.

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.

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.

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

<input type=”password” />

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