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
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.
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!