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

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

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.

E se você ainda improvisa, colocando um valor padrão dentro do input, continue a leitura e descubra mais sobre o que é placeholder, porque usá-lo, como estilizá-lo e formatá-lo. Entenda mais sobre o assunto!

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!

O que é placeholder e por que usá-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 serviços de placeholder têm o funcionamento parecido. Você insere uma imagem normal no HTML da sua página, apontando para o serviço de 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.

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ê nesta missão, separamos uma lista com alguns sites de placeholder para usar em seus projetos. Confira:

• 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 seja um especialista.