Forms HTML5

Formulários HTML5

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 um Formulário: 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 um formulário

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.

email form mobile

Isto acontece com muitos outros tipos de inputs no que são novos no HTML5, tais como:

ValorDescriçã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
email 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

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.

Marcações: Web Design, tutoriais, html

Comentários

Construído com HTML5, CSS3 e todas essas cenas - Copyright © 2018 Sérgio Martins

Download Freewww.bigtheme.net/joomla Joomla Templates Responsive