Olá, pessoal! Tudo tranquilo?

Estou contente pela boa receptividade que as colunas sobre HTML5 têm tido! A primeira, sobre a introdução do HTML5 no mercado, e a segunda, sobre tags para organização. No artigo de hoje vou focar em formulários, que particularmente é a coisa que mais detesto fazer em HTML. A divergência entre os browsers é muita, variando bastante alinhamentos e estilos aplicados. 

Lembrando que o manual completo sobre HTML5 é encontrado no site da W3C, sendo lá um material oficial. Quem quiser dar uma conferida em tudo, só acessar por este link .Qualquer dúvida podem entrar em contato comigo pelo meu site ou meu Twitter.

Vamos recapitular as principais funções que temos disponíveis no HTML hoje:

• Accept – Aceito em inputs do tipo FILE, porém muito pouco usado diretamente. Decreta os tipos de arquivos aceitos.
• Alt – Define um texto alternativo caso não tenha imagem, para inputs do tipo IMAGE.
• Checked – Usado para botões de seleção (checkbox e radio), permite deixar o botão selecionado.
• Class – Setamos um estilo para usarmos através do CSS, Javascript e outros fins.
• Disabled – Para desabilitar a edição de um elemento.
• ID – Setamos o nome do nosso elemento, para referenciarmos em nosso sistema.
• Maxlength – Definimos o número máximo de caracteres a serem digitados
• Name – Setamos um nome para o campo, podendo ser usado para validação ou outros meios de controle, além de ajudar em questões de SEO.
• Size – Número de caracteres, que na teoria deveria ser a quantidade de itens visíveis, mas que funciona mais como uma forma alternativa de setar largura.
• Src – Inputs do tipo Imagem, usado para setar o caminho da imagem.
• Tabindex – Definimos a ordem de importância do campo, quando o mudamos através da tecla TAB.
• Type – Usado em Inputs, para setarmos se é um botão, botão em forma de imagem, checkbox, radio e etc.
• Value – Determina o valor do campo (não é usado para Textarea, cujo valor fica interno na tag).

Peço desculpas se esqueci algum parâmetro, mas acho que todos entenderam as principais opções que temos hoje em formulários.

Agora, vamos partir para as novidades!

Antes de tudo, vou contar as boas notícias:

1. Será possível fazer uma validação diretamente por HTML
2. Será possível fazer máscaras diretamente por HTML
3. Será possível mencionar quais tipos de dígitos são aceitos no campo por HTML
4. Não serão mais necessários componentes para Datapicker (aqueles que aparecem o calendário quando você clica em um campo de data), o HTML5 faz isso automaticamente!

Além de várias outras funções que tendem a facilitar a nossa vida (ou talvez complicar ainda mais).

Agora veremos todos parâmetros “Types” novos que um INPUT pode ter no HTML5, e se ele é ou não compatível hoje (não considerei versões anteriores ao IE8).

Esses novos “types” que vão anular componentes externos que muitas vezes dão dor de cabeça nos projetos.

Testei nos seguintes navegadores/plataformas: Firefox 3.6.8, Opera 10.60, Chrome/Safari 5.0 e Internet Explorer 8.

Exemplo de como é usado: <input type=”color” />

COLOR

• Compatibilidade atual: Nenhum dos browsers mencionados.
• Função: Exibir uma palheta de cores para escolha, como faz falta em muitos projetos! Às vezes é um bom trabalho para conseguir aplicar uma, quanto mais fazer.

DATE

• Compatibilidade atual: Opera.
  
• Função: 
  Abre um calendário para escolhermos uma data.

DATETIME

• Compatibilidade atual: Opera.
• Função: 
  Abre um calendário para escolhermos uma data e ainda podemos setar um horário.

DATETIME-LOCAL

• Compatibilidade atual: Opera.
• Função: 
  Abre um calendário para escolhermos uma data, também podendo setar horário. Mas agora nosso horário local, com fuso horário.

E-MAIL

• Compatibilidade atual: Opera (ainda sem diferenciação visual).
• Função: Teoricamente servirá para fazermos validação direto com o HTML5. Existem outros campos com esta finalidade.

MONTH

• Compatibilidade atual: Opera.
  
• Função: 
  Abre um datapicker para escolhermos mês e ano.

NUMBER

• Compatibilidade atual: Opera.
  
• Função: Será usado para validação também. No Opera tem diferenciação visual e não possibilita o usuário escrever outro caracter.

RANGE

• Compatibilidade atual: Chrome/Safari e Opera.
  
• Função:
  Abre uma espécie de ‘régua’ para podermos setar um valor, estilo pior/melhor.

TEL

• Compatibilidade atual: Opera (ainda sem diferenciação visual).
  
• Função: Será usado para validação, não achei muitas informações sobre. Vejo problemas nesse aspecto, devido a cada país diferenciar a quantidade de dígitos do número.

TIME

• Compatibilidade atual: Opera.
  
• Função:
  Um campo somente para setar hora-minuto.

URL

• Compatibilidade atual: Opera (ainda sem diferenciação visual).
• Função: Outro campo usado para validação, visualmente não tem diferenciação.

WEEK

• Compatibilidade atual: Opera.
  
• Função: Bem interessante, abre um campo para escolhermos ano e dia. Escolhendo o dia, ele armazena o ano e a semana.

Pela análise, ponto para o Opera! Ponto negativo (para variar) para o IE8 e, quem diria, Firefox. Queria ver funcionando o tipo COLOR, ver a palheta de cores sendo mostrada, mas infelizmente ainda não é suportado. Meu medo principal dessas tags é a personalização; fui tentar editar no Opera as tags equivalentes a data/hora etc. Algumas coisas não foram aceitas, consegui editar tamanho da fonte, cor da fonte (de algumas coisas apenas). Outros comandos não foram bem aceitos.

Veja:

Outros parâmetros novos (não ligados ao type).

Exemplo: <input parâmetro=”valor” /> – <input autocomplete=”on” />

Não vou passar todos parâmetros novos, pois são muitos e o texto ficará cansativo. Seguem alguns bem interessantes:

Autocomplete

• Valores: On, Off.
• Função: Não fique tão feliz com antecedência! Achei que era um autocomplete, de dar sugestões por usuário através de dados vindos de um banco ou semelhantes. Mas a real função dele é te dar a opção de escolha de o campo ser ou não lembrado. Por exemplo, eu digitar “email” em um campo de e-mail, e ele me mostrar o que já preenchi em campos do mesmo nome. Comando simples e que pode ser bem útil.

Form

• Valores: ‘nome do formulário’.
  
• Função: Você pode concatenar o campo a um formulário específico, criando campos interligados.

Formenctype

• Valores: application/x-www-form-urlencoded, multipart/form-data, text/plain.
• Função: Pode setar um formenctype específico para um campo, anulando o “formtype” principal.

Formtarget

• Valores: _blank, _self, _parent, _top.
  

• Função: Após darmos a ação, onde que será aberto a nova tela.

Height

• Valores: % ou pixels.
• Função: Podemos definir uma altura por nossos campos, antes só era possível por CSS.

Max

• Valores: número máximo de caracteres.
  
• Função: Podemos setar um tamanho máximo de caracteres, uma espécie de Maxlength, só que é usado em combinação com o parâmetro MIN, para setarmos um tamanho máximo e um mínimo para o campo.

Min

• Valores: número mínimo de caracteres.
  
• Função: Número mínimo de caracteres que o campo deve ter.

Required

• Valores: required.
  
• Função: Podemos mencionar se este campo é ou não obrigatório.

Nota importante – é possível setar no CSS algo como: input:required e colocar um estilo nos campos obrigatórios.

Width

• Valores: pixels ou %.
  
• Função: Podemos setar uma largura em pixel ou porcentagem, não mais por número de caracteres.

Como percebemos, as novas funcionalidades para formulários são grandes! Existem diversos novos parâmetros para diversas outras TAGs, nos quais pouca gente se habitou 100% ainda. Mas, infelizmente, como percebemos também, poucos browsers hoje suportam, mas isso é uma questão de tempo (longo tempo).

Para finalizar, gostaria de agradecer à HostDime, que sempre me dá uma força enorme para produzir os artigos!

Espero que tenham gostado, até a próxima!