TECNOLOGIA EM SISTEMAS PARA INTERNET

UNIVALI / CTTMAR
PROGRAMAO I

HTML 5
Professor: Carlos Henrique Bughi
Perodo: 1 C/H: 72

Formulrios

O que existe de novo em HTML 5 para

a construo de formulrios

Formulrios
Atributos do elemento FORM
autocomplete
novalidate

Formulrios
Autocomplete
O atributo autocomplete especifica se um formulrio
ou campo de entrada deve ter autocomplete ligado ou
desligado.
Quando autocomplete est ligado, o navegador sugere
os valores com base nos valores que o usurio tenha
entrado antes.
Dica: possvel ter autocomplete "on" para o formulrio, e
"off" para campos de entrada especficos, ou vice-versa.
Nota: O atributo autocomplete trabalha com <form> e os
seguintes tipos <input>: text, search, url, tel, email, password,
datepickers, range e color.

Formulrios
Autocomplete

Formulrios
novalidate
O atributo novalidate um atributo booleano.
Quando presente, ele especifica que os dados dos
formulrios no devem ser validados quando
submetidos

Formulrios
Atributos do
elemento INPUT

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget

list
min and max
multiple
pattern (regexp)
placeholder
required
step

Formulrios
Autofocus
O atributo autofocus um atributo booleano.
Quando presente, ele especifica que um elemento
<input> deve receber automaticamente o foco
quando a pgina carregada.

Formulrios
form
O atributo form especifica um ou mais formulrios
a que um elemento <input> pertence.
Dica: Para se referir a mais de um formulrio, use uma
lista separada por espao de ids do formulrio.

Formulrios
formaction
O atributo formaction especifica a URL de um
arquivo que ir processar o controle de entrada,
quando o formulrio enviado.
O atributo formaction substitui o atributo action do
elemento <form>.
Nota: usado com type = "submit" e type = "image".

Formulrios
formaction

Formulrios
formenctype
O atributo formenctype especifica como os dados
do formulrio devem ser codificados quando envilo para o servidor (apenas para formulrios com
method = "post")
O atributo formenctype substitui o atributo
enctype do elemento <form>.
Nota: usado com type = "submit" e type = "image".

Formulrios
formenctype

Formulrios
formmethod
O atributo formmethod define o mtodo HTTP para
o envio de formulrio de dados para a URL de ao.
O atributo formmethod substitui o atributo method
do elemento <form>.
Nota: usado com type = "submit" e type = "image".

Formulrios
formmethod

Formulrios
formtarget
O atributo formtarget especifica um nome ou uma
palavra-chave que indica onde exibir a resposta
recebida aps o envio do formulrio.
O atributo formtarget substitui o atributo target do
elemento <form>.
Nota: usado com type = "submit" e type = "image".

Formulrios
formtarget

Formulrios
min e max
Os atributos min e max especificam o valor mnimo
e mximo para um elemento <input>.
Nota: funcionam com os seguintes tipos de entrada:
number, range, date, datetime, datetime-local, month,
time e week.

Formulrios
min e max

Formulrios
multiple
O atributo mltiplo um atributo booleano.
Quando presente, ele especifica que o usurio tem
permisso para inserir mais de um valor no
elemento <input>.
Nota: funciona com os seguintes tipos de entrada: email
e file.

Formulrios
pattern
O atributo pattern especifica uma expresso
regular (regex) que validar o valor do elemento.
Nota: funciona com os seguintes tipos de entrada: text,
search, url, tel, email e password.
Dica: Use o atributo title para descrever o padro para
ajudar o usurio.

Formulrios
placeholder
Especifica uma dica que descreve o valor esperado
de um campo de entrada (por exemplo, um valor
de exemplo ou uma curta descrio do formato
esperado).
A dica exibida no campo de entrada antes de o
usurio digitar um valor.
Nota: funciona com os seguintes tipos de entrada: text,
search, url, tel, email e password.

Formulrios
required
O atributo required um atributo booleano.
Quando presente, ele especifica que um campo de
entrada deve ser preenchido antes de enviar o
formulrio.
Nota: funciona com os seguintes tipos de entrada: text,
search, url, tel, email, password, date, number,
checkbox, radio e file.

Formulrios
step
O atributo step especifica os intervalos de nmeros
vlidos para um elemento <input>.
Exemplo: se step = "3", os nmeros vlidos podem
ser -3, 0, 3, 6, etc
Dica: pode ser utilizado em conjunto com o min e max
para criar uma faixa de valores vlidos.
Nota: funciona com os seguintes tipos de entrada:
number, range, date, datetime, datetime-local, month,
hour e week.

Formulrios
Novos tipos para o elemento input
color
date
datetime
datetime-local
email
month

number
range
search
tel
time
url
week

Formulrios
Elemento

Descrio

Color

Seleo de cor

Date

Seleo de data

Datetime

Seleo de data e hora

Datetime-local

Seleo de data sem fuso horrio

Email

Campos com endereo de e-mail

Month

Seleo de ms (e ano)

Number

Campo com valores numricos

Range

Campo com valor entre um intervalo especificado

Search

Indica um campo de busca (semntico apenas)

Tel

Campo deve conter um nmero de telefone

Time

Seleo de hora

url

Campo deve conter uma url vlida

wek

Seleo de semana e ano

suporte

Atividade prtica
Utilizando HTML 5, crie um formulrio web
conforme imagem indicada.
Observaes:
Campos com * so obrigatrios;
Utilizar o seguinte pattern (regex) para validar o cpf:
^\d{3}\.\d{3}\.\d{3}\-\d{2}$
Tente descobrir qual o pattern para validao de CEP;
Utilize fieldset para agrupar os campos;