HTML5 ESSENCIALFundamentos de todo serviccedilo na Web

bull Fundamentos de Webbull Documentos HTMLbull Conteuacutedobull Multimiacutediabull Semacircnticabull Desempenho

EMENTA

3

bull Fundamentos da Webbull Documentos HTMLbull Conteuacutedo

bull Section div span aside paraacutegrafos cabeccedilalhos e rodapeacutebull Tabelasbull Formulaacuterios (campos e atributos)bull Forms 20bull Tags editaacuteveis (contenteditable)bull IFrames

bull Multimiacutediabull Semacircntica

O QUE VEREMOS AGORA

4

FORMS 20bull Apoacutes alguns anos sem evoluccedilotildees nessa aacuterea o

Opera iniciou um processo de criaccedilatildeo de novos campos de formulaacuteriobull A especificaccedilatildeo FORMS 20 eacute mais antiga mas entrou

oficialmente na coleccedilatildeo de especificaccedilotildees da HTML5bull color - Campo para escolha de cores

bull Utiliza a paleta flutuante de cores do sistema operacional

bull date - Escolha de databull datetime - Escolha de data e hora (UTC)bull datetime-local - Data e hora no fuso localbull month Escolha do mecircs

bull Todos usam uma caixa flutuante de escolha de data

6

FORMS 20bull Mais campos novos da HTML5

bull email - Campo para escrita de emails bull number - Exibiccedilatildeo de nuacutemeros como um spinner (bototildees de

rolagem para cima e para baixo)bull tel - Para campos de telefonebull time - Spinner para horaacuterios

bull Por padratildeo exibe apenas horasminutosbull url - Campo para escrita de URLsbull range - Linha com um marcador sliderbull search - Campo de texto para buscas

bull O Chrome exibe um X para apagar o texto quando digitado

7

FORMULAacuteRIOSbull Novos atributos do HTML5

bull placeholder - Novo no HTML5 exibe um texto quando o campo estiver vazio e natildeo estiver com o focobull Quando o usuaacuterio digitar algo o texto do placeholder saibull Ex ltinput type=text placeholder=Digite algo aquigt

bull min e max - Determinam os limites miacutenimos e maacuteximos de campos como range ou number

bull autocomplete - Admite on ou off Determina se o campo poderaacute assumir o autocomplete padratildeo do browser

bull autofocus - Para requisitar o foco assim que a paacutegina for carregada

bull form - Atributo que torna possiacutevel um campo vir escrito fora dos limites das tags ltformgtbull ltinput type=search form=busca_avancada name=termo gtbull ltform id=busca_avancadagt ltformgt

8

FORMULAacuteRIOSbull Steps

bull step - Campo que define de quanto em quanto seraacute o incrementodecremento de spinners (setas pra cima e pra baixo) de campos como time e numberbull A unidade de medida dos steps em campos time eacute o segundobull Deve ser informado um valor positivobull Se o step for muacuteltiplo de 60 o campo time soacute exibe hora e minutos

caso contraacuterio tambeacutem contempla os segundosbull A combinaccedilatildeo dos atributos min max step e value devem ser

coerentes para natildeo proporcionar comportamentos estranhosbull Campos range tambeacutem possuem steps

bull Nestes casos o step coincide com o tamanho em pixels do objeto

9

FORMULAacuteRIOSbull Comportamento ao submeter o formulaacuterio

bull Campos url satildeo prefixados com http se natildeo estiverem no formato correto de URL (iniciando por protocolo)

bull Campos de data satildeo enviados usando sempre um formato padratildeobull A especificaccedilatildeo por enquanto natildeo foi clara quanto ao formato desses

campos Deixou a cargo dos browsersbull Campos color satildeo enviados no formato rgb sendo

bull R - red G - green B - bluebull Forms 20 jaacute embutem validaccedilotildees client-side sem a

necessidade de uso de Javascriptbull Campos preenchidos com valores incorretos para o tipo especiacutefico

satildeo checados e impedem a transmissatildeo do formulaacuterio para o servidorbull Os browsers costumam exibir balotildees sobre o campo indicando o erro

de preenchimento

10

VALIDACcedilOtildeES DE INPUTSbull Campos requeridos

bull required - Torna o campo de preenchimento obrigatoacuterio

bull Mais regras que impedem a transmissatildeo do formulaacuteriobull Campos url devem seguir as regras de codificaccedilatildeo de URLs

bull Espaccedilos devem ser trocados por 20bull Campos email devem conter emails vaacutelidosbull Valores de campos numeacutericos devem estar entre min e max e

serem muacuteltiplos de step se estes forem fornecidos bull Campos com o novo atributo pattern precisam ter um valor

de acordo com a maacutescara informada nelebull Atributo ainda natildeo suportado no IE nem no Safari

11

VALIDACcedilOtildeES DE INPUTSbull Expressotildees regulares

bull pattern - Atributo que restringe a maacutescara do conteuacutedo no campo em questatildeo

bull O atributo title deve ser usado para informar a maacutescara usada de um jeito mais claro ao usuaacuterio leigobull Ex 1 ltinput type=text name=cep

title=CEP 00000-000 pattern=d5-d3 gt

bull Ex 2 ltinput type=text name=cpf title=CPF 000000000-00 pattern=d3(d3)2-d2 gt

bull Ex 3 ltinput type=text name=IP title=Endereccedilo IP vaacutelido para um ponto na rede pattern=([1-9]12) | (1dd) | (2[0-4]d) | 25[0-4] gtbull Para simplificar o pattern do exemplo 3 contemplou apenas o primeiro diacutegito que deve

ser algo entre 1 e 254

bull Os espaccedilos entre as barras em peacute | (pipe) que significam ldquoourdquo loacutegico estatildeo aiacute apenas para melhorar a legibilidade do exemplo Natildeo devem ser digitados

12

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres qualificadores

bull Satildeo usados para validar apenas um caractere do textobull (ponto) - Representa qualquer caracterebull [ e ] - Para englobar lista de valores permitidosbull [^ e ] - Para englobar lista de valores proibidosbull d - Soacute admite nuacutemerosbull w - Soacute admite letras nuacutemeros e caracteres _bull s - Soacute admite caracteres de espaccedilobull D W S - Inversos de suas contrapartidas minuacutesculasbull ( e ) - Agrupamentos de conteuacutedobull | - Ou loacutegico Utilize os parecircnteses para ele afetar um grupo todobull - Retira o poder de algum metacaratere Ele vira simples textobull - - Dentro de listas representam faixas de valores possiacuteveis

13

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres quantificadores

bull Satildeo usados para dar quantidade agrave expressatildeo anteriorbull - Opcional Pode vir zero ou uma vezbull + - Deve vir pelo menos uma vezbull - Opcional Pode vir zero ou vaacuterias vezesbull x - Deve vir exatamente X vezesbull xy - Deve vir de x a y vezesbull x - Deve vir pelo menos x vezesbull y - Deve vir ateacute y vezes

bull Metacaracteres limiacutetrofes (natildeo necessaacuterios aqui)bull ^ - Deve vir no iniacutecio da maacutescara e representa o iniacutecio do textobull $ - Deve vir no final da maacutescara e representa o fim do textobull b - Delimita a borda de um texto (para presufixo de palavras)

14

FORMS 20bull Outras tags para formulaacuterios

bull ltkeygengt - Tag que envia uma chave puacuteblica para o servidor poder utilizar para cifrar o conteuacutedo Soacute quem gera uma chave puacuteblica deteacutem sua chave privada capaz de decifrarbull Essa tag gera um combobox para o usuaacuterio escolher a quantidade de

bits do tamanho dessa chavebull httplistswhatwgorgpipermailwhatwg-whatwgorgattachments

2008071407ea5534attachmenttxtbull ltdatalistgt - Renderiza um suggest no browser Parecido com

o select mas natildeo eacute na verdade um campo de formulaacuteriobull Deve ser usado como provedor de lista de valores para um input textbull Para informar o datalist como provedor de valores de sugestotildees eacute

necessaacuterio definir um id para o datalist e um atributo list para o inputbull ltinput type=text list=ufsgtbull ltdatalist id=ufsgtltoptiongtPernambucoltoptiongtltdatalistgt

15

bull Fundamentos de Webbull Documentos HTMLbull Conteuacutedobull Multimiacutediabull Semacircnticabull Desempenho

EMENTA

3

bull Fundamentos da Webbull Documentos HTMLbull Conteuacutedo

bull Section div span aside paraacutegrafos cabeccedilalhos e rodapeacutebull Tabelasbull Formulaacuterios (campos e atributos)bull Forms 20bull Tags editaacuteveis (contenteditable)bull IFrames

bull Multimiacutediabull Semacircntica

O QUE VEREMOS AGORA

4

FORMS 20bull Apoacutes alguns anos sem evoluccedilotildees nessa aacuterea o

Opera iniciou um processo de criaccedilatildeo de novos campos de formulaacuteriobull A especificaccedilatildeo FORMS 20 eacute mais antiga mas entrou

oficialmente na coleccedilatildeo de especificaccedilotildees da HTML5bull color - Campo para escolha de cores

bull Utiliza a paleta flutuante de cores do sistema operacional

bull date - Escolha de databull datetime - Escolha de data e hora (UTC)bull datetime-local - Data e hora no fuso localbull month Escolha do mecircs

bull Todos usam uma caixa flutuante de escolha de data

6

FORMS 20bull Mais campos novos da HTML5

bull email - Campo para escrita de emails bull number - Exibiccedilatildeo de nuacutemeros como um spinner (bototildees de

rolagem para cima e para baixo)bull tel - Para campos de telefonebull time - Spinner para horaacuterios

bull Por padratildeo exibe apenas horasminutosbull url - Campo para escrita de URLsbull range - Linha com um marcador sliderbull search - Campo de texto para buscas

bull O Chrome exibe um X para apagar o texto quando digitado

7

FORMULAacuteRIOSbull Novos atributos do HTML5

bull placeholder - Novo no HTML5 exibe um texto quando o campo estiver vazio e natildeo estiver com o focobull Quando o usuaacuterio digitar algo o texto do placeholder saibull Ex ltinput type=text placeholder=Digite algo aquigt

bull min e max - Determinam os limites miacutenimos e maacuteximos de campos como range ou number

bull autocomplete - Admite on ou off Determina se o campo poderaacute assumir o autocomplete padratildeo do browser

bull autofocus - Para requisitar o foco assim que a paacutegina for carregada

bull form - Atributo que torna possiacutevel um campo vir escrito fora dos limites das tags ltformgtbull ltinput type=search form=busca_avancada name=termo gtbull ltform id=busca_avancadagt ltformgt

8

FORMULAacuteRIOSbull Steps

bull step - Campo que define de quanto em quanto seraacute o incrementodecremento de spinners (setas pra cima e pra baixo) de campos como time e numberbull A unidade de medida dos steps em campos time eacute o segundobull Deve ser informado um valor positivobull Se o step for muacuteltiplo de 60 o campo time soacute exibe hora e minutos

caso contraacuterio tambeacutem contempla os segundosbull A combinaccedilatildeo dos atributos min max step e value devem ser

coerentes para natildeo proporcionar comportamentos estranhosbull Campos range tambeacutem possuem steps

bull Nestes casos o step coincide com o tamanho em pixels do objeto

9

FORMULAacuteRIOSbull Comportamento ao submeter o formulaacuterio

bull Campos url satildeo prefixados com http se natildeo estiverem no formato correto de URL (iniciando por protocolo)

bull Campos de data satildeo enviados usando sempre um formato padratildeobull A especificaccedilatildeo por enquanto natildeo foi clara quanto ao formato desses

campos Deixou a cargo dos browsersbull Campos color satildeo enviados no formato rgb sendo

bull R - red G - green B - bluebull Forms 20 jaacute embutem validaccedilotildees client-side sem a

necessidade de uso de Javascriptbull Campos preenchidos com valores incorretos para o tipo especiacutefico

satildeo checados e impedem a transmissatildeo do formulaacuterio para o servidorbull Os browsers costumam exibir balotildees sobre o campo indicando o erro

de preenchimento

10

VALIDACcedilOtildeES DE INPUTSbull Campos requeridos

bull required - Torna o campo de preenchimento obrigatoacuterio

bull Mais regras que impedem a transmissatildeo do formulaacuteriobull Campos url devem seguir as regras de codificaccedilatildeo de URLs

bull Espaccedilos devem ser trocados por 20bull Campos email devem conter emails vaacutelidosbull Valores de campos numeacutericos devem estar entre min e max e

serem muacuteltiplos de step se estes forem fornecidos bull Campos com o novo atributo pattern precisam ter um valor

de acordo com a maacutescara informada nelebull Atributo ainda natildeo suportado no IE nem no Safari

11

VALIDACcedilOtildeES DE INPUTSbull Expressotildees regulares

bull pattern - Atributo que restringe a maacutescara do conteuacutedo no campo em questatildeo

bull O atributo title deve ser usado para informar a maacutescara usada de um jeito mais claro ao usuaacuterio leigobull Ex 1 ltinput type=text name=cep

title=CEP 00000-000 pattern=d5-d3 gt

bull Ex 2 ltinput type=text name=cpf title=CPF 000000000-00 pattern=d3(d3)2-d2 gt

bull Ex 3 ltinput type=text name=IP title=Endereccedilo IP vaacutelido para um ponto na rede pattern=([1-9]12) | (1dd) | (2[0-4]d) | 25[0-4] gtbull Para simplificar o pattern do exemplo 3 contemplou apenas o primeiro diacutegito que deve

ser algo entre 1 e 254

bull Os espaccedilos entre as barras em peacute | (pipe) que significam ldquoourdquo loacutegico estatildeo aiacute apenas para melhorar a legibilidade do exemplo Natildeo devem ser digitados

12

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres qualificadores

bull Satildeo usados para validar apenas um caractere do textobull (ponto) - Representa qualquer caracterebull [ e ] - Para englobar lista de valores permitidosbull [^ e ] - Para englobar lista de valores proibidosbull d - Soacute admite nuacutemerosbull w - Soacute admite letras nuacutemeros e caracteres _bull s - Soacute admite caracteres de espaccedilobull D W S - Inversos de suas contrapartidas minuacutesculasbull ( e ) - Agrupamentos de conteuacutedobull | - Ou loacutegico Utilize os parecircnteses para ele afetar um grupo todobull - Retira o poder de algum metacaratere Ele vira simples textobull - - Dentro de listas representam faixas de valores possiacuteveis

13

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres quantificadores

bull Satildeo usados para dar quantidade agrave expressatildeo anteriorbull - Opcional Pode vir zero ou uma vezbull + - Deve vir pelo menos uma vezbull - Opcional Pode vir zero ou vaacuterias vezesbull x - Deve vir exatamente X vezesbull xy - Deve vir de x a y vezesbull x - Deve vir pelo menos x vezesbull y - Deve vir ateacute y vezes

bull Metacaracteres limiacutetrofes (natildeo necessaacuterios aqui)bull ^ - Deve vir no iniacutecio da maacutescara e representa o iniacutecio do textobull $ - Deve vir no final da maacutescara e representa o fim do textobull b - Delimita a borda de um texto (para presufixo de palavras)

14

FORMS 20bull Outras tags para formulaacuterios

bull ltkeygengt - Tag que envia uma chave puacuteblica para o servidor poder utilizar para cifrar o conteuacutedo Soacute quem gera uma chave puacuteblica deteacutem sua chave privada capaz de decifrarbull Essa tag gera um combobox para o usuaacuterio escolher a quantidade de

bits do tamanho dessa chavebull httplistswhatwgorgpipermailwhatwg-whatwgorgattachments

2008071407ea5534attachmenttxtbull ltdatalistgt - Renderiza um suggest no browser Parecido com

o select mas natildeo eacute na verdade um campo de formulaacuteriobull Deve ser usado como provedor de lista de valores para um input textbull Para informar o datalist como provedor de valores de sugestotildees eacute

necessaacuterio definir um id para o datalist e um atributo list para o inputbull ltinput type=text list=ufsgtbull ltdatalist id=ufsgtltoptiongtPernambucoltoptiongtltdatalistgt

15

bull Fundamentos da Webbull Documentos HTMLbull Conteuacutedo

bull Section div span aside paraacutegrafos cabeccedilalhos e rodapeacutebull Tabelasbull Formulaacuterios (campos e atributos)bull Forms 20bull Tags editaacuteveis (contenteditable)bull IFrames

bull Multimiacutediabull Semacircntica

O QUE VEREMOS AGORA

4

FORMS 20bull Apoacutes alguns anos sem evoluccedilotildees nessa aacuterea o

Opera iniciou um processo de criaccedilatildeo de novos campos de formulaacuteriobull A especificaccedilatildeo FORMS 20 eacute mais antiga mas entrou

oficialmente na coleccedilatildeo de especificaccedilotildees da HTML5bull color - Campo para escolha de cores

bull Utiliza a paleta flutuante de cores do sistema operacional

bull date - Escolha de databull datetime - Escolha de data e hora (UTC)bull datetime-local - Data e hora no fuso localbull month Escolha do mecircs

bull Todos usam uma caixa flutuante de escolha de data

6

FORMS 20bull Mais campos novos da HTML5

bull email - Campo para escrita de emails bull number - Exibiccedilatildeo de nuacutemeros como um spinner (bototildees de

rolagem para cima e para baixo)bull tel - Para campos de telefonebull time - Spinner para horaacuterios

bull Por padratildeo exibe apenas horasminutosbull url - Campo para escrita de URLsbull range - Linha com um marcador sliderbull search - Campo de texto para buscas

bull O Chrome exibe um X para apagar o texto quando digitado

7

FORMULAacuteRIOSbull Novos atributos do HTML5

bull placeholder - Novo no HTML5 exibe um texto quando o campo estiver vazio e natildeo estiver com o focobull Quando o usuaacuterio digitar algo o texto do placeholder saibull Ex ltinput type=text placeholder=Digite algo aquigt

bull min e max - Determinam os limites miacutenimos e maacuteximos de campos como range ou number

bull autocomplete - Admite on ou off Determina se o campo poderaacute assumir o autocomplete padratildeo do browser

bull autofocus - Para requisitar o foco assim que a paacutegina for carregada

bull form - Atributo que torna possiacutevel um campo vir escrito fora dos limites das tags ltformgtbull ltinput type=search form=busca_avancada name=termo gtbull ltform id=busca_avancadagt ltformgt

8

FORMULAacuteRIOSbull Steps

bull step - Campo que define de quanto em quanto seraacute o incrementodecremento de spinners (setas pra cima e pra baixo) de campos como time e numberbull A unidade de medida dos steps em campos time eacute o segundobull Deve ser informado um valor positivobull Se o step for muacuteltiplo de 60 o campo time soacute exibe hora e minutos

caso contraacuterio tambeacutem contempla os segundosbull A combinaccedilatildeo dos atributos min max step e value devem ser

coerentes para natildeo proporcionar comportamentos estranhosbull Campos range tambeacutem possuem steps

bull Nestes casos o step coincide com o tamanho em pixels do objeto

9

FORMULAacuteRIOSbull Comportamento ao submeter o formulaacuterio

bull Campos url satildeo prefixados com http se natildeo estiverem no formato correto de URL (iniciando por protocolo)

bull Campos de data satildeo enviados usando sempre um formato padratildeobull A especificaccedilatildeo por enquanto natildeo foi clara quanto ao formato desses

campos Deixou a cargo dos browsersbull Campos color satildeo enviados no formato rgb sendo

bull R - red G - green B - bluebull Forms 20 jaacute embutem validaccedilotildees client-side sem a

necessidade de uso de Javascriptbull Campos preenchidos com valores incorretos para o tipo especiacutefico

satildeo checados e impedem a transmissatildeo do formulaacuterio para o servidorbull Os browsers costumam exibir balotildees sobre o campo indicando o erro

de preenchimento

10

VALIDACcedilOtildeES DE INPUTSbull Campos requeridos

bull required - Torna o campo de preenchimento obrigatoacuterio

bull Mais regras que impedem a transmissatildeo do formulaacuteriobull Campos url devem seguir as regras de codificaccedilatildeo de URLs

bull Espaccedilos devem ser trocados por 20bull Campos email devem conter emails vaacutelidosbull Valores de campos numeacutericos devem estar entre min e max e

serem muacuteltiplos de step se estes forem fornecidos bull Campos com o novo atributo pattern precisam ter um valor

de acordo com a maacutescara informada nelebull Atributo ainda natildeo suportado no IE nem no Safari

11

VALIDACcedilOtildeES DE INPUTSbull Expressotildees regulares

bull pattern - Atributo que restringe a maacutescara do conteuacutedo no campo em questatildeo

bull O atributo title deve ser usado para informar a maacutescara usada de um jeito mais claro ao usuaacuterio leigobull Ex 1 ltinput type=text name=cep

title=CEP 00000-000 pattern=d5-d3 gt

bull Ex 2 ltinput type=text name=cpf title=CPF 000000000-00 pattern=d3(d3)2-d2 gt

bull Ex 3 ltinput type=text name=IP title=Endereccedilo IP vaacutelido para um ponto na rede pattern=([1-9]12) | (1dd) | (2[0-4]d) | 25[0-4] gtbull Para simplificar o pattern do exemplo 3 contemplou apenas o primeiro diacutegito que deve

ser algo entre 1 e 254

bull Os espaccedilos entre as barras em peacute | (pipe) que significam ldquoourdquo loacutegico estatildeo aiacute apenas para melhorar a legibilidade do exemplo Natildeo devem ser digitados

12

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres qualificadores

bull Satildeo usados para validar apenas um caractere do textobull (ponto) - Representa qualquer caracterebull [ e ] - Para englobar lista de valores permitidosbull [^ e ] - Para englobar lista de valores proibidosbull d - Soacute admite nuacutemerosbull w - Soacute admite letras nuacutemeros e caracteres _bull s - Soacute admite caracteres de espaccedilobull D W S - Inversos de suas contrapartidas minuacutesculasbull ( e ) - Agrupamentos de conteuacutedobull | - Ou loacutegico Utilize os parecircnteses para ele afetar um grupo todobull - Retira o poder de algum metacaratere Ele vira simples textobull - - Dentro de listas representam faixas de valores possiacuteveis

13

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres quantificadores

bull Satildeo usados para dar quantidade agrave expressatildeo anteriorbull - Opcional Pode vir zero ou uma vezbull + - Deve vir pelo menos uma vezbull - Opcional Pode vir zero ou vaacuterias vezesbull x - Deve vir exatamente X vezesbull xy - Deve vir de x a y vezesbull x - Deve vir pelo menos x vezesbull y - Deve vir ateacute y vezes

bull Metacaracteres limiacutetrofes (natildeo necessaacuterios aqui)bull ^ - Deve vir no iniacutecio da maacutescara e representa o iniacutecio do textobull $ - Deve vir no final da maacutescara e representa o fim do textobull b - Delimita a borda de um texto (para presufixo de palavras)

14

FORMS 20bull Outras tags para formulaacuterios

bull ltkeygengt - Tag que envia uma chave puacuteblica para o servidor poder utilizar para cifrar o conteuacutedo Soacute quem gera uma chave puacuteblica deteacutem sua chave privada capaz de decifrarbull Essa tag gera um combobox para o usuaacuterio escolher a quantidade de

bits do tamanho dessa chavebull httplistswhatwgorgpipermailwhatwg-whatwgorgattachments

2008071407ea5534attachmenttxtbull ltdatalistgt - Renderiza um suggest no browser Parecido com

o select mas natildeo eacute na verdade um campo de formulaacuteriobull Deve ser usado como provedor de lista de valores para um input textbull Para informar o datalist como provedor de valores de sugestotildees eacute

necessaacuterio definir um id para o datalist e um atributo list para o inputbull ltinput type=text list=ufsgtbull ltdatalist id=ufsgtltoptiongtPernambucoltoptiongtltdatalistgt

15

FORMS 20bull Apoacutes alguns anos sem evoluccedilotildees nessa aacuterea o

Opera iniciou um processo de criaccedilatildeo de novos campos de formulaacuteriobull A especificaccedilatildeo FORMS 20 eacute mais antiga mas entrou

oficialmente na coleccedilatildeo de especificaccedilotildees da HTML5bull color - Campo para escolha de cores

bull Utiliza a paleta flutuante de cores do sistema operacional

bull date - Escolha de databull datetime - Escolha de data e hora (UTC)bull datetime-local - Data e hora no fuso localbull month Escolha do mecircs

bull Todos usam uma caixa flutuante de escolha de data

6

FORMS 20bull Mais campos novos da HTML5

bull email - Campo para escrita de emails bull number - Exibiccedilatildeo de nuacutemeros como um spinner (bototildees de

rolagem para cima e para baixo)bull tel - Para campos de telefonebull time - Spinner para horaacuterios

bull Por padratildeo exibe apenas horasminutosbull url - Campo para escrita de URLsbull range - Linha com um marcador sliderbull search - Campo de texto para buscas

bull O Chrome exibe um X para apagar o texto quando digitado

7

FORMULAacuteRIOSbull Novos atributos do HTML5

bull placeholder - Novo no HTML5 exibe um texto quando o campo estiver vazio e natildeo estiver com o focobull Quando o usuaacuterio digitar algo o texto do placeholder saibull Ex ltinput type=text placeholder=Digite algo aquigt

bull min e max - Determinam os limites miacutenimos e maacuteximos de campos como range ou number

bull autocomplete - Admite on ou off Determina se o campo poderaacute assumir o autocomplete padratildeo do browser

bull autofocus - Para requisitar o foco assim que a paacutegina for carregada

bull form - Atributo que torna possiacutevel um campo vir escrito fora dos limites das tags ltformgtbull ltinput type=search form=busca_avancada name=termo gtbull ltform id=busca_avancadagt ltformgt

8

FORMULAacuteRIOSbull Steps

bull step - Campo que define de quanto em quanto seraacute o incrementodecremento de spinners (setas pra cima e pra baixo) de campos como time e numberbull A unidade de medida dos steps em campos time eacute o segundobull Deve ser informado um valor positivobull Se o step for muacuteltiplo de 60 o campo time soacute exibe hora e minutos

caso contraacuterio tambeacutem contempla os segundosbull A combinaccedilatildeo dos atributos min max step e value devem ser

coerentes para natildeo proporcionar comportamentos estranhosbull Campos range tambeacutem possuem steps

bull Nestes casos o step coincide com o tamanho em pixels do objeto

9

FORMULAacuteRIOSbull Comportamento ao submeter o formulaacuterio

bull Campos url satildeo prefixados com http se natildeo estiverem no formato correto de URL (iniciando por protocolo)

bull Campos de data satildeo enviados usando sempre um formato padratildeobull A especificaccedilatildeo por enquanto natildeo foi clara quanto ao formato desses

campos Deixou a cargo dos browsersbull Campos color satildeo enviados no formato rgb sendo

bull R - red G - green B - bluebull Forms 20 jaacute embutem validaccedilotildees client-side sem a

necessidade de uso de Javascriptbull Campos preenchidos com valores incorretos para o tipo especiacutefico

satildeo checados e impedem a transmissatildeo do formulaacuterio para o servidorbull Os browsers costumam exibir balotildees sobre o campo indicando o erro

de preenchimento

10

VALIDACcedilOtildeES DE INPUTSbull Campos requeridos

bull required - Torna o campo de preenchimento obrigatoacuterio

bull Mais regras que impedem a transmissatildeo do formulaacuteriobull Campos url devem seguir as regras de codificaccedilatildeo de URLs

bull Espaccedilos devem ser trocados por 20bull Campos email devem conter emails vaacutelidosbull Valores de campos numeacutericos devem estar entre min e max e

serem muacuteltiplos de step se estes forem fornecidos bull Campos com o novo atributo pattern precisam ter um valor

de acordo com a maacutescara informada nelebull Atributo ainda natildeo suportado no IE nem no Safari

11

VALIDACcedilOtildeES DE INPUTSbull Expressotildees regulares

bull pattern - Atributo que restringe a maacutescara do conteuacutedo no campo em questatildeo

bull O atributo title deve ser usado para informar a maacutescara usada de um jeito mais claro ao usuaacuterio leigobull Ex 1 ltinput type=text name=cep

title=CEP 00000-000 pattern=d5-d3 gt

bull Ex 2 ltinput type=text name=cpf title=CPF 000000000-00 pattern=d3(d3)2-d2 gt

bull Ex 3 ltinput type=text name=IP title=Endereccedilo IP vaacutelido para um ponto na rede pattern=([1-9]12) | (1dd) | (2[0-4]d) | 25[0-4] gtbull Para simplificar o pattern do exemplo 3 contemplou apenas o primeiro diacutegito que deve

ser algo entre 1 e 254

bull Os espaccedilos entre as barras em peacute | (pipe) que significam ldquoourdquo loacutegico estatildeo aiacute apenas para melhorar a legibilidade do exemplo Natildeo devem ser digitados

12

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres qualificadores

bull Satildeo usados para validar apenas um caractere do textobull (ponto) - Representa qualquer caracterebull [ e ] - Para englobar lista de valores permitidosbull [^ e ] - Para englobar lista de valores proibidosbull d - Soacute admite nuacutemerosbull w - Soacute admite letras nuacutemeros e caracteres _bull s - Soacute admite caracteres de espaccedilobull D W S - Inversos de suas contrapartidas minuacutesculasbull ( e ) - Agrupamentos de conteuacutedobull | - Ou loacutegico Utilize os parecircnteses para ele afetar um grupo todobull - Retira o poder de algum metacaratere Ele vira simples textobull - - Dentro de listas representam faixas de valores possiacuteveis

13

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres quantificadores

bull Satildeo usados para dar quantidade agrave expressatildeo anteriorbull - Opcional Pode vir zero ou uma vezbull + - Deve vir pelo menos uma vezbull - Opcional Pode vir zero ou vaacuterias vezesbull x - Deve vir exatamente X vezesbull xy - Deve vir de x a y vezesbull x - Deve vir pelo menos x vezesbull y - Deve vir ateacute y vezes

bull Metacaracteres limiacutetrofes (natildeo necessaacuterios aqui)bull ^ - Deve vir no iniacutecio da maacutescara e representa o iniacutecio do textobull $ - Deve vir no final da maacutescara e representa o fim do textobull b - Delimita a borda de um texto (para presufixo de palavras)

14

FORMS 20bull Outras tags para formulaacuterios

bull ltkeygengt - Tag que envia uma chave puacuteblica para o servidor poder utilizar para cifrar o conteuacutedo Soacute quem gera uma chave puacuteblica deteacutem sua chave privada capaz de decifrarbull Essa tag gera um combobox para o usuaacuterio escolher a quantidade de

bits do tamanho dessa chavebull httplistswhatwgorgpipermailwhatwg-whatwgorgattachments

2008071407ea5534attachmenttxtbull ltdatalistgt - Renderiza um suggest no browser Parecido com

o select mas natildeo eacute na verdade um campo de formulaacuteriobull Deve ser usado como provedor de lista de valores para um input textbull Para informar o datalist como provedor de valores de sugestotildees eacute

necessaacuterio definir um id para o datalist e um atributo list para o inputbull ltinput type=text list=ufsgtbull ltdatalist id=ufsgtltoptiongtPernambucoltoptiongtltdatalistgt

15

FORMS 20bull Mais campos novos da HTML5

bull email - Campo para escrita de emails bull number - Exibiccedilatildeo de nuacutemeros como um spinner (bototildees de

rolagem para cima e para baixo)bull tel - Para campos de telefonebull time - Spinner para horaacuterios

bull Por padratildeo exibe apenas horasminutosbull url - Campo para escrita de URLsbull range - Linha com um marcador sliderbull search - Campo de texto para buscas

bull O Chrome exibe um X para apagar o texto quando digitado

7

FORMULAacuteRIOSbull Novos atributos do HTML5

bull placeholder - Novo no HTML5 exibe um texto quando o campo estiver vazio e natildeo estiver com o focobull Quando o usuaacuterio digitar algo o texto do placeholder saibull Ex ltinput type=text placeholder=Digite algo aquigt

bull min e max - Determinam os limites miacutenimos e maacuteximos de campos como range ou number

bull autocomplete - Admite on ou off Determina se o campo poderaacute assumir o autocomplete padratildeo do browser

bull autofocus - Para requisitar o foco assim que a paacutegina for carregada

bull form - Atributo que torna possiacutevel um campo vir escrito fora dos limites das tags ltformgtbull ltinput type=search form=busca_avancada name=termo gtbull ltform id=busca_avancadagt ltformgt

8

FORMULAacuteRIOSbull Steps

bull step - Campo que define de quanto em quanto seraacute o incrementodecremento de spinners (setas pra cima e pra baixo) de campos como time e numberbull A unidade de medida dos steps em campos time eacute o segundobull Deve ser informado um valor positivobull Se o step for muacuteltiplo de 60 o campo time soacute exibe hora e minutos

caso contraacuterio tambeacutem contempla os segundosbull A combinaccedilatildeo dos atributos min max step e value devem ser

coerentes para natildeo proporcionar comportamentos estranhosbull Campos range tambeacutem possuem steps

bull Nestes casos o step coincide com o tamanho em pixels do objeto

9

FORMULAacuteRIOSbull Comportamento ao submeter o formulaacuterio

bull Campos url satildeo prefixados com http se natildeo estiverem no formato correto de URL (iniciando por protocolo)

bull Campos de data satildeo enviados usando sempre um formato padratildeobull A especificaccedilatildeo por enquanto natildeo foi clara quanto ao formato desses

campos Deixou a cargo dos browsersbull Campos color satildeo enviados no formato rgb sendo

bull R - red G - green B - bluebull Forms 20 jaacute embutem validaccedilotildees client-side sem a

necessidade de uso de Javascriptbull Campos preenchidos com valores incorretos para o tipo especiacutefico

satildeo checados e impedem a transmissatildeo do formulaacuterio para o servidorbull Os browsers costumam exibir balotildees sobre o campo indicando o erro

de preenchimento

10

VALIDACcedilOtildeES DE INPUTSbull Campos requeridos

bull required - Torna o campo de preenchimento obrigatoacuterio

bull Mais regras que impedem a transmissatildeo do formulaacuteriobull Campos url devem seguir as regras de codificaccedilatildeo de URLs

bull Espaccedilos devem ser trocados por 20bull Campos email devem conter emails vaacutelidosbull Valores de campos numeacutericos devem estar entre min e max e

serem muacuteltiplos de step se estes forem fornecidos bull Campos com o novo atributo pattern precisam ter um valor

de acordo com a maacutescara informada nelebull Atributo ainda natildeo suportado no IE nem no Safari

11

VALIDACcedilOtildeES DE INPUTSbull Expressotildees regulares

bull pattern - Atributo que restringe a maacutescara do conteuacutedo no campo em questatildeo

bull O atributo title deve ser usado para informar a maacutescara usada de um jeito mais claro ao usuaacuterio leigobull Ex 1 ltinput type=text name=cep

title=CEP 00000-000 pattern=d5-d3 gt

bull Ex 2 ltinput type=text name=cpf title=CPF 000000000-00 pattern=d3(d3)2-d2 gt

bull Ex 3 ltinput type=text name=IP title=Endereccedilo IP vaacutelido para um ponto na rede pattern=([1-9]12) | (1dd) | (2[0-4]d) | 25[0-4] gtbull Para simplificar o pattern do exemplo 3 contemplou apenas o primeiro diacutegito que deve

ser algo entre 1 e 254

bull Os espaccedilos entre as barras em peacute | (pipe) que significam ldquoourdquo loacutegico estatildeo aiacute apenas para melhorar a legibilidade do exemplo Natildeo devem ser digitados

12

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres qualificadores

bull Satildeo usados para validar apenas um caractere do textobull (ponto) - Representa qualquer caracterebull [ e ] - Para englobar lista de valores permitidosbull [^ e ] - Para englobar lista de valores proibidosbull d - Soacute admite nuacutemerosbull w - Soacute admite letras nuacutemeros e caracteres _bull s - Soacute admite caracteres de espaccedilobull D W S - Inversos de suas contrapartidas minuacutesculasbull ( e ) - Agrupamentos de conteuacutedobull | - Ou loacutegico Utilize os parecircnteses para ele afetar um grupo todobull - Retira o poder de algum metacaratere Ele vira simples textobull - - Dentro de listas representam faixas de valores possiacuteveis

13

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres quantificadores

bull Satildeo usados para dar quantidade agrave expressatildeo anteriorbull - Opcional Pode vir zero ou uma vezbull + - Deve vir pelo menos uma vezbull - Opcional Pode vir zero ou vaacuterias vezesbull x - Deve vir exatamente X vezesbull xy - Deve vir de x a y vezesbull x - Deve vir pelo menos x vezesbull y - Deve vir ateacute y vezes

bull Metacaracteres limiacutetrofes (natildeo necessaacuterios aqui)bull ^ - Deve vir no iniacutecio da maacutescara e representa o iniacutecio do textobull $ - Deve vir no final da maacutescara e representa o fim do textobull b - Delimita a borda de um texto (para presufixo de palavras)

14

FORMS 20bull Outras tags para formulaacuterios

bull ltkeygengt - Tag que envia uma chave puacuteblica para o servidor poder utilizar para cifrar o conteuacutedo Soacute quem gera uma chave puacuteblica deteacutem sua chave privada capaz de decifrarbull Essa tag gera um combobox para o usuaacuterio escolher a quantidade de

bits do tamanho dessa chavebull httplistswhatwgorgpipermailwhatwg-whatwgorgattachments

2008071407ea5534attachmenttxtbull ltdatalistgt - Renderiza um suggest no browser Parecido com

o select mas natildeo eacute na verdade um campo de formulaacuteriobull Deve ser usado como provedor de lista de valores para um input textbull Para informar o datalist como provedor de valores de sugestotildees eacute

necessaacuterio definir um id para o datalist e um atributo list para o inputbull ltinput type=text list=ufsgtbull ltdatalist id=ufsgtltoptiongtPernambucoltoptiongtltdatalistgt

15

FORMULAacuteRIOSbull Novos atributos do HTML5

bull placeholder - Novo no HTML5 exibe um texto quando o campo estiver vazio e natildeo estiver com o focobull Quando o usuaacuterio digitar algo o texto do placeholder saibull Ex ltinput type=text placeholder=Digite algo aquigt

bull min e max - Determinam os limites miacutenimos e maacuteximos de campos como range ou number

bull autocomplete - Admite on ou off Determina se o campo poderaacute assumir o autocomplete padratildeo do browser

bull autofocus - Para requisitar o foco assim que a paacutegina for carregada

bull form - Atributo que torna possiacutevel um campo vir escrito fora dos limites das tags ltformgtbull ltinput type=search form=busca_avancada name=termo gtbull ltform id=busca_avancadagt ltformgt

8

FORMULAacuteRIOSbull Steps

bull step - Campo que define de quanto em quanto seraacute o incrementodecremento de spinners (setas pra cima e pra baixo) de campos como time e numberbull A unidade de medida dos steps em campos time eacute o segundobull Deve ser informado um valor positivobull Se o step for muacuteltiplo de 60 o campo time soacute exibe hora e minutos

caso contraacuterio tambeacutem contempla os segundosbull A combinaccedilatildeo dos atributos min max step e value devem ser

coerentes para natildeo proporcionar comportamentos estranhosbull Campos range tambeacutem possuem steps

bull Nestes casos o step coincide com o tamanho em pixels do objeto

9

FORMULAacuteRIOSbull Comportamento ao submeter o formulaacuterio

bull Campos url satildeo prefixados com http se natildeo estiverem no formato correto de URL (iniciando por protocolo)

bull Campos de data satildeo enviados usando sempre um formato padratildeobull A especificaccedilatildeo por enquanto natildeo foi clara quanto ao formato desses

campos Deixou a cargo dos browsersbull Campos color satildeo enviados no formato rgb sendo

bull R - red G - green B - bluebull Forms 20 jaacute embutem validaccedilotildees client-side sem a

necessidade de uso de Javascriptbull Campos preenchidos com valores incorretos para o tipo especiacutefico

satildeo checados e impedem a transmissatildeo do formulaacuterio para o servidorbull Os browsers costumam exibir balotildees sobre o campo indicando o erro

de preenchimento

10

VALIDACcedilOtildeES DE INPUTSbull Campos requeridos

bull required - Torna o campo de preenchimento obrigatoacuterio

bull Mais regras que impedem a transmissatildeo do formulaacuteriobull Campos url devem seguir as regras de codificaccedilatildeo de URLs

bull Espaccedilos devem ser trocados por 20bull Campos email devem conter emails vaacutelidosbull Valores de campos numeacutericos devem estar entre min e max e

serem muacuteltiplos de step se estes forem fornecidos bull Campos com o novo atributo pattern precisam ter um valor

de acordo com a maacutescara informada nelebull Atributo ainda natildeo suportado no IE nem no Safari

11

VALIDACcedilOtildeES DE INPUTSbull Expressotildees regulares

bull pattern - Atributo que restringe a maacutescara do conteuacutedo no campo em questatildeo

bull O atributo title deve ser usado para informar a maacutescara usada de um jeito mais claro ao usuaacuterio leigobull Ex 1 ltinput type=text name=cep

title=CEP 00000-000 pattern=d5-d3 gt

bull Ex 2 ltinput type=text name=cpf title=CPF 000000000-00 pattern=d3(d3)2-d2 gt

bull Ex 3 ltinput type=text name=IP title=Endereccedilo IP vaacutelido para um ponto na rede pattern=([1-9]12) | (1dd) | (2[0-4]d) | 25[0-4] gtbull Para simplificar o pattern do exemplo 3 contemplou apenas o primeiro diacutegito que deve

ser algo entre 1 e 254

bull Os espaccedilos entre as barras em peacute | (pipe) que significam ldquoourdquo loacutegico estatildeo aiacute apenas para melhorar a legibilidade do exemplo Natildeo devem ser digitados

12

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres qualificadores

bull Satildeo usados para validar apenas um caractere do textobull (ponto) - Representa qualquer caracterebull [ e ] - Para englobar lista de valores permitidosbull [^ e ] - Para englobar lista de valores proibidosbull d - Soacute admite nuacutemerosbull w - Soacute admite letras nuacutemeros e caracteres _bull s - Soacute admite caracteres de espaccedilobull D W S - Inversos de suas contrapartidas minuacutesculasbull ( e ) - Agrupamentos de conteuacutedobull | - Ou loacutegico Utilize os parecircnteses para ele afetar um grupo todobull - Retira o poder de algum metacaratere Ele vira simples textobull - - Dentro de listas representam faixas de valores possiacuteveis

13

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres quantificadores

bull Satildeo usados para dar quantidade agrave expressatildeo anteriorbull - Opcional Pode vir zero ou uma vezbull + - Deve vir pelo menos uma vezbull - Opcional Pode vir zero ou vaacuterias vezesbull x - Deve vir exatamente X vezesbull xy - Deve vir de x a y vezesbull x - Deve vir pelo menos x vezesbull y - Deve vir ateacute y vezes

bull Metacaracteres limiacutetrofes (natildeo necessaacuterios aqui)bull ^ - Deve vir no iniacutecio da maacutescara e representa o iniacutecio do textobull $ - Deve vir no final da maacutescara e representa o fim do textobull b - Delimita a borda de um texto (para presufixo de palavras)

14

FORMS 20bull Outras tags para formulaacuterios

bull ltkeygengt - Tag que envia uma chave puacuteblica para o servidor poder utilizar para cifrar o conteuacutedo Soacute quem gera uma chave puacuteblica deteacutem sua chave privada capaz de decifrarbull Essa tag gera um combobox para o usuaacuterio escolher a quantidade de

bits do tamanho dessa chavebull httplistswhatwgorgpipermailwhatwg-whatwgorgattachments

2008071407ea5534attachmenttxtbull ltdatalistgt - Renderiza um suggest no browser Parecido com

o select mas natildeo eacute na verdade um campo de formulaacuteriobull Deve ser usado como provedor de lista de valores para um input textbull Para informar o datalist como provedor de valores de sugestotildees eacute

necessaacuterio definir um id para o datalist e um atributo list para o inputbull ltinput type=text list=ufsgtbull ltdatalist id=ufsgtltoptiongtPernambucoltoptiongtltdatalistgt

15

FORMULAacuteRIOSbull Steps

bull step - Campo que define de quanto em quanto seraacute o incrementodecremento de spinners (setas pra cima e pra baixo) de campos como time e numberbull A unidade de medida dos steps em campos time eacute o segundobull Deve ser informado um valor positivobull Se o step for muacuteltiplo de 60 o campo time soacute exibe hora e minutos

caso contraacuterio tambeacutem contempla os segundosbull A combinaccedilatildeo dos atributos min max step e value devem ser

coerentes para natildeo proporcionar comportamentos estranhosbull Campos range tambeacutem possuem steps

bull Nestes casos o step coincide com o tamanho em pixels do objeto

9

FORMULAacuteRIOSbull Comportamento ao submeter o formulaacuterio

bull Campos url satildeo prefixados com http se natildeo estiverem no formato correto de URL (iniciando por protocolo)

bull Campos de data satildeo enviados usando sempre um formato padratildeobull A especificaccedilatildeo por enquanto natildeo foi clara quanto ao formato desses

campos Deixou a cargo dos browsersbull Campos color satildeo enviados no formato rgb sendo

bull R - red G - green B - bluebull Forms 20 jaacute embutem validaccedilotildees client-side sem a

necessidade de uso de Javascriptbull Campos preenchidos com valores incorretos para o tipo especiacutefico

satildeo checados e impedem a transmissatildeo do formulaacuterio para o servidorbull Os browsers costumam exibir balotildees sobre o campo indicando o erro

de preenchimento

10

VALIDACcedilOtildeES DE INPUTSbull Campos requeridos

bull required - Torna o campo de preenchimento obrigatoacuterio

bull Mais regras que impedem a transmissatildeo do formulaacuteriobull Campos url devem seguir as regras de codificaccedilatildeo de URLs

bull Espaccedilos devem ser trocados por 20bull Campos email devem conter emails vaacutelidosbull Valores de campos numeacutericos devem estar entre min e max e

serem muacuteltiplos de step se estes forem fornecidos bull Campos com o novo atributo pattern precisam ter um valor

de acordo com a maacutescara informada nelebull Atributo ainda natildeo suportado no IE nem no Safari

11

VALIDACcedilOtildeES DE INPUTSbull Expressotildees regulares

bull pattern - Atributo que restringe a maacutescara do conteuacutedo no campo em questatildeo

bull O atributo title deve ser usado para informar a maacutescara usada de um jeito mais claro ao usuaacuterio leigobull Ex 1 ltinput type=text name=cep

title=CEP 00000-000 pattern=d5-d3 gt

bull Ex 2 ltinput type=text name=cpf title=CPF 000000000-00 pattern=d3(d3)2-d2 gt

bull Ex 3 ltinput type=text name=IP title=Endereccedilo IP vaacutelido para um ponto na rede pattern=([1-9]12) | (1dd) | (2[0-4]d) | 25[0-4] gtbull Para simplificar o pattern do exemplo 3 contemplou apenas o primeiro diacutegito que deve

ser algo entre 1 e 254

bull Os espaccedilos entre as barras em peacute | (pipe) que significam ldquoourdquo loacutegico estatildeo aiacute apenas para melhorar a legibilidade do exemplo Natildeo devem ser digitados

12

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres qualificadores

bull Satildeo usados para validar apenas um caractere do textobull (ponto) - Representa qualquer caracterebull [ e ] - Para englobar lista de valores permitidosbull [^ e ] - Para englobar lista de valores proibidosbull d - Soacute admite nuacutemerosbull w - Soacute admite letras nuacutemeros e caracteres _bull s - Soacute admite caracteres de espaccedilobull D W S - Inversos de suas contrapartidas minuacutesculasbull ( e ) - Agrupamentos de conteuacutedobull | - Ou loacutegico Utilize os parecircnteses para ele afetar um grupo todobull - Retira o poder de algum metacaratere Ele vira simples textobull - - Dentro de listas representam faixas de valores possiacuteveis

13

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres quantificadores

bull Satildeo usados para dar quantidade agrave expressatildeo anteriorbull - Opcional Pode vir zero ou uma vezbull + - Deve vir pelo menos uma vezbull - Opcional Pode vir zero ou vaacuterias vezesbull x - Deve vir exatamente X vezesbull xy - Deve vir de x a y vezesbull x - Deve vir pelo menos x vezesbull y - Deve vir ateacute y vezes

bull Metacaracteres limiacutetrofes (natildeo necessaacuterios aqui)bull ^ - Deve vir no iniacutecio da maacutescara e representa o iniacutecio do textobull $ - Deve vir no final da maacutescara e representa o fim do textobull b - Delimita a borda de um texto (para presufixo de palavras)

14

FORMS 20bull Outras tags para formulaacuterios

bull ltkeygengt - Tag que envia uma chave puacuteblica para o servidor poder utilizar para cifrar o conteuacutedo Soacute quem gera uma chave puacuteblica deteacutem sua chave privada capaz de decifrarbull Essa tag gera um combobox para o usuaacuterio escolher a quantidade de

bits do tamanho dessa chavebull httplistswhatwgorgpipermailwhatwg-whatwgorgattachments

2008071407ea5534attachmenttxtbull ltdatalistgt - Renderiza um suggest no browser Parecido com

o select mas natildeo eacute na verdade um campo de formulaacuteriobull Deve ser usado como provedor de lista de valores para um input textbull Para informar o datalist como provedor de valores de sugestotildees eacute

necessaacuterio definir um id para o datalist e um atributo list para o inputbull ltinput type=text list=ufsgtbull ltdatalist id=ufsgtltoptiongtPernambucoltoptiongtltdatalistgt

15

FORMULAacuteRIOSbull Comportamento ao submeter o formulaacuterio

bull Campos url satildeo prefixados com http se natildeo estiverem no formato correto de URL (iniciando por protocolo)

bull Campos de data satildeo enviados usando sempre um formato padratildeobull A especificaccedilatildeo por enquanto natildeo foi clara quanto ao formato desses

campos Deixou a cargo dos browsersbull Campos color satildeo enviados no formato rgb sendo

bull R - red G - green B - bluebull Forms 20 jaacute embutem validaccedilotildees client-side sem a

necessidade de uso de Javascriptbull Campos preenchidos com valores incorretos para o tipo especiacutefico

satildeo checados e impedem a transmissatildeo do formulaacuterio para o servidorbull Os browsers costumam exibir balotildees sobre o campo indicando o erro

de preenchimento

10

VALIDACcedilOtildeES DE INPUTSbull Campos requeridos

bull required - Torna o campo de preenchimento obrigatoacuterio

bull Mais regras que impedem a transmissatildeo do formulaacuteriobull Campos url devem seguir as regras de codificaccedilatildeo de URLs

bull Espaccedilos devem ser trocados por 20bull Campos email devem conter emails vaacutelidosbull Valores de campos numeacutericos devem estar entre min e max e

serem muacuteltiplos de step se estes forem fornecidos bull Campos com o novo atributo pattern precisam ter um valor

de acordo com a maacutescara informada nelebull Atributo ainda natildeo suportado no IE nem no Safari

11

VALIDACcedilOtildeES DE INPUTSbull Expressotildees regulares

bull pattern - Atributo que restringe a maacutescara do conteuacutedo no campo em questatildeo

bull O atributo title deve ser usado para informar a maacutescara usada de um jeito mais claro ao usuaacuterio leigobull Ex 1 ltinput type=text name=cep

title=CEP 00000-000 pattern=d5-d3 gt

bull Ex 2 ltinput type=text name=cpf title=CPF 000000000-00 pattern=d3(d3)2-d2 gt

bull Ex 3 ltinput type=text name=IP title=Endereccedilo IP vaacutelido para um ponto na rede pattern=([1-9]12) | (1dd) | (2[0-4]d) | 25[0-4] gtbull Para simplificar o pattern do exemplo 3 contemplou apenas o primeiro diacutegito que deve

ser algo entre 1 e 254

bull Os espaccedilos entre as barras em peacute | (pipe) que significam ldquoourdquo loacutegico estatildeo aiacute apenas para melhorar a legibilidade do exemplo Natildeo devem ser digitados

12

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres qualificadores

bull Satildeo usados para validar apenas um caractere do textobull (ponto) - Representa qualquer caracterebull [ e ] - Para englobar lista de valores permitidosbull [^ e ] - Para englobar lista de valores proibidosbull d - Soacute admite nuacutemerosbull w - Soacute admite letras nuacutemeros e caracteres _bull s - Soacute admite caracteres de espaccedilobull D W S - Inversos de suas contrapartidas minuacutesculasbull ( e ) - Agrupamentos de conteuacutedobull | - Ou loacutegico Utilize os parecircnteses para ele afetar um grupo todobull - Retira o poder de algum metacaratere Ele vira simples textobull - - Dentro de listas representam faixas de valores possiacuteveis

13

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres quantificadores

bull Satildeo usados para dar quantidade agrave expressatildeo anteriorbull - Opcional Pode vir zero ou uma vezbull + - Deve vir pelo menos uma vezbull - Opcional Pode vir zero ou vaacuterias vezesbull x - Deve vir exatamente X vezesbull xy - Deve vir de x a y vezesbull x - Deve vir pelo menos x vezesbull y - Deve vir ateacute y vezes

bull Metacaracteres limiacutetrofes (natildeo necessaacuterios aqui)bull ^ - Deve vir no iniacutecio da maacutescara e representa o iniacutecio do textobull $ - Deve vir no final da maacutescara e representa o fim do textobull b - Delimita a borda de um texto (para presufixo de palavras)

14

FORMS 20bull Outras tags para formulaacuterios

bull ltkeygengt - Tag que envia uma chave puacuteblica para o servidor poder utilizar para cifrar o conteuacutedo Soacute quem gera uma chave puacuteblica deteacutem sua chave privada capaz de decifrarbull Essa tag gera um combobox para o usuaacuterio escolher a quantidade de

bits do tamanho dessa chavebull httplistswhatwgorgpipermailwhatwg-whatwgorgattachments

2008071407ea5534attachmenttxtbull ltdatalistgt - Renderiza um suggest no browser Parecido com

o select mas natildeo eacute na verdade um campo de formulaacuteriobull Deve ser usado como provedor de lista de valores para um input textbull Para informar o datalist como provedor de valores de sugestotildees eacute

necessaacuterio definir um id para o datalist e um atributo list para o inputbull ltinput type=text list=ufsgtbull ltdatalist id=ufsgtltoptiongtPernambucoltoptiongtltdatalistgt

15

VALIDACcedilOtildeES DE INPUTSbull Campos requeridos

bull required - Torna o campo de preenchimento obrigatoacuterio

bull Mais regras que impedem a transmissatildeo do formulaacuteriobull Campos url devem seguir as regras de codificaccedilatildeo de URLs

bull Espaccedilos devem ser trocados por 20bull Campos email devem conter emails vaacutelidosbull Valores de campos numeacutericos devem estar entre min e max e

serem muacuteltiplos de step se estes forem fornecidos bull Campos com o novo atributo pattern precisam ter um valor

de acordo com a maacutescara informada nelebull Atributo ainda natildeo suportado no IE nem no Safari

11

VALIDACcedilOtildeES DE INPUTSbull Expressotildees regulares

bull pattern - Atributo que restringe a maacutescara do conteuacutedo no campo em questatildeo

bull O atributo title deve ser usado para informar a maacutescara usada de um jeito mais claro ao usuaacuterio leigobull Ex 1 ltinput type=text name=cep

title=CEP 00000-000 pattern=d5-d3 gt

bull Ex 2 ltinput type=text name=cpf title=CPF 000000000-00 pattern=d3(d3)2-d2 gt

bull Ex 3 ltinput type=text name=IP title=Endereccedilo IP vaacutelido para um ponto na rede pattern=([1-9]12) | (1dd) | (2[0-4]d) | 25[0-4] gtbull Para simplificar o pattern do exemplo 3 contemplou apenas o primeiro diacutegito que deve

ser algo entre 1 e 254

bull Os espaccedilos entre as barras em peacute | (pipe) que significam ldquoourdquo loacutegico estatildeo aiacute apenas para melhorar a legibilidade do exemplo Natildeo devem ser digitados

12

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres qualificadores

bull Satildeo usados para validar apenas um caractere do textobull (ponto) - Representa qualquer caracterebull [ e ] - Para englobar lista de valores permitidosbull [^ e ] - Para englobar lista de valores proibidosbull d - Soacute admite nuacutemerosbull w - Soacute admite letras nuacutemeros e caracteres _bull s - Soacute admite caracteres de espaccedilobull D W S - Inversos de suas contrapartidas minuacutesculasbull ( e ) - Agrupamentos de conteuacutedobull | - Ou loacutegico Utilize os parecircnteses para ele afetar um grupo todobull - Retira o poder de algum metacaratere Ele vira simples textobull - - Dentro de listas representam faixas de valores possiacuteveis

13

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres quantificadores

bull Satildeo usados para dar quantidade agrave expressatildeo anteriorbull - Opcional Pode vir zero ou uma vezbull + - Deve vir pelo menos uma vezbull - Opcional Pode vir zero ou vaacuterias vezesbull x - Deve vir exatamente X vezesbull xy - Deve vir de x a y vezesbull x - Deve vir pelo menos x vezesbull y - Deve vir ateacute y vezes

bull Metacaracteres limiacutetrofes (natildeo necessaacuterios aqui)bull ^ - Deve vir no iniacutecio da maacutescara e representa o iniacutecio do textobull $ - Deve vir no final da maacutescara e representa o fim do textobull b - Delimita a borda de um texto (para presufixo de palavras)

14

FORMS 20bull Outras tags para formulaacuterios

bull ltkeygengt - Tag que envia uma chave puacuteblica para o servidor poder utilizar para cifrar o conteuacutedo Soacute quem gera uma chave puacuteblica deteacutem sua chave privada capaz de decifrarbull Essa tag gera um combobox para o usuaacuterio escolher a quantidade de

bits do tamanho dessa chavebull httplistswhatwgorgpipermailwhatwg-whatwgorgattachments

2008071407ea5534attachmenttxtbull ltdatalistgt - Renderiza um suggest no browser Parecido com

o select mas natildeo eacute na verdade um campo de formulaacuteriobull Deve ser usado como provedor de lista de valores para um input textbull Para informar o datalist como provedor de valores de sugestotildees eacute

necessaacuterio definir um id para o datalist e um atributo list para o inputbull ltinput type=text list=ufsgtbull ltdatalist id=ufsgtltoptiongtPernambucoltoptiongtltdatalistgt

15

VALIDACcedilOtildeES DE INPUTSbull Expressotildees regulares

bull pattern - Atributo que restringe a maacutescara do conteuacutedo no campo em questatildeo

bull O atributo title deve ser usado para informar a maacutescara usada de um jeito mais claro ao usuaacuterio leigobull Ex 1 ltinput type=text name=cep

title=CEP 00000-000 pattern=d5-d3 gt

bull Ex 2 ltinput type=text name=cpf title=CPF 000000000-00 pattern=d3(d3)2-d2 gt

bull Ex 3 ltinput type=text name=IP title=Endereccedilo IP vaacutelido para um ponto na rede pattern=([1-9]12) | (1dd) | (2[0-4]d) | 25[0-4] gtbull Para simplificar o pattern do exemplo 3 contemplou apenas o primeiro diacutegito que deve

ser algo entre 1 e 254

bull Os espaccedilos entre as barras em peacute | (pipe) que significam ldquoourdquo loacutegico estatildeo aiacute apenas para melhorar a legibilidade do exemplo Natildeo devem ser digitados

12

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres qualificadores

bull Satildeo usados para validar apenas um caractere do textobull (ponto) - Representa qualquer caracterebull [ e ] - Para englobar lista de valores permitidosbull [^ e ] - Para englobar lista de valores proibidosbull d - Soacute admite nuacutemerosbull w - Soacute admite letras nuacutemeros e caracteres _bull s - Soacute admite caracteres de espaccedilobull D W S - Inversos de suas contrapartidas minuacutesculasbull ( e ) - Agrupamentos de conteuacutedobull | - Ou loacutegico Utilize os parecircnteses para ele afetar um grupo todobull - Retira o poder de algum metacaratere Ele vira simples textobull - - Dentro de listas representam faixas de valores possiacuteveis

13

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres quantificadores

bull Satildeo usados para dar quantidade agrave expressatildeo anteriorbull - Opcional Pode vir zero ou uma vezbull + - Deve vir pelo menos uma vezbull - Opcional Pode vir zero ou vaacuterias vezesbull x - Deve vir exatamente X vezesbull xy - Deve vir de x a y vezesbull x - Deve vir pelo menos x vezesbull y - Deve vir ateacute y vezes

bull Metacaracteres limiacutetrofes (natildeo necessaacuterios aqui)bull ^ - Deve vir no iniacutecio da maacutescara e representa o iniacutecio do textobull $ - Deve vir no final da maacutescara e representa o fim do textobull b - Delimita a borda de um texto (para presufixo de palavras)

14

FORMS 20bull Outras tags para formulaacuterios

bull ltkeygengt - Tag que envia uma chave puacuteblica para o servidor poder utilizar para cifrar o conteuacutedo Soacute quem gera uma chave puacuteblica deteacutem sua chave privada capaz de decifrarbull Essa tag gera um combobox para o usuaacuterio escolher a quantidade de

bits do tamanho dessa chavebull httplistswhatwgorgpipermailwhatwg-whatwgorgattachments

2008071407ea5534attachmenttxtbull ltdatalistgt - Renderiza um suggest no browser Parecido com

o select mas natildeo eacute na verdade um campo de formulaacuteriobull Deve ser usado como provedor de lista de valores para um input textbull Para informar o datalist como provedor de valores de sugestotildees eacute

necessaacuterio definir um id para o datalist e um atributo list para o inputbull ltinput type=text list=ufsgtbull ltdatalist id=ufsgtltoptiongtPernambucoltoptiongtltdatalistgt

15

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres qualificadores

bull Satildeo usados para validar apenas um caractere do textobull (ponto) - Representa qualquer caracterebull [ e ] - Para englobar lista de valores permitidosbull [^ e ] - Para englobar lista de valores proibidosbull d - Soacute admite nuacutemerosbull w - Soacute admite letras nuacutemeros e caracteres _bull s - Soacute admite caracteres de espaccedilobull D W S - Inversos de suas contrapartidas minuacutesculasbull ( e ) - Agrupamentos de conteuacutedobull | - Ou loacutegico Utilize os parecircnteses para ele afetar um grupo todobull - Retira o poder de algum metacaratere Ele vira simples textobull - - Dentro de listas representam faixas de valores possiacuteveis

13

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres quantificadores

bull Satildeo usados para dar quantidade agrave expressatildeo anteriorbull - Opcional Pode vir zero ou uma vezbull + - Deve vir pelo menos uma vezbull - Opcional Pode vir zero ou vaacuterias vezesbull x - Deve vir exatamente X vezesbull xy - Deve vir de x a y vezesbull x - Deve vir pelo menos x vezesbull y - Deve vir ateacute y vezes

bull Metacaracteres limiacutetrofes (natildeo necessaacuterios aqui)bull ^ - Deve vir no iniacutecio da maacutescara e representa o iniacutecio do textobull $ - Deve vir no final da maacutescara e representa o fim do textobull b - Delimita a borda de um texto (para presufixo de palavras)

14

FORMS 20bull Outras tags para formulaacuterios

bull ltkeygengt - Tag que envia uma chave puacuteblica para o servidor poder utilizar para cifrar o conteuacutedo Soacute quem gera uma chave puacuteblica deteacutem sua chave privada capaz de decifrarbull Essa tag gera um combobox para o usuaacuterio escolher a quantidade de

bits do tamanho dessa chavebull httplistswhatwgorgpipermailwhatwg-whatwgorgattachments

2008071407ea5534attachmenttxtbull ltdatalistgt - Renderiza um suggest no browser Parecido com

o select mas natildeo eacute na verdade um campo de formulaacuteriobull Deve ser usado como provedor de lista de valores para um input textbull Para informar o datalist como provedor de valores de sugestotildees eacute

necessaacuterio definir um id para o datalist e um atributo list para o inputbull ltinput type=text list=ufsgtbull ltdatalist id=ufsgtltoptiongtPernambucoltoptiongtltdatalistgt

15

VALIDACcedilOtildeES DE INPUTSbull Metacaracteres quantificadores

bull Satildeo usados para dar quantidade agrave expressatildeo anteriorbull - Opcional Pode vir zero ou uma vezbull + - Deve vir pelo menos uma vezbull - Opcional Pode vir zero ou vaacuterias vezesbull x - Deve vir exatamente X vezesbull xy - Deve vir de x a y vezesbull x - Deve vir pelo menos x vezesbull y - Deve vir ateacute y vezes

bull Metacaracteres limiacutetrofes (natildeo necessaacuterios aqui)bull ^ - Deve vir no iniacutecio da maacutescara e representa o iniacutecio do textobull $ - Deve vir no final da maacutescara e representa o fim do textobull b - Delimita a borda de um texto (para presufixo de palavras)

14

FORMS 20bull Outras tags para formulaacuterios

bull ltkeygengt - Tag que envia uma chave puacuteblica para o servidor poder utilizar para cifrar o conteuacutedo Soacute quem gera uma chave puacuteblica deteacutem sua chave privada capaz de decifrarbull Essa tag gera um combobox para o usuaacuterio escolher a quantidade de

bits do tamanho dessa chavebull httplistswhatwgorgpipermailwhatwg-whatwgorgattachments

2008071407ea5534attachmenttxtbull ltdatalistgt - Renderiza um suggest no browser Parecido com

o select mas natildeo eacute na verdade um campo de formulaacuteriobull Deve ser usado como provedor de lista de valores para um input textbull Para informar o datalist como provedor de valores de sugestotildees eacute

necessaacuterio definir um id para o datalist e um atributo list para o inputbull ltinput type=text list=ufsgtbull ltdatalist id=ufsgtltoptiongtPernambucoltoptiongtltdatalistgt

15

FORMS 20bull Outras tags para formulaacuterios

bull ltkeygengt - Tag que envia uma chave puacuteblica para o servidor poder utilizar para cifrar o conteuacutedo Soacute quem gera uma chave puacuteblica deteacutem sua chave privada capaz de decifrarbull Essa tag gera um combobox para o usuaacuterio escolher a quantidade de

bits do tamanho dessa chavebull httplistswhatwgorgpipermailwhatwg-whatwgorgattachments

2008071407ea5534attachmenttxtbull ltdatalistgt - Renderiza um suggest no browser Parecido com

o select mas natildeo eacute na verdade um campo de formulaacuteriobull Deve ser usado como provedor de lista de valores para um input textbull Para informar o datalist como provedor de valores de sugestotildees eacute

necessaacuterio definir um id para o datalist e um atributo list para o inputbull ltinput type=text list=ufsgtbull ltdatalist id=ufsgtltoptiongtPernambucoltoptiongtltdatalistgt

15

FORMS 20bull Leituras recomendadas

bull Artigos sobre Forms 20bull httpdiveintohtml5infoformshtmlbull httphacksmozillaorg201011firefox-4-html5-forms

bull Webforms2 - httpcodegooglecompwebforms2bull Coacutedigo Javascript para fazer os novos campos funcionarem em

browsers antigos (recomenda-se testar)bull Status do Forms 20 - httpwufoocomhtml5

bull Site atualizado sobre o iacutendice de adoccedilatildeo dos novos recursos para formulaacuterios

bull Expressotildees regulares - httpwwwguia-ersfnetbull Excelente material gratuito do autor brasileiro Aureacutelio Marinho Jargas

16

EXERCIacuteCIOSbull Utilize todos os novos recursos vistos nesta aula

para incrementar o formulaacuterio de cadastro de curriacuteculo feito na aula anteriorbull Utilize campos de preenchimento obrigatoacuterio placeholders

patterns steps e valores numeacutericos miacutenimos e maacuteximosbull Decirc a opccedilatildeo de escolha da cores de fonte e background do

curriacuteculo

bull Crie um formulaacuterio de cadastro de eventosbull Decirc opccedilatildeo para o usuaacuterio marcar datas e horas de iniacutecio e fim

bull Crie um formulaacuterio de busca avanccediladabull Utilize mais filtros aleacutem do texto em si que pode ser feito com o

campo search

17

TAGS EDITAacuteVEISbull Qualquer tag pode ser editaacutevel agora

bull contenteditable Atributo que torna naturalmente possiacutevel a ediccedilatildeo de uma tag pelo usuaacuterio

bull Assim como qualquer campo de formulaacuterio propicia a coleta de informaccedilotildees do usuaacuterio mas neste caso nada eacute naturalmente enviada ao servidor

bull Essa praacutetica vem sendo muito aplicada em conjunto com teacutecnicas novas da HTML5 como verificaccedilatildeo de status do browsers (online ou offline) e armazenamento de dados locais no cliente (Web Storage)bull Requer o uso de Javascript para potencializar sua utilidadebull Ex ltul contenteditable=truegtltligtltulgtbull Este coacutedigo apenas gera um sinal de toacutepico para que o usuaacuterio

preenchabull Se o usuaacuterio escrever tags estas seratildeo devidamente

escapadas

18

IFRAMESbull Como inserir um coacutedigo HTML dentro de outra

paacuteginabull ltiframegt eacute uma tag que possibilita controlar um documento por

baixo de outrobull Ex ltiframe src=outrapaginahtmlgtltiframegt

bull Iframes e o AJAXbull Jaacute foi muito utilizado para promover chamadas assiacutencronas ao

servidor sem atualizar a paacutegina inteirabull O lado negativo eacute a divisatildeo do coacutedigo Javascript em dois arquivos

bull WYSIWYGbull Iframes satildeo utilizados hoje como editores avanccedilados de conteuacutedo

bull Precisam de Javascript para colocaacute-los em designMode = Onbull Obs Natildeo falaremos sobre ltframegt e ltframesetgt neste curso Obsoletos

19

TAGS EDITAacuteVEISbull Qualquer tag pode ser editaacutevel agora

bull contenteditable Atributo que torna naturalmente possiacutevel a ediccedilatildeo de uma tag pelo usuaacuterio

bull Assim como qualquer campo de formulaacuterio propicia a coleta de informaccedilotildees do usuaacuterio mas neste caso nada eacute naturalmente enviada ao servidor

bull Essa praacutetica vem sendo muito aplicada em conjunto com teacutecnicas novas da HTML5 como verificaccedilatildeo de status do browsers (online ou offline) e armazenamento de dados locais no cliente (Web Storage)bull Requer o uso de Javascript para potencializar sua utilidadebull Ex ltul contenteditable=truegtltligtltulgtbull Este coacutedigo apenas gera um sinal de toacutepico para que o usuaacuterio

preenchabull Se o usuaacuterio escrever tags estas seratildeo devidamente

escapadas

18

IFRAMESbull Como inserir um coacutedigo HTML dentro de outra

paacuteginabull ltiframegt eacute uma tag que possibilita controlar um documento por

baixo de outrobull Ex ltiframe src=outrapaginahtmlgtltiframegt

bull Iframes e o AJAXbull Jaacute foi muito utilizado para promover chamadas assiacutencronas ao

servidor sem atualizar a paacutegina inteirabull O lado negativo eacute a divisatildeo do coacutedigo Javascript em dois arquivos

bull WYSIWYGbull Iframes satildeo utilizados hoje como editores avanccedilados de conteuacutedo

bull Precisam de Javascript para colocaacute-los em designMode = Onbull Obs Natildeo falaremos sobre ltframegt e ltframesetgt neste curso Obsoletos

19

IFRAMESbull Como inserir um coacutedigo HTML dentro de outra

paacuteginabull ltiframegt eacute uma tag que possibilita controlar um documento por

baixo de outrobull Ex ltiframe src=outrapaginahtmlgtltiframegt

bull Iframes e o AJAXbull Jaacute foi muito utilizado para promover chamadas assiacutencronas ao

servidor sem atualizar a paacutegina inteirabull O lado negativo eacute a divisatildeo do coacutedigo Javascript em dois arquivos

bull WYSIWYGbull Iframes satildeo utilizados hoje como editores avanccedilados de conteuacutedo

bull Precisam de Javascript para colocaacute-los em designMode = Onbull Obs Natildeo falaremos sobre ltframegt e ltframesetgt neste curso Obsoletos

19