Como colocar texto de exemplo em um campo input em HTML

Escrito por sara williams | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como colocar texto de exemplo em um campo input em HTML
Adicione o atributo "placeholder" para adicionar texto de amostra a um campo "input". (Jupiterimages/Photos.com/Getty Images)

No passado, os desenvolvedores Web precisavam estabelecer um valor ou usar o JavaScript para adicionar dados de exemplo a um campo de um formulário. Ambos métodos possuem problemas, pois os valores são enviados junto a outras entradas quando os usuários clicam em "Submit" (Enviar) e às vezes desativam o JavaScript. No HTML5, há um atributo "placeholder". Esse atributo permite aos codificadores colocar de exemplo em um campo de formulário textos que não serão enviados como valor do formulário. Use um plugin "fall-back" de jQuery para fazer com que o texto "placeholder" seja visivel a usuários de outros navegadores.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o seu arquivo HTML em um editor de texto plano, ou código, da sua escolha. Localize o campo "<input>" onde você deseja adicionar o texto de exemplo. Em HTML, edite o tag para que fique assim:

    <input placeholder="texto de exemplo">

    O novo atributo "placeholder" difere do "value" pois, se o usuário esquecer de digitar alguma coisa no campo antes de clicar no botão "Submit" (enviar), o placeholder não será enviado. No entanto, o valor será passado para o script do formulário, além do usuário digitado. Se não estiver usando HTML5 para o código da sua página, configure o valor desta forma:

    <input type="text" value="texto de exemplo" />

    Note que você não deve remover outros atributos, como o tag "type" ou "name", do controle "input". Coloque apenas os valores ou "placeholders" desejados.

  2. 2

    Baixe o plugin "placeholder.js", para jQuery, a partir do site Webcloud e descompacte-o no seu computador. Localize o arquivo "jquery.placeholder.min.js" e copie-o para a pasta apropriada dentro do seu site. Por exemplo, se o seu site tiver uma pasta chamada "meusite" e houver uma pasta "js" dentro dela, copie o arquivo nela para manter tudo organizado.

  3. 3

    Adicione un "fall-back" na sua página web para os visitantes que usem navegadores incompatíveis com o atributo "placeholder". Esse passo não se aplica a "value", pois todos os navegadores o suportam. Localize os tags "<head>" e "</head>" no seu documento HTML e adicione suporte para o jQuery entre eles:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

    E, embaixo dessa linha:

    <script src="http://seusite.com/localizacao-do/seu-arquivo/jquery.placeholder.min.js"></script>

    Entre as aspas depois do atributo "src", você deverá adicionar a rota ao seu arquivo "jquery.placeholder.min.js". O escrito acima é apenas um exemplo.

  4. 4

    Adicione um tag "<script>" de abertura e um "</script>" de fechadura embaixo de todos os outros tags "<script>", dentro da seção "<head>". Esse tag não precisará de atributos pois você o usará para colocar código do jQuery diretamente na página web e HTML5 não precisa do atributo "type". Adicione entre os tags a chamada à função "placeholder":

    <script> $('input[placeholder], textarea[placeholder]').placeholder(); </script>

    Altere o texto "placeholder" entre os colchetes para o texto que você deseja usar, como por exemplo "Seu nome aqui". Como o jQuery usa CSS para localizar fragmentos de código HTML, escreva algo assim:

    $('#campo-nome[Nome]').placeholder();

    O código acima buscará um tag "<input>" com "campo-nome" como atributo "id" e escreverá o texto "Nome".

Dicas & Advertências

  • Se você estiver usando código HTML5, certifique-se de usar um script que o habilite em navegadores antigos, e de que o "doctype" no começo do arquivo HTML seja "".

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível