Tecnologia

Novos Elementos HTML ? Input type: email, url

Fonte: http://fabioortiz.wordpress.com/2012/06/22/novos-elementos-htm


- Arquivo Blog Maven
Fonte:  http://fabioortiz.wordpress.com/2012/06/22/novos-elementos-html-input-type-email-url/

Como foco principal do HTML 5 é deixar a web mais dinâmica em sua forma mais nativa possível, surge os novos elementos para utilizar nos   inputs  (campos de entrada de dados do formulário). Antes o mais comum era a utilização do   input type=?text?   para quase todos os tipos de entradas de dados, desta forma a validação da informação submetida ficava a critério do Javascript e/ou da linguagem de desenvolvimento. Hoje veremos que não é necessário tal processo. Os Novos Elementos tendem a melhorar a semântica do código gerado e quais são esses elementos? Citarei alguns mas vamos analisar o funcionamento de 2 deles: email e url.

Novos Elementos HTML 5 -  Input types
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
Lembrete:  Nem todos os principais navegadores suportam todos os novos tipos de  inputs . No entanto, você já pode começar a usá-los; Caso o navegador não dê suporte os campos serão tratados como entradas de texto normais.

type: email

O Campo de entrada do tipo email é usado para especificar que a entrada deve conter um endereço de e-mail. O proprio HTML tratará a validação quando o formulário for submetido. Vale citar que o HTML só tratará a entrada usando expressões regulares para a verificação do texto, não é de forma alguma garantida que o e-mail seja um e-mail válido. Então um sobrinho pergunta "por que não uso tudo input text?". Vamos lembrar que precisamos manter a web acessível e para garantir isto é necessário que a semântica seja mantida, então a especialização dos campos é a melhor forma de você tratar isso. Vamos aos exemplos:
Exemplo:
Digite seu e-mail:
simples não?

type: url

Funcionamento similar ao email, o url faz a verificação da entrada para que o dado submetido seja na forma de url no modelo com http:// no inicio e o  .xxx no final. Ainda aqui o próprio HTML validará o campo. Dica: O Safari no iPhone reconhece este tipo de entrada e modifica o teclado na tela para a entrada de URL com a opção de adicionar o .com
Exemplo:
Seu e-mail:
Teclado com Iphone com sugestões de complemento de URL
Para facilitar um pouco a visualização e o compartilhamento do código para seu estudo, estou compartilhando pelo github e usando o Dabblet podemos editar online. Infelizmente o dabbet não renderiza a validação do input, mas se o código for testado local funcionará.

Comentários

VEJA TAMBÉM...