Olá desenvolvedores, neste tutorial iremos adicionar um atributo placeholder aos campos da nossa aplicação. O placeholder especifica uma dica curta que descreve o valor esperado de um campo de entrada. A dica é inserida no campo antes que o usuário insira um valor.

Ele funciona para os componentes de entrada, como por exemplo, campos de texto, pesquisa, url – Uniform Resource Locator, telefone, e-mail e senha. Para alguns desenvolvedores o placeholder não é uma propriedade importante, mas ela é um requisito essencial para que sua aplicação atenda os requisitos de usabilidade.

Mas é importante você compreender que não deve utilizar o placeholder em substituição ao Label, o primeiro é complementar a este, mas não deve substituí-lo. O label ou no contexto do JSF – JavaServer Faces h:outputLabel é uma propriedade rótulo que especifica (rotula) um campo. O placeholder por sua vez, atribui informações complementares ao campo, o seu uso é opcional, mas aconselho não desconsiderar usá-lo.

USBILIDADE E ACESSIBILIDADE

Atualmente tão importante quanto a usabilidade é a acessibilidade proporcionada pelo sistema. Assim enquanto a usabilidade implica na facilidade com que os usuários lidam com dada ferramenta, a acessibilidade é sobre quebrar barreiras. Significa a construção de aplicações onde os mais diferentes tipos de pessoas, tenham elas alguma deficiência ou não, possam ter acesso aos conteúdos, interagir e compreendê-los com autonomia.

Nesse sentido, tanto os elementos visíveis de uma página como o label, placeholder, uma palavra ou expressão em destaque quanto os elementos adicionais como descrição alternativa de imagens, textos simplificados, áreas de cliques maiores entre outros são essenciais.

PLACEHOLDER NO JSF

Tendo entendido a importância do placeholder em sua aplicação, vamos a implementação. O JSF só veio a dar suporte ao placeholder em sua versão 2.2, assim, para utilizá-lo em uma aplicação JSF, é preciso declarar na página onde o utilizaremos uma biblioteca que dá suporte ao HTML5.

NOTA: Outras bibliotecas precisaram ser declaradas durante toda a implementação, nós a suprimimos na imagem para nos concentrarmos apenas na biblioteca foco de nosso estudo de hoje.

No campo onde deseja adicionar o placeholder utilizando o prefixo pt informado na declaração da tag, escreva pt:placeholder, e entre aspas a dica desejada. Salve e atualize a página.

Veja como fica o campo com o placeholder, você deverá proceder da mesma forma para os demais campos.

EM POUCAS PALAVRAS

Além do ganho em usabilidade e acessibilidade com o uso de propriedades como o placeholder, no caso deste, ele serve também para orientar o usuário quanto ao correto preenchimento do campo.