Curso Web Design | Como criar formulários em HTML5 – parte 01

Link to Blog do Curso Web Design - Microcamp SP

Como criar formulários em HTML5 – parte 01

Posted: 03 Oct 2013 06:01 AM PDT

Se você deseja aprimorar mais os seus conhecimentos na mais nova versão da linguagem de marcação HTML5, nesse post você irá conhecer os principais elementos e atributos para construir formulários dinâmicos e cheios de recursos para uma página web.

Para utilizar códigos HTML5 em formulários é necessário que você leitor possua um conhecimento básico dos itens utilizados na criação de formulários, além de uma breve descrição do funcionamento dos mesmos. Neste caso, irei apresentar alguns desses atributos, começando pelo elemento Input:

a) Elemento Email: Campo propício para a digitação de dados do tipo e-mail, com validação já inclusa nesse tipo de elemento, não sendo necessário validações em JavaScript. A validação é feita apenas para o formato do e-mail e não verifica se ele existe realmente. Mas ainda assim é muito útil e funciona muito bem com um filtro, bloqueando a possibilidades de cadastro de e-mails que não possuam uma estrutura similar a de um endereço de mensagens eletrônicas.

b) Elemento Date: Campo que possui o propósito de receber dados no formato de uma data, que apresenta um controle do tipo seletor, onde o usuário poderá escolher a data desejada, dependendo do navegador utilizado. Também possui um filtro de validações e o controle apresentado para o usuário funciona melhor do que uma máscara de entrada, comumente utilizada na versão anterior.

c) Elemento DateTime-Local: Campo destinado a receber informações do tipo data e hora. Assim como o elemento date visto anteriormente, esse elemento também apresenta um controle para o usuário de acordo com o navegador. Também realiza validações e dispensa o uso de funções JavaScript.

d) Elemento Number: Campo destinado a receber valores numéricos. Dependendo do navegador, um controle de setas será exibido, que possibilitará manipular os números por essas mesmas setas.

e) Elemento Range: Campo que trabalha com um determinado intervalo de números, como uma faixa de valores. Dependendo do navegador será apresentado um controle deslizante onde será possível escolher o número de acordo com a faixa de número proposta.

Novos elementos do HTML5

Como sabemos, o HTML5 apresenta muitas novidades com relação a suas versões anteriores. Veremos aqui alguns dos elementos mais utilizados em páginas de HTML5, através de uma breve explicação:

a) Elemento Article: Elemento destinado a marcar a informação principal da página, podendo ser utilizadas para leitores do tipo RSS, comumente utilizado para marcar textos do tipo artigos, jornais ou revistas. Busca informar o conteúdo principal da página e torna possível a utilização desse texto em outros lugares.

b) Elemento DataList: Elemento que possibilita propor ao usuário uma lista de sugestões do conteúdo que está sendo digitado, permitindo a seleção da sugestão oferecida e completando a ação copiando o texto sugerido para dentro da caixa de texto. Isso é possível porque esse elemento permite relacionar um campo com uma lista criada.

c) Elemento Footer: Elemento destinado a marcar o rodapé da página ou de uma seção, apresentando informações sobre a seção ou a página, informações como autoria, links úteis entre outros.

d) Elemento Header: Elemento criado com o propósito de delimitar o cabeçalho da página, ou de uma seção, utilizado também em tabelas e formulários de busca.

e) Elemento Nav: Elemento criado com o propósito de agregar grupos de links com redirecionamentos para outras páginas, porém só devem ser marcados os grupos de links considerados importantes para a página. Geralmente são recomendados links de menus, links de rodapés e links laterais que dividem a página por categorias.

Atributos do HTML5

A seguir, selecionei alguns atributos que são utilizados junto a determinados elementos que foram explicados anteriormente e que serão necessários para criar uma página em HTML5:

a) Elemento AccessKey: Elemento desenvolvido com o propósito de possibilitar que o usuário acesse um determinado objeto da página através de teclas de atalho, sendo possível navegar com o auxílio do teclado. Já eu utilizado na versão anterior, porém de forma limitada, foi implementado na versão 5 como um elemento global.

b) Elemento ContentEditable: Elemento que possibilita a edição de um elemento, criando uma interação com o usuário. Dispensa o uso de DOM, que geralmente é o que possibilita a criação desses elementos. Porém ele realiza apenas modificações locais e não salva as modificações realizadas pelo usuário.

c) Elemento SpellCheck: Elemento responsável pela revisão ortográfica e gramatical do texto digitado, com o intuito de fazer com que o usuário verifique o que digitou. O spellcheck , quando habilitado, realiza verificações gramaticais e ortográficas, quando isso só era possível em processadores de texto como o Word (da empresa Microsoft) ou em alguns navegadores, porém em campos específicos como corpo de um e-mail.

d) Elemento TabIndex: Elemento que possibilita a configuração da ordem dos elementos inseridos na página, podendo assim determinar a ordem em que os elementos receberam o foco. É configurado com números que irão classificar a ordem de acesso de cada elemento quando o usuário utilizar a navegação via teclado através da tecla tab.

e) Elemento Title: Apresenta ao usuário uma informação adicional, que só é possível de ser visualizada quando se posiciona o mouse em cima do elemento. Atributo já existente na versão anterior, porém se tornou global na versão 5.

f) Elemento Autofocus: Esse atributo indica qual elemento receberá o foco assim que a página for carregada, sem a necessidade de criar uma função do tipo JavaScript.

g) Elemento Max: Elemento destinado a limitar o valor de caracteres digitados no elemento de acordo com o número estipulado.

h) Elemento Min: Elemento com o mesmo propósito do elemento Max, porém ao invés de limitar o número máximo de caracteres possíveis de se digitar em um elemento, ele irá limitar a quantidade mínima de caracteres aceitos, podendo ser utilizado também em conjunto com o atributo Max, explicado anteriormente.

i) Elemento Placeholder: Elemento de uso exclusivo de inputs e textareas que possibilitam a inserção de um texto no elemento que funcione como um exemplo. Nele, assim que o elemento receber o foco, ele apagará o conteúdo digitado, estando pronto para receber um outro valor. Sem a necessidade de criação de códigos JavaScript.

j) Elemento Required: Esse elemento torna o preenchimento do campo obrigatório. Caso o mesmo não ocorra, ele apresentará uma mensagem de que aquele campo deverá ser preenchido.

Tabela de compatibilidade de navegadores

Na tabela a seguir, apresento um guia de compatibilidade de cada navegador em relação aos elementos e aos atributos aqui descritos. Onde você vê : ( é porque o navegador não possui suporte para o recurso especificado, e onde vê o ícone do Blog é porque o recurso está disponível:

Como viram, neste post apresentei cada elemento e cada atributo primordial para a criação de formulários em HTML5, assim como as suas funcionalidades, além de uma tabela de compatibilidades entre os principais navegadores. No próximo post irei mostrar como construir uma página com os elementos apresentados aqui, não deixe de conferir!

Espero que tenham gostado e não se esqueçam de curtir e compartilhar com seus amigos o conhecimento adquirido aqui. Ao final da página, comente ou dê sugestões para os próximos posts. Nos reencontraremos aqui em breve com a continuação!

Páginas

quinta-feira, 3 de outubro de 2013