Slides da quarta aula do curso de HTML5 da Especializa. O curso está disponível gratuitamente no endereço: http://ead.especializa.com.br/curso/html5-basico

2. HTML5 ESSENCIAL
Fundamentos de todo serviço na Web

3. EMENTA
• Fundamentos de Web
• Documentos HTML
• Conteúdo
• Multimídia
• Semântica
• Desempenho
3

4. O QUE VEREMOS AGORA
• Fundamentos da Web
• Documentos HTML
• Conteúdo
• Section, div, span, aside, parágrafos, cabeçalhos e rodapé
• Tabelas
• Formulários (campos e atributos)
• Forms 2.0
• Tags editáveis (contenteditable)
• IFrames
• Multimídia
• Semântica
4

6. FORMS 2.0
• Após alguns anos sem evoluções nessa área, o
Opera iniciou um processo de criação de novos
campos de formulário
• A especificação FORMS 2.0 é mais antiga mas entrou
oficialmente na coleção de especificações da HTML5
• color - Campo para escolha de cores
• Utiliza a paleta flutuante de cores do sistema operacional
• date - Escolha de data
• datetime - Escolha de data e hora (UTC)
• datetime-local - Data e hora no fuso local
• month. Escolha do mês
• Todos usam uma caixa flutuante de escolha de data
6

7. FORMS 2.0
• Mais campos novos da HTML5
• email - Campo para escrita de emails
• number - Exibição de números como um spinner (botões de
rolagem para cima e para baixo)
• tel - Para campos de telefone
• time - Spinner para horários
• Por padrão, exibe apenas horas:minutos
• url - Campo para escrita de URLs
• range - Linha com um marcador slider
• search - Campo de texto para buscas
• O Chrome exibe um X para apagar o texto
quando digitado
7

8. FORMULÁRIOS
• Novos atributos do HTML5
• placeholder - Novo no HTML5, exibe um texto quando o
campo estiver vazio e não estiver com o foco
• Quando o usuário digitar algo, o texto do placeholder sai.
• Ex.: <input type="text" placeholder="Digite algo aqui"/>
• min e max - Determinam os limites mínimos e máximos de
campos como range ou number.
• autocomplete - Admite on ou off. Determina se o campo
poderá assumir o autocomplete padrão do browser
• autofocus - Para requisitar o foco assim que a página for
carregada
• form - Atributo que torna possível um campo vir escrito fora
dos limites das tags <form>
• <input type="search" form="busca_avancada" name="termo" />
• <form id="busca_avancada"> ... </form>
8

9. FORMULÁRIOS
• Steps
• step - Campo que define de quanto em quanto será o
incremento/decremento de spinners (setas pra cima e pra
baixo) de campos como time e number
• A unidade de medida dos steps em campos time é o segundo
• Deve ser informado um valor positivo
• Se o step for múltiplo de 60, o campo time só exibe hora e minutos,
caso contrário também contempla os segundos
• A combinação dos atributos min, max, step e value devem ser
coerentes para não proporcionar comportamentos estranhos
• Campos range também possuem steps
• Nestes casos, o step coincide com o tamanho em pixels do objeto
9

10. FORMULÁRIOS
• Comportamento ao submeter o formulário
• Campos url são prefixados com http:// se não estiverem no
formato correto de URL (iniciando por protocolo://)
• Campos de data são enviados usando sempre um formato
padrão
• A especificação, por enquanto, não foi clara quanto ao formato desses
campos. Deixou a cargo dos browsers
• Campos color são enviados no formato #rgb, sendo:
• R - red, G - green, B - blue
• Forms 2.0 já embutem validações client-side sem a
necessidade de uso de Javascript
• Campos preenchidos com valores incorretos para o tipo específico
são checados e impedem a transmissão do formulário para o servidor
• Os browsers costumam exibir balões sobre o campo indicando o erro
de preenchimento
10

11. VALIDAÇÕES DE INPUTS
• Campos requeridos
• required - Torna o campo de preenchimento obrigatório
• Mais regras que impedem a transmissão do
formulário
• Campos url devem seguir as regras de codificação de URLs
• Espaços devem ser trocados por %20
• Campos email devem conter emails válidos
• Valores de campos numéricos devem estar entre min e max e
serem múltiplos de step, se estes forem fornecidos
• Campos com o novo atributo pattern precisam ter um valor
de acordo com a máscara informada nele
• Atributo ainda não suportado no IE nem no Safari
11

12. VALIDAÇÕES DE INPUTS
• Expressões regulares
• pattern - Atributo que restringe a máscara do conteúdo no
campo em questão
• O atributo title deve ser usado para informar a máscara usada
de um jeito mais claro ao usuário leigo
• Ex. 1: <input type="text" name="cep"
title="CEP: 00000-000"
pattern="d{5}-d{3}" />
• Ex. 2: <input type="text" name="cpf"
title="CPF: 000.000.000-00"
pattern="d{3}(.d{3}){2}-d{2}" />
• Ex. 3: <input type="text" name="IP"
title="Endereço IP válido para um ponto na rede"
pattern="([1-9]{1,2}) | (1dd) | (2[0-4]d) | 25[0-4]" />
• Para simplificar, o pattern do exemplo 3 contemplou apenas o primeiro dígito, que deve
ser algo entre 1 e 254
• Os espaços entre as barras em pé | (pipe), que significam “ou” lógico estão aí apenas para
melhorar a legibilidade do exemplo. Não devem ser digitados
12

13. VALIDAÇÕES DE INPUTS
• Metacaracteres qualificadores:
• São usados para validar apenas um caractere do texto
• . (ponto) - Representa qualquer caractere
• [ e ] - Para englobar lista de valores permitidos
• [^ e ] - Para englobar lista de valores proibidos
• d - Só admite números
• w - Só admite letras, números e caracteres _
• s - Só admite caracteres de espaço
• D, W, S - Inversos de suas contrapartidas minúsculas
• ( e ) - Agrupamentos de conteúdo
• | - Ou lógico. Utilize os parênteses para ele afetar um grupo todo
• - Retira o poder de algum metacaratere. Ele vira simples texto
• - - Dentro de listas, representam faixas de valores possíveis
13

14. VALIDAÇÕES DE INPUTS
• Metacaracteres quantificadores:
• São usados para dar quantidade à expressão anterior
• ? - Opcional. Pode vir zero ou uma vez
• + - Deve vir pelo menos uma vez
• * - Opcional. Pode vir zero ou várias vezes
• {x} - Deve vir exatamente X vezes
• {x,y} - Deve vir de x a y vezes
• {x,} - Deve vir pelo menos x vezes
• {,y} - Deve vir até y vezes
• Metacaracteres limítrofes (não necessários aqui)
• ^ - Deve vir no início da máscara e representa o início do texto
• $ - Deve vir no final da máscara e representa o fim do texto
• b - Delimita a borda de um texto (para pre/sufixo de palavras)
14

15. FORMS 2.0
• Outras tags para formulários
• <keygen> - Tag que envia uma chave pública para o servidor
poder utilizar para cifrar o conteúdo. Só quem gera uma chave
pública detém sua chave privada capaz de decifrar
• Essa tag gera um combobox para o usuário escolher a quantidade de
bits do tamanho dessa chave
• http://lists.whatwg.org/pipermail/whatwg-whatwg.org/attachments/
20080714/07ea5534/attachment.txt
• <datalist> - Renderiza um suggest no browser. Parecido com
o select, mas não é na verdade um campo de formulário
• Deve ser usado como provedor de lista de valores para um input text
• Para informar o datalist como provedor de valores de sugestões é
necessário definir um id para o datalist e um atributo list para o input
• <input type="text" list="ufs"/>
• <datalist id="ufs"><option>Pernambuco</option>...</datalist>
15

16. FORMS 2.0
• Leituras recomendadas
• Artigos sobre Forms 2.0
• http://diveintohtml5.info/forms.html
• http://hacks.mozilla.org/2010/11/firefox-4-html5-forms/
• Webforms2 - http://code.google.com/p/webforms2/
• Código Javascript para fazer os novos campos funcionarem em
browsers antigos (recomenda-se testar)
• Status do Forms 2.0 - http://wufoo.com/html5/
• Site atualizado sobre o índice de adoção dos novos recursos para
formulários
• Expressões regulares - http:www.guia-er.sf.net/
• Excelente material gratuito do autor brasileiro Aurélio Marinho Jargas
16

17. EXERCÍCIOS
• Utilize todos os novos recursos vistos nesta aula
para incrementar o formulário de cadastro de
currículo feito na aula anterior
• Utilize campos de preenchimento obrigatório, placeholders,
patterns, steps e valores numéricos mínimos e máximos
• Dê a opção de escolha da cores de fonte e background do
currículo
• Crie um formulário de cadastro de eventos
• Dê opção para o usuário marcar datas e horas de início e fim
• Crie um formulário de busca avançada
• Utilize mais filtros além do texto em si que pode ser feito com o
campo search
17

18. TAGS EDITÁVEIS
• Qualquer tag pode ser editável agora
• contenteditable. Atributo que torna naturalmente possível a
edição de uma tag pelo usuário
• Assim como qualquer campo de formulário, propicia a coleta
de informações do usuário, mas neste caso, nada é
naturalmente enviada ao servidor
• Essa prática vem sendo muito aplicada em conjunto com
técnicas novas da HTML5 como verificação de status do
browsers (online ou offline) e armazenamento de dados locais
no cliente (Web Storage)
• Requer o uso de Javascript para potencializar sua utilidade
• Ex.: <ul contenteditable="true"><li/></ul>
• Este código apenas gera um sinal de tópico para que o usuário
preencha
• Se o usuário escrever tags, estas serão devidamente
escapadas
18

19. IFRAMES
• Como inserir um código HTML dentro de outra
página
• <iframe> é uma tag que possibilita controlar um documento por
baixo de outro
• Ex.: <iframe src="outrapagina.html"></iframe>
• Iframes e o AJAX
• Já foi muito utilizado para promover chamadas assíncronas ao
servidor sem atualizar a página inteira
• O lado negativo é a divisão do código Javascript em dois arquivos
• WYSIWYG
• Iframes são utilizados hoje como editores avançados de conteúdo
• Precisam de Javascript para colocá-los em designMode = "On"
• Obs.: Não falaremos sobre <frame> e <frameset> neste curso. Obsoletos
19