Grandes Caixas de Texto - A tag < textarea >

Neste tutorial de HTML iremos ensinar a criar mais alguns importantes campos que geralmente compõem um formulário feito em HTML, que são as grandes áreas de texto.

Veremos, em detalhes este tipo de campo, para que serve, como usá-lo, os códigos de sintaxe e seus atributos mais importantes.

• Estudar pela Apostila HTML Progressivo

A tag <textarea>: Caixa para Grande Área de Texto

Em um tutorial anterior, falamos e mostramos como criar caixas de texto para formulários em HTML, que são muito comuns, principalmente para pedir nome, login, e-mail e outras informações, geralmente curtas, para o usuário.

Vamos agora mostrar outra maneira de criar caixas de texto, porém outro tipo, para uso de grandes espaços de texto, através do uso da tag <textarea> (área de texto, em inglês).

O uso deste de campos em formulários é bem comum quando temos que pedir uma informação mais longa para o usuário, como "Informações adicionais", "Qual sua opinião sobre este site", "Sugestões" etc.

O uso da tag é bem simples, sem segredo.
O seguinte código:

<textarea></textarea>

Produz a seguinte caixa de texto:



E como um bom costume, que o Curso HTML Progressivo sempre preza e indica, use o atributo name para dar um nome específico para este tipo de campo, pois seu formulário pode ter diversos campos e nomear vai ajudar na hora de usar a programação para tratar as informações de um formulário:

<textarea name="comentarios"></textarea>

Os atributos cols, rows e maxlength: Definindo o tamanho da <textarea>

Note que não especificamos nenhum tamanho para a caixa de texto, e no canto inferior direito até aparece uma opção para você redimensionar a área de texto da maneira que quiser, inclusive influenciando na localização de outros campos do formulário do site que você está criando.

Mas ora, você é o webmaster, então você é o mestre, você que manda, então você pode decidir que tamanho visível terá essa caixa de texto.
E fará isso usando o atributo cols (de columns, colunas em inglês) e rows (linhas ou filas, em inglês), que definirão o número visível de colunas (cada coluna é do tamanho de um caractere) e linhas.

E para limitar o número máximo de caracteres que pode ser inserido pelo usuário, uso o nosso velho e conhecido atributo maxlength.

Basta você dar um valor numérico para estes atributos da tag <textarea>.
Por exemplo, para criar uma área de texto que exiba 10 linhas e 40 colunas, onde o máximo de caracteres possíveis de inserir é 500, usamos o seguinte código HTML:

<textarea rows="10" cols="40" maxlength="500"></textarea>

Que irá produzir a seguinte caixa de texto:

Os atributos disabled e readonly: Caixa de Texto só para leitura

Geralmente vemos algumas dessas grandes áreas de texto com algo já escrito.
Para fazer isso, basta colocar seu texto entre as tags <textarea></textarea>, que o que você colocar irá aparecer. Inclusive se você fizer

<textarea>
</textarea>
a caixa de texto vai exibir uma quebra de linha.

Por exemplo, o seguinte código:

<textarea cols="40">Escreva aqui seus comentários sobre nosso curso de HTML & CSS</textarea>

Produz a seguinte caixa de texto, já com algo escrito:

Escreva aqui seus comentários sobre nosso curso de HTML & CSS

Este tipo de uso é bastante comum de ser visto quando você está preenchendo um formulário e vê lá um "Termos e Condições de Uso" gigante para ler e depois marcar um checkbox "Li e Concordo com os Termos", embora você nunca tenha lido que eu sei :)

Aquelas caixas de texto só tem uma coisa diferente destas que vimos: não é possível escrever ou editar nelas.
Para fazer isso é simples, basta colocar o atributo readonly (somente leitura, em inglês). Este atributo é diferente, ele não precisa de um valor, só colocar readonly dentro da tag textarea que não será mais possível editar o texto.

Por exemplo, o seguinte código HTML:

<textarea rows="1" cols="40" readonly>Escreva algo aqui e ganhe mil reais...
HAAAA pegadinha do malandro!</textarea>

Fará o seguinte efeito:

Escreva algo aqui e ganhe mil reais... HAAAA pegadinha do malandro!

Você pode inclusive desabilitar a área de texto, usando o atributo disabled, ao invés de readonly.
O resultado do uso do atributo disabled é o seguinte:

Escreva algo aqui e ganhe mil reais... HAAAA pegadinha do malandro!