Hdblog: [Blogger] - Como colocar uma frase padrão no formulário de busca
[Blogger] - Como colocar uma frase padrão no formulário de busca
Escrito por: Unknown • 13 de março de 2010 às 02:24 • 1 Comentário
Olá caro leitor, depois de ter ensinado como colocar um formulário de busca em HTML no Blogger, eu me deparei com um pequeno detalhe que havia me escapo completamente: eu reparei que na maioria dos sites e blogs o formulário de busca contém uma frase padrão dentro do campo de digitação, que quando clicamos para digitar o que queremos procurar, ela some e quando clicamos fora do campo de busca, ela volta a aparecer. Isso estava me tirando o sono. Foi então que fazendo uma busca rápida pelo Oráculo da Internet, descobri como fazer esse "efeito".
Ele pode ser utilizado em qualquer tipo de formulário criado com HTML, ou em qualquer formulário de busca que você tenha acesso a estrutura do mesmo. Para adicionar o efeito ao seu formulário, basta adicionar a parte que está destacada em vermelho no código abaixo dentro do código do seu formulário de busca, mais precisamente dentro da tag input (destacada em azul) do tipo texto — que é a indicação do lugar onde será digitado o texto a ser procurado.
<input type="text" name="q" placeholder="TEXTO QUE APARECERÁ NO CAMPO..."/><input type="submit" value="Pesquisar" />
Após adicionar o código à sua busca ou formulário, salve as alterações. Abaixo você pode conferir como ficará o seu formulário depois de adicionar o código. Clique dentro da área de digitação, escreva algo e note como a frase some. Em seguida, apague o que escreveu e clique em qualquer parte em branco do blog para ver a frase aparecer novamente.
Caso você queira um formulário de busca mais customizado, aconselho que veja o artigo:
Formulários de busca customizados com CSS para Blogger - Hdblog
Atualização — 15.06.2012 às 05h50
O código responsável por adicionar o texto dentro do campo de texto (destacado em vermelho no código acima), foi alterado para refletir o novo padrão HTML5. É importante que você utilize esse novo padrão em seu blog, embora alguns navegadores ainda não o suportem (me refiro ao Internet Explorer). É importante também que você saiba que diferente do código antigo, que "apagava" o texto padrão logo após o usuário clicar dentro do campo, esse novo código possui reações diferentes dependendo do navegador que está sendo utilizado. Em alguns navegadores a frase continua sumindo ao clicar no campo, mas em outros a frase só some após o usuário começar a digitar alguma coisa.