Formulrios em HTML5

1.

Novas tags antes do HTML5

H trs tags de formulrios que pertencem a definio do HTML 4.01 mas que no
foram includas nas vdeo aulas do curso pois ainda no existiam na poca em que estas foram
preparadas: <fieldset>, <legend> e <label>.
a. Tag <fieldset>
A tags <fieldset> foi criada para dividir logicamente o formulrio em grupos de
elementos relacionados. Ela uma tag container que deve englobar estes elementos. Sua
aparncia nos principais navegadores a de uma linha englobando estes elementos. O cdigo
mostrado no exemplo 1.1 deve ser exibido conforme a figura 1.1:

<fieldset>
Nome: <input type="text" size="20" />
<br/><br/>
Email: <input type="text" size="20" />
<br/><br/>
Data: <input type="text" size="2" /> /
<input type="text" size="2" /> /
<input type="text" size="2" />
</fieldset>

Fig. 1.1

Exemplo 1.1

b. Tag <legend>
A tags <legend> complementar a tag <fieldset> e serve para acrescentar uma legenda
explicando o significado do grupo de elementos de formulrio. Sua aparncia nos principais
navegadores a de um texto sobre a linha superior do fieldset. O cdigo mostrado no exemplo
1.2 deve ser exibido conforme a figura 1.2:

<fieldset>
<legend>Dados Pessoais</legend>
Nome: <input type="text" size="20" />
<br/><br/>
Email: <input type="text" size="20" />
<br/><br/>
Data: <input type="text" size="2" /> /
<input type="text" size="2" /> /
<input type="text" size="2" />
</fieldset>

Exemplo 1.2

Fig. 1.2

c. Tag <label>
A tag <label> tem como finalidade estabelecer uma ligao entre um rtulo e um
elemento do formulrio. Para que a ligao seja estabelecida necessrio que seja definido
um atributo for na tag <label> cujo valor deve corresponder ao valor do atributo id da tag do
elemento do formulrio com quem queremos fazer a ligao.
A tag <label> em si no causa nenhuma mudana no aspecto do texto do rtulo ou do
elemento do formulrio ligado a ele. Um efeito interessante acontece no caso dos botes de
rdio e dos botes do tipo checkbox. Nestes elementos, a seleo com o mouse do rtulo
associado causa a modificao do estado do boto.
A definio do atributo accesskey na tag <label> permite que o usurio selecione o
elemento associado atravs de uma tecla de atalho definida pelo valor deste atributo. Por
exemplo, se o valor de accesskey for a letra m, o elemento pode ser associado ao se digitar
Shift + Alt + m.

<fieldset>
<legend>Dados Pessoais</legend>
<label for="nome" accesskey="n">Nome:</label>
<input type="text" size="20" id="nome" />
<br/><br/>
<label for="email" accesskey="e">Email:</label>
<input type="text" size="20" id="email" />
<br/><br/>
Sexo:
<input type="radio" id="mas"
name="sex"
value="M" />
<label for="mas" accesskey="m">Masculino</label>
<input type="radio" id="fem"
name="sex"
value="F" />
<label for="fem" accesskey="f">Feminino</label>
</fieldset>

Exemplo 1.3

2.

Validao de formulrios com HTML

A implementao de formulrios do HTML5 alm de novos elementos, trouxe tambm

uma novidade curiosa e til: agora possvel realizar algumas crticas de formulrio
automaticamente em HTML sem ter de programar nenhuma linha de javascript.
O HTML5 trouxe novos tipos de campo de entrada de texto configurados para entrada
de e-mail e URL. Estes campos fazem uma verificao bsica do dado que foi digitado,
emitindo automaticamente uma mensagem de erro se o no um endereo de e-mail bem
formado (ter pelo menos um caractere @ entre duas palavras e no terminar com um
caractere ponto .) ou uma URL bem formada (ter um protocolo, o caractere : e palavras
separadas ou no por barras).

Alm destes h um campo genrico onde o formato do dado esperado determinado

por uma expresso regular (uma sequncia de caracteres codificados indicando quais tipos de
caracteres devem formar o dados, em que ordem e em qual quantidade). Este campo genrico
pode ser utilizado para validar dados que tem uma frmula especfica e simples, como CEP e
nmeros de telefone.
Alguns atributos permitem modificar o comportamento e fazer mais algumas validaes:
a. Atributo required
O atributo required quando includo em um elemento do formulrio serve para indicr
que um campo de preenchimento obrigatrio e j embute um procedimento de validao
deste campo. Se um campo obrigatrio for deixado vazio, no momento do envio do
formulrio, o navegador emite automaticamente uma mensagem informando que o campo
deve ser preenchido e interrompe o envio.
O exemplo 2.1 mostra o cdigo de um formulrio com dois campos de entrada de texto
com o atributo required. Um grande espao foi deixado entre os dois campos para que
possamos observar melhor o que acontece quando tentamos enviar o formulrio sem que os
campos estejam preenchidos.
Pela figura 2.1 podemos ver que uma janela aberta abaixo do primeiro campo com
atributo required informando que aquele campo obrigatrio e no foi preenchido. O
navegador tambm muda a cor deste e de todos os campos obrigatrios no preenchidos.

<form method="post" action="">

<label for="nome">Nome:</label>
<input type="text" size="20"
id="nome" required />
<br/><br/><br/><br/><br/><br/>
<label for="email">Email:</label>
<input type="text" size="20"
id="email" required />
<br/><br/>
<input type=submit value="OK">
</form>

Fig. 2.1

Exemplo 2.1

b.

Atributo novalidate e formnovalidate

O atributo novalidate pode ser includo na tag <form> e serve para desabilitar as crticas
de formulrio automticas, como as criadas pelo atributo required. Este atributo deve ser
usado em situaes em que voc no deseja ativar a validao, por exemplo, quando
estivermos testando o programa que vai tratar no servidor dos dados recebidos do formulrio.
Assim podemos testar a situao de exceo de algum campo obrigatrio no ter valor ao ser
enviado para o servidor.

O atributo formnovalidate equivalente ao anterior, porm deve ser includo na tag

<input> com o atributo type com valor submit. Este atributo permite que um formulrio tenha
dois botes de submit, um que faz a crtica e outro que no (com o formnovalidate definido).
No exemplo 2.2 isso utilizado para criar um boto que salva um rascunho do formulrio, no
estado em que estiver:
<form>
<label for="nom">nome:</label>
<input name="nome" type="text" id="nom"
required /><br/><br/>
<label for="ema">email:</label>
<input name="email" type="email" id="ema"
required /><br/><br/>
<label for="msg">mensagem:</label>
<textarea name="mensagem" id="msg"
required /></textarea><br/><br/>
<input type="submit" value="Salvar rascunho"
formnovalidate />
<input type="submit" value="Enviar" />
</form>

Exemplo 2.2

c. Atributo autofocus
O atributo autofocus, quando colocado em um campo do formulrio, faz com que este
campo receba o foco automaticamente quando a pgina carregada. Naturalmente, suposto
que exista apenas um campo com o autofocus definido. Se houver mais de um campo com
este atributo definido o resultado imprevisvel e vai depender do navegador.
<input type="text" name="email" autofocus />

Exemplo 2.3

d. Atributo placeholder
O atributo placeholder utilizado quando queremos que algum valor aparea num
campo do formulrio como uma mensagem indicando como o usurio deve preencher aquele
campo, porm sem que isso afete o valor do campo (o que aconteceria se usssemos o
atributo value). Observe o cdigo do exemplo 2.4 e na figura 2.4 o que vai aparecer no campo
assim que a pgina for carregada:
E-mail:
<input type="text" name="email"
placeholder="Digite seu e-mail" />

Exemplo 2.4

Fig. 2.4

Este valor deste atributo aparece apenas quando a pgina carregada e desaparece
assim que o usurio selecione o campo, sem que seja preciso apag-lo, caractere a caractere.
e. Atributo readonly
O atributo readonly utilizado quando queremos usar um campo de um formulrio
apenas para exibir um dado. Quando este atributo definido em um campo, o valor deste
campo no pode ser modificado pelo usurio. O campo ficar com seu valor original ou ter o
seu valor modificado por um cdigo javascript. O exemplo 2.5 mostra um formulrio que
implementa uma soma onde o campo de resultado ser preenchido por javascript:
<form>
<input name="A" type="text" size="2" /> +
<input name="B" type="text" size="2" /> =
<input name="R" type="text" size="3" readonly />
</form>

Exemplo 2.5

3.

Novos Elementos de Formulrio

Uma srie de novos elementos de formulrios foram includos na definio do HTML5 e

diversos deles j foram implementados nas ltimas verses dos principais navegadores.
A tag <input> continua sendo a mais verstil para a criao de campos de um formulrio.
Alm dos tradicionais valores para o campo type (button, checkbox, file, hidden, image,
password, radio, reset, submit e text), uma srie de novos valores agora so possveis: color,
date, datetime, datetime-local, email, month, number, range, search, tel, time, url e week. O
quadro a seguir informa a situao atual de implementao destes novos tipos nos principais
navegadores:
IE 9
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Firefox

Chrome

Safari

Opera

a. Input com type email

A tag <input> com o atributo type com valor email um campo de entrada de texto
especfico para ler um endereo de e-mail. A novidade deste campo que o prprio navegador
faz a crtica do valor digitado pelo usurio e emite uma mensagem caso este tente abandonar
o campo sem ter preenchido um valor vlido. O exemplo 3.1 mostra um formulrio com o
campo email e a figura 3.1 mostra o que acontece quando se tenta enviar o formulrio com
um valor incorreto para um endereo de e-mail:
<fieldset>
<form action="demo_form.asp">
<label for="em">E-mail: </label>
<input type="email" required
id="em" name="email" />
<input type=submit value="OK" />
</form>
</fieldset>

Fig. 3.1

Exemplo 3.1
O que o navegador espera que seja um e-mail : um ou mais nomes (pelo menos um
caractere alfanumrico) separados por pontos, seguido do caractere @, seguindo um ou mais
nomes ou nmeros separados por pontos. O rigor da crtica pode variar ligeiramente entre os
navegadores que implementam este campo (o Opera, por exemplo, permite um endereo
terminado no caractere ponto).
b. Input com type url
A tag <input> com o atributo type com valor url um campo de entrada de texto
especfico para ler um endereo de internet no formato URL. A novidade deste campo que o
prprio navegador faz a crtica do valor digitado pelo usurio e emite uma mensagem caso
este tente abandonar o campo sem ter preenchido um valor vlido. O exemplo 3.2 mostra um
formulrio com o campo url e a figura 3.2 mostra o que acontece quando se tenta enviar o
formulrio com um valor incorreto de URL:
<fieldset>
<form action="demo_form.asp">
<label for="site">Site: </label>
<input type="url" required
id="site" name="site" />
<input type="submit" value="OK" />
</form>
</fieldset>

Fig. 3.2

Exemplo 3.2
O rigor da crtica pode variar ligeiramente entre os navegadores que implementam este
campo, porm a maioria dos navegadores fica contente com um nome seguido do caractere
:.

c. Input com type tel

A tag <input> com o atributo type com valor tel um campo de entrada de texto
especfico para ler um nmero do telefone. Apesar da utilidade deste campo, no momento,
no h nenhum tipo de crtica especial implementada para ele em nenhum dos navegadores.
Ele mostrado como um campo de entrada de texto normal e permite a entrada, inclusive, de
letras. Porm, diferente dos navegadores de desktop, alguns tipos de dispositivos mveis j
do um tratamento especial para este tipo de campo.
d. Input com type color
A tag <input> com o atributo type com valor color um campo de entrada especfico
para ler uma cor. No momento apenas o Chrome e o Opera implementaram este elemento
totalmente. Nestes navegadores mostrada para o usurio a cor atualmente selecionada e ao
se clicar no controle aberto um dilogo para a seleo de cor (como pode ser visto na figura
3.3). O valor do campo o cdigo da cor no formato hexadecimal. Nos demais navegadores,
este elemento aparece como um campo de entrada de texto comum.
<form action="demo_form.asp">
<fieldset>Cor:
<input type="color" name="cor" />
<input type="submit" value="enviar" />
</fieldset>
</form>

Exemplo 3.3
Fig. 3.3
e. Input com type number
A tag <input> com o atributo type com valor number um campo de entrada
especfico para ler um nmero. No momento, apenas o Chrome, o Safari e o Opera
implementaram este elemento totalmente. Nestes navegadores mostrado para o usurio um
campo de entrada de texto readonly. O seu valor pode ser modificado por dois pequenos
botes que aparecem ao lado do campo (figura 3.4). Estes botes servem para aumentar ou
diminuir o valor numrico mostrado no campo.
<form action="demo_form.asp">
<fieldset>Pares:<br/>
2 <input type="number" min="2"
max="12" step="2" /> 12</fieldset>
</form >

Fig. 3.4

Exemplo 3.4
Trs atributos devem ser definidos nesta tag: o atributo min indica o valor numrico
mnimo, o atributo max indica o valor numrico mximo e o atributo step indica o incremento
utilizado cada vez que um dos botes laterais for selecionado. O valor do campo o valor

numrico sendo exibido. Nos demais navegadores, este elemento aparece como um campo
de entrada de texto comum.
f.

Input com type range

A tag <input> com o atributo type com valor range outro tipo de campo de entrada
para ler nmeros. No momento, apenas o Chrome, o Safari e o Opera implementaram este
elemento. Nestes navegadores mostrado para o usurio uma linha reta com um boto que
pode ser movimentado sobre ela, assumindo um valor do intervalo especificado de acordo
com a posio sobre a reta (figura 3.5).
<form action="demo_form.asp">
<fieldset>Pares:<br/>
2 <input type="range" min="2"
max="12" step="2" /> 12</fieldset>
</form>

Fig. 3.5

Exemplo 3.5
Assim como no type com valor number, trs atributos devem ser definidos nesta tag:
o atributo min indica o valor numrico mnimo, o atributo max indica o valor numrico
mximo e o atributo step indica o incremento para cadas posio sobre a reta. O valor do
campo o valor numrico correspondente a posio do boto. Nos demais navegadores, este
elemento aparece como um campo de entrada de texto comum.
g. Input com type search
A tag <input> com o atributo type com valor search serve para entrar uma chave para
ser passada a um site de busca (como o google, por exemplo). Ele implementado como um
campo de entrada de texto comum, com dois comportamentos extras: um boto na forma da
letra x que permite limpar o contedo do campo e a oferta, na forma de um pop menu, de
opes para completar o campo de busca baseado nas buscas anteriores (figura 3.6).
<form method="get"
action="https://google.com/search">
<fieldset>Google:
<input type="search" name="q" size="8" />
<input type="submit" value="buscar" />
</fieldset>
</form>

Fig. 3.6
Exemplo 3.6
No exemplo 3.6 definimos os atributos do formulrio para fazer uma busca no google:
method com valor get (para passar o campo do formulrio na URL) e action com o endereo
do google. O nome do campo de busca foi definido como q pois o esperado pelo google.

h. Input com type date

A tag <input> com o atributo type com valor date serve para facilitar a entrada de
datas. No momento, apenas o Chrome, o Safari e o Opera implementaram este elemento. A
seleo deste elemento causa (no Chrome e no Opera) a abertura de um dilogo com um
calendrio (figura 3.6).
<form action="demo_form.asp">
<fieldset>Aniversrio:
<input type="date" name-"aniv" />
</fieldset>
</form>

Exemplo 3.6

Fig. 3.6
i.

Input com type time, month, week, datetime e datetime-local

H tambm diversos campos relacionados com tempo e data, definidos pelo atributo
type da tag <input>, que no momento apenas o Opera e o Safari implementam. Estes campos
so:
time permite incluir um horrio no formato hh:mm.
month permite definir um ms (aaaa-mm).
week permite definir uma semana (aaaa-Wss).
datetime permite definir uma data e um horrio (aaaa-mm-ddThh:mmZ).
datetime-local mesmo do anterior, sem timezone (aaaa-mm-ddThh:mm).
O exemplo 3.7 mostra o comportamento de datetime no Opera:
<form action="demo_form.asp">
<fieldset>Festa:
<input type="datetime"
name="datafesta" />
</fieldset>
</form>

Exemplo 3.7

Fig. 3.7

4.

O atributo pattern (crtica com Expresses Regulares)

Os atributos citados na seo 2 no so a nica forma de fazer validao de formulrio

utilizando apenas HTML5. possvel indicar ao navegador exatamente quais caracteres so
vlidos em quais posies utilizando uma codificao chama expresso regular. Uma expresso
regular formada por quantificadores (tabela 4.1), expresses (tabela 4.2), e metacaracteres
(tabela 4.3). Em W3schools possvel encontrar uma referncia mais completa1.
Expresso

Significado

[0-9]
[A-Z]

Qualquer dgito entre 0 e 9.

Qualquer caractere entre A maisculo e Z maisculo.

[a-z]

Qualquer caractere entre a minsculo e z minsculo.

[A-z]

Qualquer caractere entre A maisculo e z minsculo.

[adgk]

Qualquer caractere no conjunto especificado.

[^adgk]

Qualquer caractere fora do conjunto especificado.

(red|blue|green)

Qualquer uma das alternativas especificadas.

Tabela 4.1 Expresses

Quantificador

n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n

Significado
Qualquer string que contm PELO MENOS UM n.
Qualquer string que contm zero OU MAIS OCORRNCIAS DE n.
Qualquer string que contm zero OU UMA OCORRNCIA DE n.
Qualquer string que contm uma sequencia de X ns
Qualquer string que contm uma sequencia de X to Y ns
Qualquer string que contm uma sequencia de pelo menos X ns
Qualquer string que contm n NO SEU FINAL.
Qualquer string que contm n NO SEU INCIO.
Qualquer string que seguida por uma string n
Qualquer string que NO seguida por uma string n

Tabela 4.2 Quantificadores

Metacaracte
re
.

\w
\W
\d
\D
\s
\S
\n
\t
\x

Significado

Um nico caractere, menos newline ou fim de linha.

Caractere alfa-numrico e _ (underscore).
Qualquer caractere exceto alfa-numrico e _ (underscore).
Um dgito
Qualquer caractere exceto dgito.
Caractere de espao.
Qualquer caractere exceto espao.
Caractere de fim de linha.
Caractere de tabulao.
Significado real do caractere (x pode ser qualquer caractere especial).
Tabela 4.3 Metacaracteres

Na tabela a seguir (tabela 4.4) temos alguns exemplos de expresses regulares:

Modelo

dddd-dddd
(dd) dddd-dddd
ddddd-ddd
ddd.ddd.ddd-dd
ddd.ddd.ddd.ddd
nome@nome.nome

Significado

Nmero de telefone
Nmero de telefone com DDD
CEP
CPF
Nmero IP
E-mail

Expresso Regular

[0-9]{4}-[0-9]{4}
\([0-9]\)\s[0-9]{4}-[0-9]{4}
[0-9]{5}-[0-9]{3}
[0-9]{3}\.[0-9]{3}\.[0-9]{3}-[0-9]{2}
([0-9]{3}\.){3}[0-9]{3}
\w+(\.\w+)?@\w+(\.\w+)*

Tabela 4.4 Exemplos de Expresses Regulares

Os caracteres de abre e fecha parnteses tem o significado de agrupar partes da
expresso, por isso precisamos utilizar \( e \) no exemplo do nmero de telefone com DDD.
Neste caso queremos os prprios caracteres e no seu significado especial. J no exemplo do
nmero IP estamos querendo dizer que toda a expresso [0-9]{3}\. ser repetida trs vezes.
Se no usssemos os parnteses aqui a repetio s valeria para o ponto.
A ltima expresso pode parecer complicada, mas quem vai ter de lidar com ela o
computador, que deve validar um endereo de e-mail genrico. Esta expresso pode ser lida
como: pelo menos um caractere alfanumrico (pode haver mais), seguido ou no por um
ponto seguido de pelo menos um caractere alfanumrico, seguido do caractere @, seguido de
pelo menos um caractere alfanumrico, seguido por um ponto seguido de pelo menos um
caractere alfanumrico zero ou mais vezes. Isso deve validar e-mails escritos como:
nome@nome, nome.nome@nome ou nome.nome@nome.nome.nome.
a. O atributo pattern
Podemos incluir um atributo pattern numa tag <input> para definir uma expresso que
possa validar o valor inserido pelo usurio no campo de entrada. Assim ganhamos mais poder
de crtica de formulrio sem precisar utilizar programao javascript. No exemplo 4.1
definimos um campo input do tipo tel com um padro que inclui a definio do cdigo do DDD
entre parnteses. Se tentarmos enviar o formulrio com um contedo que no corresponda
exatamente ao padro, o prprio navegador nos enviar uma mensagem de erro como
podemos ver na figura 4.1:
<form action="demo_form.asp">
<fieldset>Telefone (xx) xxxx-xxxx:<br/>
<input type="tel" id="tel" name="tel"
pattern=
"\([0-9]{2}\)[\s][0-9]{4}-[0-9]{4}" />
<input type="submit" value="Enviar" />
</fieldset>
</form>

Fig. 4.1

Exemplo 4.1
Se voc digitar este exemplo vai notar que ele resolve o problema da crtica antes de
enviar o formulrio, porm, quando o usurio deixou o campo e passou para outro, o
navegador j poderia informa-lo que o dado no estava no formato correto. No HTML5 h
tambm uma forma de fazer isso sem precisar da ajuda do javascript.

b. As pseudo-classes valid e invalid

A definio do CSS3 incluiu duas novas pseudo-classes que servem como uma luva
quando utilizados em conjunto com as facilidades de crtica de formulrio do HTML5: valid e
invalid. A pseudo-classe valid permite que faamos a definio de um estilo para quando o
contedo de um campo do formulrio tem valor vlido. A pseudo-classe invalid faz o mesmo
para quando o valor do campo for invlido. No exemplo 4.2 acrescentamos a definio de
estilos destas pseudo-classes no cdigo do exemplo 4.1. Na figura 4.2 mostrado o aspecto do
controle enquanto o valor est invlido (enquanto o usurio digita a verificao feita
constantemente). Na figura 4.3 mostrado este controle quando o valor est vlido.
<style>
#tel:valid
{ background-color: #88ff88; }
#tel:invalid { background-color: #FF6666; }
</style>
<form action="demo_form.asp">
<fieldset>Telefone (xx) xxxx-xxxx:<br/>
<input type="tel" id="tel" name="tel"
pattern=
"\([0-9]{2}\)[\s][0-9]{4}-[0-9]{4}" />
<input type="submit" value="Enviar" />
</fieldset>
</form>

Exemplo 4.2
5.

Fig. 4.2 Valor invlido

Fig. 4.3 Valor vlido

O atributo list

Na seo 3 item g deste documento, vimos que a tag <input> com type search abre um
popup menu com sugestes para complementar o dado do campo. O HTML5 tem outra
funcionalidade com este comportamento e ela conseguida atravs da utilizao do atributo
list na tag <input> em conjunto com a nova tag <datalist>. No exemplo 5.1 criamos com o
datalist um lista de pases cujo nome comea com a letra A. Quando o usurio digita esta letra
aberto o popup menu mostrado na figura 5.1. Se o usurio selecionar uma de suas entradas
o campo automaticamente completado com o valor selecionado.
<form action="demo_form.asp">
<fieldset>
<label for="nomePais">Pas: </label>
<input id="nomePais" name="nomePais"
type="text" list="pais" />
<datalist id="pais">
<option value="Afeganisto">
<option value="Albania">
<option value="Alemanha">
<option value="Andorra">
<option value="Angola">
</datalist></fieldset></form>

Exemplo 5.1

http://www.w3schools.com/jsref/jsref_obj_regexp.asp

Fig. 5.1