Placeholder: o que é e por que usá-lo?

Em linguagem de programação, placeholder é o trecho de código descrito no espaço reservado, pronto para ser preenchido.

Mulher trabalhando com códigos de programação

O atributo placeholder é uma pequena frase ou palavra, que tem o intuito de ajudar usuários a entender como devem preencher determinado formulário, inserindo um texto contextual no campo a ser respondido. É a salvação dos devs, que já fizeram gambiarras para poder simular o que o placeholder faz tão facilmente.

Exemplo de placeholder

E se você quer entender o que é placeholder, porque usá-lo, como estilizá-lo e formatá-lo, continue a leitura.

O que é placeholder e por que utilizá-lo? 🤔

A expressão vem do inglês: place (lugar) + hold (segurar/reservar), e se trata de um lugar reservado para um propósito específico. Falando o português correto, placeholders são trechos de código que devem ser configurados pelos desenvolvedores e podem ser usados em diferentes layouts que aceitam condições de exibição, para que a informação final seja exibida para os usuários do produto ou visitantes do site. Em outras palavras, são elementos predefinidos que precisam ser programados, para que possam ser exibidos.

Quando se projeta um novo layout de site web, por exemplo, é comum começar a trabalhar e não ter logo de início todas as imagens necessárias para finalizar o arranjo dos elementos. Para isso, você deve usar os layouts. São eles que vão indicar o tipo de placeholder e o arquivo do qual ele vai puxar o conteúdo, permitindo que o código consiga referenciar essa informação e mostrá-la nas páginas.

Temos, assim, uma cadeia que envolve a configuração do placeholder no layout e a conexão deste último com um template. Os tipos de placeholders configuráveis são: Banner, Banner DHTML, Coleção e HTML.

Geralmente, todos os atributos têm o funcionamento parecido. Você insere uma imagem normal no HTML da sua página, apontando para o serviço de placeholder.

Quando não utilizar o atributo placeholder? ❌

O placeholder cumpre a função de disponibilizar ao usuário uma dica que descreve o valor esperado em um determinado campo de entrada. E ela deverá ser apresentada ao usuário antes que ele entre com esse valor.

Por mais que placeholder e labels sejam complementares, eles possuem objetivos distintos, portanto, um não substitui o outro. É importante aproveitar o benefício de ambos em sua interface e, caso você decida usar apenas um deles, escolha o label.

Isso porque, em alguns casos, os atributos do placeholder podem ser confusos para pessoas com problemas cognitivos, de memória, autistas ou que tiveram alguma lesão traumática cerebral, pois podem imaginar que são textos pré-preenchidos e irão tentar enviar sem colocar a informação.

Além disso, a cor cinza-claro, usada em placeholders, fica quase invisível para pessoas com baixa visão, indo em desencontro com as Diretrizes de Acessibilidade para o Conteúdo da Web. Isso se deve em razão de que o contraste da cor pode não ser compatível com diversos fundos de tela, podendo até mesmo passar despercebido por leitores de tela utilizados por usuários cegos.

Placeholder

Como estilizar e formatar um placeholder?

Estilizar placeholder de inputs não é algo complexo. Basta seguir alguns truques para que a solução funcione corretamente em todos os navegadores. No entanto, o fato do placeholder simplesmente inserir um texto contextual no campo de formulário faz com que muitos devs acreditem que não há como formatá-lo, trocar a cor, tamanho, fonte etc. Mas isso é um engano: essa possibilidade existe sim e é mais simples do que parece. Ainda assim, será preciso usar prefixos para que ela funcione.

Para formatar o placeholder nos campos de formulários e textareas (controle de edição para uma caixa de texto), basta manipular a pseudo-class ::placeholder. Uma dica importante é não agrupar os seletores para facilitar a leitura, pois se um dos browsers não reconhecer um deles, acabará invalidando o grupo inteiro, e não irá funcionar. Nesse caso, a melhor solução é separá-los.

Placeholder

O atributo placeholder foi um presentão herdado do HTML5. Ele é uma pequena dica, frase ou palavra, que tem o intuito de ajudar o usuário a entender como deve preencher determinado formulário. Já dissemos no tópico acima, mas é importante ressaltar: o placeholder não deve ser usado como alternativa para a LABEL (o <label> deve ser utilizado como rótulo de um campo de formulário e sempre utilizado).

Entre as estilizações suportadas, destacamos: propriedades de fontes, color, propriedades debackground, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform

Sites de placeholder para usar em seus projetos 💻

Imagine essa situação: você está criando um site, mas faltam imagens. Nessa hora, conhecer um bom placeholder faz toda a diferença, pois, além de otimizar seu tempo, não será preciso fazer muitas pesquisas. Para ajudar você nessa missão, separamos uma lista com alguns sites de placeholder para usar em seus projetos. Confira:

Desenvolva seu autoconhecimento e aprenda sobre os principais termos técnicos do mercado em nosso glossário de programação. Clique aqui e baixe agora!

Placeholder.com: é um dos serviços mais simples da área que existe na internet. A facilidade é sua melhor característica e permite a mudança do formato do texto, das cores e do tamanho da imagem. É ideal para uso no contexto profissional e indicado para todos os níveis de conhecimento da área.

Placekitten: possibilita usar a plataforma em espaços reservados dentro dos seus designs ou código, apenas colocando o tamanho da imagem e a URL. É um pouco mais nichado e oferece fotos de filhotes de gatos.

ImgPlaceholder: consegue sobrepor ícones do Fontawesome. Também acompanha um gerador que permite configurar todos os parâmetros, como tamanhos, cores e muito mais.

Lorem Picsum: trocadilho com Lorem Ipsum (texto-padrão usado quando não se tem o trecho que vai no design). Descende do Unsplash, site que apresenta fotos de uso livre.

Placebacon: ideal para quem tem restaurante e está à procura de imagens atrativas para usar no site ou redes sociais.

Dynamic Dummy Image Generator: este gerador de placeholder oferece diversas opções de personalização, como largura e altura, proporções, cor de fundo e de primeiro plano. Além disso, permite personalizar o texto alternativo e o formato das imagens.

Placeit: com cerca de 3.000 mockups que variam de telas de smartphones, desktops, laptops e tablets, é uma ótima referência para se ter nos favoritos.

Seja um dev de sucesso! 😎

Se você é ou deseja se tornar um programador ou programadora, esperamos que este conteúdo te ajude a entender melhor sobre esse universo. E, caso queira se aperfeiçoar ainda mais, a Digital House possui cursos desenvolvidos especialmente para você aprender e se preparar, com aulas online, 100% ao vivo e ministradas por professores que estão no mercado.

Como o curso Certified Tech Developer e Desenvolvedor Web Full Stack, que forma programadores web full stack com um grande nível de aprofundamento dos temas. Se você está buscando construir uma carreira na área, inscreva-se agora mesmo e garanta o seu sucesso profissional e da sua empresa!

Além de toda a base de conhecimento, os alunos podem participar do programa de apoio à recolocação (gratuito), além de feiras de recrutamento exclusivas (Recruiting Day). Dê o pontapé inicial para sua jornada de sucesso! Inscreva-se em nossos cursos e torne-se um especialista.

Conheça o curso de desenvolvimento web full stack