Html5 Aula 4
1 gostou1,494 visualizações
O documento aborda os fundamentos do HTML5, incluindo novas funcionalidades como o Forms 2.0, que introduz campos de formulário aprimorados e validações client-side. Destaca a semântica, a multimídia e o uso de tags editáveis, além de fornecer exemplos práticos de aplicação de atributos e validações. O material também oferece exercícios e recomendações de leitura para aprofundamento no tema.
![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](https://image.slidesharecdn.com/html504-141130003814-conversion-gate02/85/Html5-Aula-4-12-320.jpg)
![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](https://image.slidesharecdn.com/html504-141130003814-conversion-gate02/85/Html5-Aula-4-13-320.jpg)
Html5 Aula 4
- 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