Textarea é um elemento básico de (X)HTML (especialmente formulários). Mas, muitos desconhecem, textareas possuem muitas peculiaridades, dicas e truques que permitem efeitos e interações interessantíssimas. Eis uma bela coleção de 9 truques e dica simples que você pode fazer com textareas. Aproveite!

Imagem como background da textarea (desaparece quando recebe foco)

É possível adicionar uma imagem de fundo para um textarea (assim como quase para qualquer outro elemento). Às vezes, por algum motivo qualquer, quando se adiciona um background, isso pode “quebrar” o estilo padrão do navegador para o textarea: o estilo de borda padrão – 1px sólido – é substituído por uma espessa borda chanfrada. Para restaurar o padrão do navegador, é possível, apenas, reestilizar a textarea.

textarea {
    background:url(img/textarea-background.png) center center no-repeat; /* "Quebra" o padrão de textarea */
    border:1px solid #888; /* "Restaura" o padrão */
}

Essa imagem de fundo certamente irá interferir com a legibilidade do texto quando as palavras começarem a “passar por cima”. Para resolver isso, basta uma solução simples (com jQuery) que faz o seguinte: retirar a imagem de background quando o textarea recebe foco e o coloca de volta no blur, caso nenhum texto tenha sido digitado.

$('textarea')
  .focus(function() { $(this).css('background', 'none') })
  .blur(function() { if ($(this)[0].value == '') { $(this).css('background', 'url(img/textarea-background.png) center center no-repeat') } });

Texto com placeholder HTML5

No HTML5, haverá um novo atributo: placeholder. Ele mostra um texto em cinza clarinho na área de texto que desaparece quando o textarea está em foco ou tem algum valor.

<textarea placeholder="A vingança nunca é plena, mata a alma e a envenena!" cols="30" rows="5"></textarea>

Texto via HTML5 placeholder funciona no Safari 5, Mobile Safari, Chrome 6 e Firefox 4 alpha.

Texto com placeholder, HTML5 e jQuery

É possível testar se um determinado elemento suporta um atributo, em particular, por meio de testes com JavaScript:

function elementSupportsAttribute(element, attribute) {
    var test = document.createElement(element);
    if (attribute in test) {
        return true;
    } else {
        return false;
    }
};

Então, dá para escrever o código de modo que se o browser suporta o atributo placeholder, ele o usa; se não, seu comportamento é “imitado” através de jQuery:

if (!elementSupportsAttribute('textarea', 'placeholder')) {
  // Fallback for browsers that don't support HTML5 placeholder attribute
  $("#example-three")
    .data("originalText", $("#example-three").text())
    .css("color", "#999")
    .focus(function() {
        var $el = $(this);
        if (this.value == $el.data("originalText")) {
          this.value = "";
        }
    })
    .blur(function() {
      if (this.value == "") {
          this.value = $(this).data("originalText");
      }
    });
} else {
  // Browser does support HTML5 placeholder attribute, so use it.
  $("#example-three")
    .attr("placeholder", $("#example-three").text())
    .text("");
}

Remover o brilho azul

Todos os browsers WebKit, o Firefox 3.6 e Opera 10 colocam uma borda azul brilhante ao redor de textareas quando estão em foco. É possível removê-lo da seguinte forma:

textarea {
outline:none;
}

Você também pode aplicar à pseudo-classe :focus que vai funciona de qualquer maneira. Que saibamos, ainda não foi encontrada uma maneira de remover o brilho do Firefox e Opera. Se souber, por favor, comente!

Remover resizer da textarea

Navegadores baseados em WebKit colocam um pequeno elemento de UI no canto inferior direito das textareas para que os usuários possam redimensionar a área de texto. Se, por qualquer motivo, você quiser remover isso, uma regra CSS simples é tudo o que você precisa:

textarea {
resize:none;
}

Adicionar resizer na textarea

A resizeable interaction do jQuery UI pode ser usada em textareas. Ela funciona em todos os browsers e substitui a versão do WebKit nativa, já que essa versão tem todos os tipos de coisas mirabolantes (como callbacks e animações).

Para usar a interação, é preciso carregar jQuery e jQuery UI em sua página e usar o seguinte javascript:

$("textarea").resizable();

Fica a pergunta: usar jQuery e jQuery UI somente para adicionar o resize handle a suas textareas vale a pena? Não uma “resposta certa” para a pergunta; só você pode julgar se isso é adequado às necessidades e especificações de seu projeto.

Auto-redimensionar conforme o conteúdo

James Padolsey tem um script jQuery muito bom para auto redimensionar textareas conforme o conteúdo. A textarea começa com um tamanho normal razoável e, conforme você digita mais e mais conteúdo, ela se expande para incluir todo o texto, ao invés de mostrar a barra de rolagem padrão.

O plugin tem uma variedade de opções (confira), mas, em sua forma mais simples de uso, basta carregar o arquivo do script e usar assim:

$('textarea').autoResize();

Nowrap (sem quebra de linha automática)

Para evitar a quebra de texto com CSS normalmente é usada a regra “#seletor { white-space: nowrap; }“. Mas, por alguma razão, isso não funciona com textareas. Se a interação que você procura nas textareas é a linha não quebrar até que o Enter seja pressionado, é preciso usar o atributo “wrap” com o valor “off”, da seguinte maneira:

<textarea wrap="off" cols="30" rows="5"></textarea>

Remover barra padrão do Internet Explorer

O infame Internet Explorer coloca uma barra de rolagem vertical por padrão em todas as textareas. É possível ocultar isso com “overflow: hidden”, mas será um problema se a barra de rolagem realmente for necessária em função da quantidade de texto digitada. Felizmente, a propriedade overflow tem o valor “auto”, que exibe a barra de rolagem somente quando esta se fizer necessária. Fica assim:

textarea {
overflow:auto;
}

Conclusão

Você já tinha pensado que tantas interações e modificações fossem possível em um elemento de HTML tão básico como textarea? Se você quiser ser ainda mais ousado, com javascript e CSS é possível obter efeitos e interações ainda melhores! A propósito, os exemplos mostrados no artigo podem ser testados nesta página.

Se tiver alguma outra dica e/ou quiser mostrar algo de interessante que tenha feito em textareas, comente!

Artigos Relacionados

• Como otimizar códigos jQuery e aumentar a performance do front-end
• Melhorando a interação em formulários de busca
• Wireframes para web: guia completo de desenvolvimento
• Como fazer loading em conteúdos do site
• 5 dicas para temas WordPress melhores
• URLs amigáveis (slug) à WordPress
• Gradiente CSS cross browser: degradês em CSS sem usar imagens
• Melhores editores WYSIWYG para seu projeto
• 15 fantásticos comandos SQL para WordPress
• Breadcrumbs: guia completo com exemplos e melhores práticas

Muitos desconhecem e negligenciam o uso de meta tags para a mais eficiente colocação do web site na internet e auto-emplicação sobre seu conteúdo, o que é importante para diversas coisas. Muitos dos que já mexem com desenvolvimento para web há algum tempo não dão a devida importância às meta tags e, com isso, perdem a oportunidade de descrever melhor seu conteúdo e o que os sites que desenvolvem têm a oferecer.

“Meta” + “Tag” = Meta Tag

O termo meta tag é, na verdade, formado por 2 palavrinhas que se juntam para dar seu significado. E para entender este significado, é preciso entender as 2 palavras, em separado:

Meta é um prefixo grego que significa algo como “após, “que ultrapassa”, “que engloba”, “que está além”. Este não é um prefixo utilizado somente no desenvolvimento para web; você já deve ter ouvido e lido palavras como “metabolismo” e “metamorfose”. Este prefixo meta refere-se à “coisas sobre a própria coisa” ou, em outras palavras, dados sobre dados, informação sobre a informação.

Tag é uma palavra do inglês que significa “etiqueta” ou “rótulo”. Tanto nos EUA, no Brasil ou qualquer parte do mundo, etiquetas servem para identificar, nomear e marcar algo ou alguma coisa para que possa ser identificado e/ou corretamenta catalogado – dentre outras coisas.

Então, juntando os 2 termos, “meta” e “tag“, temos meta tag que, como você já deve ter “adivinhado”, são tags que descrevem o documento web a qual pertencem (“informação sobre a informação”); as meta tags são para descrever informações sobre sites e páginas que as contém; informam sobre qual conteúdo está ali e mostra informações extras a respeito deste conteúdo.

As metatags são colocadas como elementos-filho de head, no (X)HTML, e sua sintaxe obedece à seguinte convenção:

<meta name=”nome-da-meta” content=”conteudo-da-meta” />

Então, para qualquer das meta tags existentes que você for usar, a convenção para seu uso é esta, onde se informa primeiramente de qual meta se está inserindo e, posteriormente, qual valor se dá. Para os acostumados com a sintaxe XHTML e afins – grande parte dos leitores do desenvolvimento para web -, não há nenhuma novidade.

Meta tags mais usadas e conhecidas

Existem muitas meta tags disponíveis para se usar, entretanto, algumas são de especial importância e devem ser obrigatoriamente inseridas em cada uma das páginas de seu web site. Sem elas, diversos prejuízos podem acontecer ao contexto geral de seu site e os objetivos traçados para ele terão mais dificuldade em serem alcançados.

Lembre-se: comece a inserção de suas meta tags sempre depois de inserir o título de seu documento, através da tag <title>, já que esta deve ser a primeira tag a constar dentro do cabeçalho (seção <head>) de cada uma de suas páginas web.

Meta tag “description”

Esta meta tag descreve o conteúdo do documento. É muito importante, já que mecanismos de busca que suportam esta meta exibem seu conteúdo na descrição de página da página de resultados de pesquisa.

Portanto, esta meta tag deve ser sabiamente utilizada e o responsável pela elaboração de seu conteúdo deve usar sentenças crutas, com as principais palavras-chave do documento e de forma a ser atrativa para um potencial visitante se interessar em conhecer seu conteúdo somente por ter lido a descrição.

Meta tag “keywords”

Nesta meta-tag você coloca uma lista de palavras-chave (palavras-chave estas que, obviamente, têm a ver com o conteúdo da página web). Os bots de busca verificam quais as palavras-chaves foram apontadas nesta meta e, segundo seus critérios, armazenas as informações em seus bancos de dados para melhor servir as pessoas com seus resultados de procura.

Cuidado para não abusar, na tentativa de ser “espertinho” e burlar os spiders de busca, pois em seus algoritmos já é previsto este tipo de prática e, ao invés de “se dar bem”, seu site será severamente penalizado, podendo, no pior caso, ser banido do índice de resultados de procura dos buscadores.

Meta tag “robots”

A “robots” serve para, de certa maneira, controlar os bots de busca quanto à sua tarefa de indexação. Através dos diferentes valores possíveis para seu conteúdo, é possível passar instruções aos bots de busca para dizer qual o critério de indexação foi escolhido para tal ou qual página de seu site. Os valores mais comuns para esta meta tag são:

• all. Valor padrão, significa “vazio” – o robô de busca não recebe nenhuma informação;
• index. Os robôs de busca podem incluir a página normalmente;
• follow. Robôs podem indexar a página e ainda seguir os links para outras páginas que ela contém;
• noindex. Os links podem ser seguidos, mas a página não é indexada;
• noFollow. A página é indexada, mas os links não são seguidos;
• none. Os robôs podem ignorar a página;
• noarchive (apenas GoogleBot). A página não é arquivada.

Outras metatags

Além das principais e mais conhecidas meta-tags, ainda existem outras que, embora de uma maneira diferente, têm seu devido valor e importância. O uso delas pode auxiliar na performance e desempenho do site, ter relação com o tipo de conteúdo você publica e outras coisas.

Meta tag “author”

Serve para especificar e indicar quem é o autor da página. Comumente, as agências de web colocam seus nomes e endereços para seus web sites como valor desta tag. Teoricamente, isto aumenta o índice de visitação dos bots de busca e aumenta o pagerank, consequentemente colocando a agência em boas colocações nos mecanismos de busca.

Sinceramente, não sei se é verdade ou boato; de qualquer maneira, não custa nada e é justo colocar o nome e endereço virtual de quem fez a página, não é?

Meta tag “revisit-after”

Ao contrário do que muitos pensam, esta meta tag não informa aos bots de busca com qual frequencia eles devem voltar ao site para reindexar os conteúdos (quando eles voltam é mais ou menos aleatório). Sua real função é informar com qual frequencia os proxys devem refazer os chaches das páginas de seu web site.

Seu uso consiste em informar, em dias, o período que você deseja, em dias. Por exemplo:

<meta name=”revisit-after” content=”7 days” />

Não existe um “número ideal” para se colocar na meta revisit-after; vai de cada caso. Se você tem um blog ou site que é frequentemente atualizado, então pode ser uma boa você especificar um valor mais baixo. Se não atualiza muito seus conteúdos, pode ser um valor um pouco mais alto. Cada caso é um caso.

Meta tag “expires”

Esta meta tag indica a “data de validade” de uma página web, quer dizer, indica quando uma página será considerada como expirada. Se você espeficicar “0″ (zero) como valor, então ele considera isso como “agora” (por isso essa meta tag é muito usada em dobradinha com a revisit-after).

Visite o gerador de meta tags para gerar um valor adequado à meta expies, que é meio chatinha de calcular…

Meta tags padrão Doblin Core

Assim como aconteceu com os microformatos, no sentido de criar sua própria marcação, alguns desenvolvedores resolveram criar suas próprias meta tags. O mais conhecido e aceito antes a comunidade de desenvolvedores é o padrão Doblin Core, que existe e é aprimorado há mais de 10 anos!

Visite o web site oficial do projeto Dublin Core para saber mais informações a respeito e conhecer as meta tags DC que você pode usar em suas páginas.

Meta tags são importantes

Saber utilizar as meta tags é importante para dar um ajuste fino ao web site. Saber usar corretamente e decidir qual meta tag usar e qual não usar em determinada página, apesar de não parecer, pode fazer toda a diferença para seu web site. Mas estas foram somente algumas das meta que existem; veja uma relação mais completa e detalhada nos seguintes endereços:

• Mozilla developer center: utilizando meta tags;
• Wired 2000: meta tag guide;
• HTML tag reference guide: <META>.

Guarde bem seus “meta conhecimentos”!  ;-)

Artigos Relacionados

• Erros comuns em desenvolvimento web para campanhas de SEO
• Maneiras práticas para melhorar a visitação de seu blog e fidelizar seus leitores
• Elementos de design aplicados à web
• JSON – JavaScript Object Notation
• Estratégia Web de Pirâmide: guia para uma estratégia de web equilibrada
• Breadcrumbs: guia completo com exemplos e melhores práticas
• 6 mitos de SEO que você deve evitar
• Como otimizar imagens para web: guia de otimização de imagens
• Mastering Twitter, o manual completo sobre twitter para desenvolvedores e marketeiros
• 8 características de User Interfaces (UI) de sucesso

IDs e classes são “anzóis”

Precisamos de formas de descrever conteúdos em documentos HTML / XHTML. Os elementos básicos como <h1>, <p> e <ul> frequentemente fazer o trabalho, mas o conjunto básico de tags não abragen todas as possibilidades de elementos de página ou escolhas de layout. Para isso, precisamos de IDs e Classes.

Por exemplo <ul id=”nav”>, isso dá a oportunidade de visar especificamente esta lista, então há uma maneira de manipular esta lista exclusivamente em relação a outras listas não-ordenadas da página. Ou talvez tivéssemos uma seção na página que não possui uma tag relevante para signifcar, por exemplo, um rodapé, onde poderíamos fazer algo como <div id=”footer”>. Ou talvez tenhamos boxes na barra lateral para manter o conteúdo separado de alguma forma: <div class=”sidebar-box”>.

Esses IDs e classes são os “anzóis” que precisamos fazer na marcação para colocarmos as mãos neles. CSS obviamente precisa disso para que possa fazer seletores e montar folhas de estilos, mas outras linguagens web, como javascript, também dependem deles. Mas quais as diferenças entre IDs e classes?

IDs são únicos

• Cada elemento pode ter apenas um ID;
• Cada página pode ter apenas um elemento com aquele ID.

Quando se está aprendendo sobre isso, é comum ouvir que só se deve usar IDs uma vez, mas é possível usar uma classe várias vezes. Basicamente, isso entra num ouvido e sai no outro, porque soa mais como uma “regrinha” que algo realmente importante. Se você trata somente com HTML / CSS, isso pode acontecer com você, também, porque eles realmente não parecem fazer nada de diferente.

Aqui vai uma: seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento. Validação deve ser importante para todos nós, de modo que, por si só, é algo muito importante. Adiante, mais razões pelas quais um ID deve ser único.

Classes não são únicas

• Você pode usar a mesma classe para vários elementos;
• Você pode usar várias classes para um mesmo elemento.

Qualquer informação de estilo que precise ser aplicada a múltiplos elementos em uma página deve ser feita com uma classe. Tomemos como uma exemplo uma página com vários “widgets“:

<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>

Agora, é possível usar a mesma classe “widget” como gancho para aplicar o mesmo conjunto de estilos para cada um deles. Mas, e se for preciso ter um deles maior que os outros, mas continuar com um estilo que compartilhe dos outros atributos? É possível aplicar mais de uma classe a um elemento:

<div class="widget"></div>
<div class="widget big"></div>
<div class="widget"></div>

Não há necessidade de fazer e nomear uma nova classe aqui, apenas colocar o nome da nova classe no atributo class, juntamente com o nome da classe que já está lá. As diferentes classes são delimitadas por espaços e a maioria dos navegadores permite quaisquer números delas (na verdade, é mais como milhares, o que é muito mais do que realmente é preciso).

Não existem padrões de IDs e Classes em nenhum navegador

Colocar um nome de classe ou ID em um elemento, por padrão não faz nada a esse elemento.

Isso é algo que intriga quem é iniciante. Você está trabalhando em um site e descobre que a aplicação de uma classe com um nome em particular resolve um problema que você tem. Então você mexe em outro site, com o mesmo problema, e tenta corrigí-lo da mesma maneira, usando aquele mesmo nome de classe, pensando que o nome da classe, por si só, tem alguma propriedade mágica, apenas para descobrir que não funciona assim…

Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e aplicar estilos.

Códigos de Barra e Números de Série

Talvez códigos de barra e números de série sejam uma boa analogia. Tome um iPod, numa loja. Na embalagem há um código de barras. Ele indica à loja que produto é esse; então, quando é escaneado, o código de barras informa exatamente que produto é aquele e quanto custa. É possível saber até sua cor e em qual lugar do armazém ele era mantido. Todos esses iPods têm exatamente o mesmo tipo de código de barras.

O iPod tem também um número de série que é absolutamente único em relação a qualquer outro iPod (ou outro dispositivo) em todo o mundo. O número de série não informa o preço. Poderia, mas para a loja que o vende esta não seria uma maneira eficaz de armazenar e utilizar essa informação. É muito mais fácil usar um código de barras porque se, por exemplo, o preço muda, é preciso apenas alterar o preço para aquele código de barras, e não para cada número serial do sistema.

Isso é muito parecido com IDs e Classes. Informações que são reusadas devem ser mantidas em uma classe e informações que são totalmente únicas devem ser mantidas em um ID.

IDs têm uma funcionalidade especial nos navegadores

Classes não tem funcionalidades especiais no browser, mas IDs têm um truque muito especial na manga: um “valor de hash” para URLs. Se você tiver um URL como http://seudominio.com#comments, o navegador vai tentar localizar o elemento com o id “comments” e vai automaticamente rolar a página até chegar nesse elemento.

É importante observar que o browser vai rolar a página até onde quer que o elemento esteja; então, se houver algo de especial, como uma DIV com barra de rolagem (propriedade CSS overflow com valor “auto” ou “scroll”), esta barra de rolagem vai ser deslocada – rolar para baixo -, também.

Esta é uma razão importante sobre o porquê é importante ter um ID absolutamente único. Com isso, o navegador sabe até quando rolar.

Elementos podem ter ambos, ID e Classes

Nada para você quando você usa ambos, ID e classes em um único elemento. Na verdade, fazer isso na maioria das vezes é uma boa idéia. Tomemos como exemplo o padrão de marcação para item de lista de um comentário no WordPress:

<li id="comment-27299" class="item">

Tem uma classe que foi aplicada que talvez se queira usar para estilizar todos os comentários na página, mas também há um único valor de ID (dinamicamente gerado pelo WordPress). Com isso, é facilmente possível fazer um link diretamente a um comentário, em uma página, em especial.

CSS não se importa

Quanto ao CSS, não há nada que você possa fazer com um ID que não possa fazer com uma Classe e vice-versa. Às vezes, quando se está iniciando no estudo de CSS e se tem um problema, tenta-se alternar entre usar ID ou usar Classe. O CSS não se importa.

Javascript se importa

Aqueles que mexem com javascript provavelmente já estão mais em sintonia entre as diferenças entre as Classes e IDs. Javascript depende da existência de um elemento de página com ID único, ou então a comumente utilizada função getElementById não seria confiável. Aqueles acostumados com jQuery sabem o quão fácil é adicionar e remover classes de elementos de página. É uma função nativa no jQuery. Veja que tal função não existe para IDs. Não é responsabilidade do javascript manipular estes valores, porque ele causaria mais problemas que seria útil…

Se você não precisa deles, não os use

Como você pode ver, classes e IDs são muito importantes e nós os utilizamos todos os dias para estilizar páginas e manipular aquilo que é preciso. Entretanto, você deve usá-los com critério e semanticamente.

Isto significa evitar coisas do tipo:

<a href="http://css-tricks.com" class="link">CSS-Tricks.com</a>

Já sabemos: este elemento é um link, é um elemento âncora. Não há nada de especial aqui a ponto de ser preciso especificar uma classe, já que é possível aplicar o estilo na própria tag (“a”).

Evite este tipo de coisa, também:

<div id="coluna-direita">

O ID é corretamente utilizado aqui, já que, provavelmente, a página terá somente uma única coluna da direita, mas o nome é inadequado. Descreva o contexto do elemento, não onde está ou como se parece. Um ID “barra-lateral” seria melhor.

Microformatos são apenas nomes específicos de classes

Pensa que microformatos é difícil para você? Microformato é apenas marcação regular que faz uso de nomes de classes padronizados para a informação que contêm. Veja este vCard:

<div class="vcard">
  <a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
  <div class="adr">
    <span class="type">Work</span>:
    <div class="street-address">169 University Avenue</div>
    <span class="locality">Palo Alto</span>,
    <abbr class="region" title="California">CA</abbr>
    <span class="postal-code">94301</span>
    <div class="country-name">USA</div>
  </div>
  <div class="tel">
   <span class="type">Work</span> +1-650-289-4040
  </div>
  <div class="tel">
    <span class="type">Fax</span> +1-650-289-4041
  </div>
  <div>Email:
   <span class="email">info@commerce.net</span>
  </div>
</div>

Artigos Relacionados

• Elementos de design aplicados à web
• Wireframes para web: guia completo de desenvolvimento
• 10 erros básicos de web design
• 4 elementos de design para um bom call to action
• User Interface em dicas rápidas
• 10 dicas que desenvolvedores web iniciantes devem saber
• JSON – JavaScript Object Notation
• URLs longas apresentadas corretamente com CSS
• Novas tecnologias exigem novas maneiras de se comunicar
• Erros comuns em desenvolvimento web para campanhas de SEO