Desenvolvimento de Sistemas Web Formul arios HTML5

Eduardo Gondo
profeduardo@ap.com.br

Agenda

Revis ao Formul arios HTML5 Novos atributos

Eduardo Gondo (profeduardo@ap.com.br) Desenvolvimento de Sistemas Web Formul arios HTML5 9 de mar co de 2014

2/1

Formul arios review

vimos tr es tags para formul arios:
<input> <select> <textarea>

dentre estas a <input> possui v arios tipos diferentes: text, password, hidden, radio, checkbox, button, submit, file, image novos tipos da tag <input> foram adicionados no HTML5 nem todos os novos tipos s ao suportados por todos os navegadores caso o navegador n ao d e suporte ao novo tipo, ele mostrar a como uma caixa de texto nos pr oximos eslaides veremos alguns desses novo tipos

Eduardo Gondo (profeduardo@ap.com.br) Desenvolvimento de Sistemas Web Formul arios HTML5 9 de mar co de 2014

3/1

date
uma das mais u teis e o tipo data, infelizmente apenas o chrome, s afari e o opera oferecem suporte refox e ie interpretam este tipo como uma caixa de texto veja abaixo um exemplo:
1

< input type = " date " name = " nascimento " / >

Figura: Calend ario no chrome

Eduardo Gondo (profeduardo@ap.com.br) Desenvolvimento de Sistemas Web Formul arios HTML5 9 de mar co de 2014 4/1

email
h a o tipo email que espera receber um email infelizmente a valida c ao e apenas a exist encia do @ os principais navegadores oferecem suporte a este campo veja abaixo um exemplo:
1 2 3 4 5 6 7

< form method = " get " action = " processa " > < label > email principal: < input type = " email " name = " principal " / > </ label > < input type = " submit " value = " enviar " / > </ form >

Eduardo Gondo (profeduardo@ap.com.br) Desenvolvimento de Sistemas Web Formul arios HTML5 9 de mar co de 2014

5/1

tag datalist
a tag <datalist> caracteriza uma lista de op c oes pr e-denidas para um elemento <input> ela adiciona uma caracter stica de auto completar ` a tag <input> veja um exemplo de <datalist> associado ` a <input>
1 2 3 4 5 6 7 8 9 10 11 12

< form action = " processa " method = " get " > < input list = " browsers " name = " browser " > < datalist id = " browsers " > < option value = " Internet Explorer " > < option value = " Firefox " > < option value = " Chrome " > < option value = " Opera " > < option value = " Safari " > </ datalist > < input type = " submit " value = " enviar " > </ form >

Eduardo Gondo (profeduardo@ap.com.br) Desenvolvimento de Sistemas Web Formul arios HTML5 9 de mar co de 2014

6/1

Novas propriedades required

al em das novas tags, o HTML5 introduziu algumas novas propriedades a propriedade required pode ser muito u til quando queremos garantir que um determinado campo do formul ario seja preenchido este atributo pode ser aplicado nas tags: <input>, <select> e <textarea> veja abaixo um exemplo:
1

< input type = " text " name = " titulo " required = " required " / >

quase todos os navegadores oferecem suporte a este atributo, menos o safari e o internet explorer at e a vers ao 9

Figura: campo obrigat orio

Eduardo Gondo (profeduardo@ap.com.br) Desenvolvimento de Sistemas Web Formul arios HTML5 9 de mar co de 2014 7/1

Novas propriedades placeholder

considere que voc e ter a que montar um formul ario onde uma das informa c oes e a placa de um carro um recurso que pode indicar para o usu ario como ele deve digitar a placa e o placeholder atributo aplic avel somente ` a tag <input>
1

< input type = " text " name = " placa " placeholder = " XXXNNNN " / >

o placeholder e suportado em todos os navegadores, menos o internet explorer at e a vers ao 9 quando come camos a colocar o texto dentro da caixa de texto ele substitui o valor especicado no placeholder

Figura: placeholder para placa do carro

Eduardo Gondo (profeduardo@ap.com.br) Desenvolvimento de Sistemas Web Formul arios HTML5 9 de mar co de 2014 8/1

Novas propriedades pattern e title

infelizmente o placeholder n ao impede que o usu ario digite algo fora do modelo exibido para fazer a valida c ao de formato foi introduzido a propriedade pattern no pattern podemos denir uma express ao regular (regexp) que ser a utilizada para validar o conte udo do campo caso o valor inserido n ao satisfa ca a express ao e exibido uma mensagem informando o erro note que a mensagem de erro pode ser denida com a propriedade title, veja abaixo um exemplo de placa de carro:
1 2 3

< input type = " text " pattern = " [ a-zA-Z ]{3}[0 -9 ]{4} " name = " placa " title = " 3 letras seguidas por 4 d gitos " required = " required " placeholder = " XXXNNNN " / >

Eduardo Gondo (profeduardo@ap.com.br) Desenvolvimento de Sistemas Web Formul arios HTML5 9 de mar co de 2014

9/1

Novas propriedades pattern e title

o pattern e suportado em todos os navegadores, menos o internet explorer at e a vers ao 9 e o safari ele e aplicado somente na tag <input> veja abaixo a imagem de um campo texto com o atributo pattern

Figura: pattern para placa do carro

voc e pode conseguir mais informa c oes sobre express oes regulares em http://aurelio.net/regex/ durante nossos exemplos e exerc cios vamos colocar express oes regulares onde for poss vel
Eduardo Gondo (profeduardo@ap.com.br) Desenvolvimento de Sistemas Web Formul arios HTML5 9 de mar co de 2014 10 / 1

Exerc cios
1) Crie uma p agina HTML que representa um formul ario para inclus ao de advogado para um sistema de uma empresa de advocacia. Os dados do advogado s ao: nome, cpf, n umero da oab, data da expedi c ao da oab, especialidades (criminal, trabalhista, c vel, internacional e econ omica), telefone residencial, celular e email. Note que um advogado pode ter v arias especialidades. Utilize a propriedade pattern para cpf, telefone e celular, fa ca uma busca na internet ` a procura das express oes regulares. 2) Ainda dentro de um escrit orio de advocacia, crie uma p agina HTML para cadastramento de processo. Os dados do processo s ao: n umero (fornecido pelo f orum), nome do cliente, advogado respons avel, tipo da causa, data de abertura do processo, f orum, cidade e uf. Use um componente select para advogado, f orum e uf.

Eduardo Gondo (profeduardo@ap.com.br) Desenvolvimento de Sistemas Web Formul arios HTML5 9 de mar co de 2014

11 / 1

Copyleft

Copyleft 2014 Prof. Eduardo Gondo Todos direitos liberados. Reprodu c ao ou divulga c ao total ou parcial deste documento e liberada.

Eduardo Gondo (profeduardo@ap.com.br) Desenvolvimento de Sistemas Web Formul arios HTML5 9 de mar co de 2014

12 / 1