Um formulário Web é representado por um elemento <form>, que delimita um ou mais controlos (geralmente elementos input) que permitem introduzir dados que podem depois ser submetidos para o lado do servidor.
Com o HTML5, o número de tipos diferentes de campos cresceu, permitindo a construção de formulários mais avançados que permitem simplificar o processo de inserir dados e até de os validar.
O HTML5 introduz novos controlos e atributos que melhoram o suporte à introdução de dados.
No entanto, nem todos os browsers já reconhecem estes novos atributos e quando isso falha eles convertem esses inputs nas tradicionais caixas de texto do HTML4 (<input type=“text”>)
Criar Formulários HTML5: Requisitos
Um formulário HTML obriga a algumas tagse regras que não podem falhar.
A tag form define a área onde estará inserido o formulário com os campus input.
<form>
inserir inputs
</form>
O Elemento Input
O elemento input é o elemento mais importante do formulário
O elemento inputo pode ser exibido de várias formas dependendo do tipo de atributo necessário, como veremos nos exemplos (ver menu Exemplos na barra de navegação).
Construir Formulários HTML5
Um formulário deve ser iniciado sempre pela tag form que tem de ser fechada no final. Dentro da tag form, deve ser declarada também a action (o ficheiro que vai processar a informação) e o método de envio dos dados.
<form method="post" action="trata.php">
<p><label>Email: <input type="email" name="email" placeholder="Introduza o seu email"></label></p>
<p><input type="submit" value="Enviar"><input type="reset"></p>
</form>
Um dos novos tipos adicionados ao controlo input é o email.
Este permite de imediato transmitir ao browser que o que será inserido neste campo é um endereço de correio electrónico.
A grande vantagem disto prende-se com o facto de, por exemplo em dispositivos móveis, o browser apresentar um teclado já adaptado ao conteúdo a usar.
Isto acontece com muitos outros tipos de inputs no que são novos no HTML5, tais como:
| Valor | Descrição |
|---|---|
| button | Devine um botão clicável. Utilizado sobretudo para activar JavaScript |
| checkbox | Cria uma checkbox |
| color | Cria um color picker |
| date | Define um formulário com controlador de data, sem hora |
| datetime-local | Define um formulário com controlador de data e hora |
| Define um campo para inserir email. | |
| file | Define um campo para escolha de ficheiros. Usado para upload de ficheiros. |
| hidden | Define um campo oculto |
| image | Permite usar uma imagem como botão |
| month | Cria um controlo para mês e ano |
| number | Cria um campo para inserir apenas números |
| password | Define um campo para inserir passwords |
| radio | Cria um radio button |
| range | Define um slider |
| reset | Cria um botão para limpar os dados já inseridos no formulário. |
| search | Define um campo para inserir texto de pesquisa |
| submit | Cria um botão para enviar os dados inseridos. |
| tel | Cria um campo para inserir o telemóvel/telefone. |
| text | Input por defeito. Permite inserir texto e números. |
| time | Define um campo para inserir hora. |
| url | Cria um campo para inserir o URL de uma página. |
| week | Cria um campo para enviar a semana. |
Esta tabela foi adaptada directamente do site www.w3schools.com. Visite-a para ver mais exemplos.
Validar Formulários HTML5
A definição do tipo de input no HTML5 é muito importante porque permite que o browser valide os dados inseridos ao submeter sem a necessidade de código extra, ao contrário do que acontecia com o HTML4
Com o HTML5 e os browsers modernos, a validação com JavaScript no lado do cliente deixa de ser obrigatória.
No entanto ela também deve ser feita do lado do servidor, por razões de segurança.
Uma validação pode ser feita no lado do cliente e no lado do servidor ou apenas no lado do servidor. NUNCA deve ser feita apenas no lado do cliente.