6FormularioHTML5DW (1)

Desenvolvimento de Sistemas Web FormulariosHTML5

Eduardo Gondo

[email protected]

Agenda

Revisao

Formularios HTML5

Novos atributos

Eduardo Gondo ([email protected]) Desenvolvimento de Sistemas Web Formularios HTML59 de marco de 2014 2 / 1

Formularios review

vimos tres tags para formularios:

dentre estas a possui varios tipos diferentes:

text, password, hidden, radio, checkbox, button, submit,file, image

novos tipos da tag foram adicionados no HTML5

nem todos os novos tipos sao suportados por todos os navegadores

caso o navegador nao de suporte ao novo tipo, ele mostrara comouma caixa de texto

nos proximos eslaides veremos alguns desses novo tipos


date

uma das mais uteis e o tipo data, infelizmente apenas o chrome,safari e o opera oferecem suportefirefox e ie interpretam este tipo como uma caixa de textoveja abaixo um exemplo:

1

Figura: Calendario no chrome


email

ha o tipo email que espera receber um emailinfelizmente a validacao e apenas a existencia do @os principais navegadores oferecem suporte a este campoveja abaixo um exemplo:

1

2

3 email principal:

4

5

6

7

Figura: email no chromeEduardo Gondo ([email protected]) Desenvolvimento de Sistemas Web Formularios HTML59 de marco de 2014 5 / 1

tag datalist

a tag caracteriza uma lista de opcoes pre-definidaspara um elemento

ela adiciona uma caracterstica de auto completar a` tag

veja um exemplo de associado a`

1

2

3

4

5

6

7

8

9

10

11

12


Novas propriedades required

alem das novas tags, o HTML5 introduziu algumas novaspropriedadesa propriedade required pode ser muito util quando queremosgarantir que um determinado campo do formulario seja preenchidoeste atributo pode ser aplicado nas tags: , e

veja abaixo um exemplo:1

quase todos os navegadores oferecem suporte a este atributo,menos o safari e o internet explorer ate a versao 9

Figura: campo obrigatorio


Novas propriedades placeholder

considere que voce tera que montar um formulario onde uma dasinformacoes e a placa de um carro

um recurso que pode indicar para o usuario como ele deve digitar aplaca e o placeholder

atributo aplicavel somente a` tag

1

o placeholder e suportado em todos os navegadores, menos ointernet explorer ate a versao 9

quando comecamos a colocar o texto dentro da caixa de texto elesubstitui o valor especificado no placeholder

Figura: placeholder para placa do carro


Novas propriedades pattern e title

infelizmente o placeholder nao impede que o usuario digite algofora do modelo exibido

para fazer a validacao de formato foi introduzido a propriedadepattern

no pattern podemos definir uma expressao regular (regexp) quesera utilizada para validar o conteudo do campo

caso o valor inserido nao satisfaca a expressao e exibido umamensagem informando o erro

note que a mensagem de erro pode ser definida com a propriedadetitle, veja abaixo um exemplo de placa de carro:

1


Novas propriedades pattern e title

o pattern e suportado em todos os navegadores, menos o internetexplorer ate a versao 9 e o safari

ele e aplicado somente na tag

veja abaixo a imagem de um campo texto com o atributo pattern

Figura: pattern para placa do carro

voce pode conseguir mais informacoes sobre expressoes regularesem http://aurelio.net/regex/

durante nossos exemplos e exerccios vamos colocar expressoesregulares onde for possvel


Exerccios

1) Crie uma pagina HTML que representa um formulario parainclusao de advogado para um sistema de uma empresa deadvocacia. Os dados do advogado sao: nome, cpf, numero da oab,data da expedicao da oab, especialidades (criminal, trabalhista,cvel, internacional e economica), telefone residencial, celular eemail. Note que um advogado pode ter varias especialidades.Utilize a propriedade pattern para cpf, telefone e celular, faca umabusca na internet a` procura das expressoes regulares.

2) Ainda dentro de um escritorio de advocacia, crie uma paginaHTML para cadastramento de processo. Os dados do processo sao:numero (fornecido pelo forum), nome do cliente, advogadoresponsavel, tipo da causa, data de abertura do processo, forum,cidade e uf. Use um componente select para advogado, forum e uf.


Copyleft

Copyleft 2014 Prof. Eduardo Gondo Todos direitos liberados. Reproducao

ou divulgacao total ou parcial deste documento e liberada.


6FormularioHTML5DW (1)

Documents

Transcript of 6FormularioHTML5DW (1)