Input Text Placeholder

Bem, o HTML 5 é uma realidade e está ai batendo em nossas portas, dessa forma é bom começar a conhecer o que tem de bom na web sobre o assunto, recomendo dar uma lida no Pinceladas da Web.

A idéia é evitar o uso de javascript desnecessário, por exemplo, quem nunca teve que montar um script apenas para fazer o texto do input sumir quando ele for selecionado? No blog Casos de Casa da SulAmérica tem um exemplo funcionando, confira o código:



No exemplo acima a troca é feita por uma imagem com a Palavra Busca nela, o mesmo efeito pode ser feito de várias formas.

Para obter o mesmo efeito com HTML 5 é muito mais simples, acompanhe:


O próprio HTML 5 já tem um atributo placeholder, porém ele só funciona em webkit, atualmente disponível no Safari e Chrome.

Leia Também:

About Tilo

Profissional FrontEnd desde 2006, Executa trabalhos com xHtml, CSS, JavaScript, MySQL e PHP, estudante de C# e SQL. Cursa Tec. em Analise e Desenvolvimento de Sistemas na UniItalo.
This entry was posted in XHTML & CSS and tagged , , , . Bookmark the permalink.

One Response to Input Text Placeholder

  1. yuri says:

    Corrigindo: Na atual versão do firefox, versão 9.0.1, o placeholder já é reconhecido pelo motor gecko
    :)

Deixe um Comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree