HT M L 5


 HT M L
TAGS
 o s q u e a p ág in a
e nt os d e u m
Elem a e st ru t u r a
õ e m
comp
 o s q u e a p ág in a
e nt os d e u m
Elem a e st ru t u r a
õ e m
comp
 o s q u e a pá gi na
nt os e um
Eleme a e str ut ur a d
m põ e m
co
 ul ár i os
Form

Nos formulários é que são realizadas a grande parte das operações na
internet. Preenchendo um cadastro, enviando um email, efetuando um
pagamento,etc., ai estão os formulários. O HTML5 trouxe novos recursos
para tornar a operação e a experiência do usuário com formulário algo
mais interessante.
 H TM L 5
n t os d o
Elem e

color - mostra uma paleta de cores

date - mostra no campo um calendário que permite a navegação entre meses e anos

datetime - configura data e hora - Utilizado para agendamento de eventos, reuniões, etc.

datetime-local - data e hora local

email - Caso opte por validação, automaticamente o browser valida se o valor for um e-mail válido

month - mostra no campo um calendário que permite a navegação entre meses e anos

number - Com os atributos “min” e “Max” é possível entrar com um intervalo de valores possíveis e com o “step” é possível definir o valor para cada incremento

range - usado como botão deslizante

search - usado para pesquisas

tel - Utilizado para entrada de dados de telefones

time - usado para mostrar a hora

url - Utilizado para entrada de variadas URLs. Por padrão o browser irá inserir o http:// como protocolo padrão

week - mostra no campo um calendário que permite navegar entre meses e anos


A implementação desses elementos é feito usando a seguinte sintaxe:

<input type=“elemento” name=“nome_elemento”/>
 H TM L 5
n t os d o
Elem e

Autocomplete - Se utilizado como "on", habilita o “autocompletar” nos campos;

Novalidate - É um atributo booleano. Quando se encontra ativo, especifica que o formulário não deve ser validado quando submetido;

Autofocus - Foca o campo no carregamento da página;

Formaction - Substitui o atributo Action no formulário. Deve ser uma URL válida que define para onde enviar os dados quando o formulário for submetido;

Formmethod - Substitui o atributo method do formulário. Define o método HTTP para o envio de dados para o URL de ação. Aceita "get", "post", "put" e "delete";

Formnovalidate - Substitui o atributo "novalidate" no formulário. Se for colocado como "true", esse campo não será validado quando for submetido;

Formtarget - Aceita "blank", "_self", "_parent" e "_top";

Width e Height - Definem a largura e altura do campo do formulário. Podem ser utilizadas medidas em porcentagem e pixels;

List - Referencia um elemento DataList. Caso tenha um elemento <li> com determinado ID, referencie esse ID;

Multiple - Permite que o usuário selecione mais de um item;

Pattern - Permite criar restrições por expressões regulares; Ex: <input pattern=”[0-9]{3}” name=”digito” required title=”Validação apenas para 3 dígitos”/>

Placeholder - Define a ajuda para o usuário preencher o campo com os dados corretos;

Step - Utilizado juntamente com os tipos "datetime", "time", "date", "datetime-local", "month", "week", "number", "range", definindo um intervalo numérico;

Required - o atributo “required”, dentro de um elemento input torna o campo obrigatório e transfere para o browser a tarefa da validação do campo;
 m pl o s
Exe
 m pl o s
Exe
 m pl o s
Exe
 m pl o s
Exe
 m pl o s
Exe
 m pl o s
Exe
 m pl o s
Exe

Veremos agora como exemplo a criação de um formulário HTML5 bem simples usando os
elementos do HTML5 mais comuns para formulários:

Abra o bloco de notas e insira o código a seguir salvando o arquivo com o nome
Html5_Formulario.htm:
 m pl o s
Exe
 m pl o s
Exe
 m pl o s
Exe
Vamos entender o código:


No head definimos o charset que é a codificação dos caracteres; (<meta charset=“utf-8” />)

Indicamos uma folha de estilo CSS; (<link rel="stylesheet" href="css/style.css" />)

O envio do formulário, será validado por JavaScript, na função validateFormOnSubmit;(<form
id=exemplohtml5 onsubmit="return validateFormOnSubmit(this)" action="">)

Fieldset é a tag utilizada para agrupar elementos relacionados dentro de um form;

O placeholder faz com que apareça um texto “pré-defenido” antes de se preencher o campo;

Autofocus faz com que o campo seja focado com o cursor;

O required torna a informação requisita obrigatória obrigando o preenchimento do campo;

O label for indica qual o elemento a que a label está vinculada;