HTML - Áreas de Texto (Textareas)

Áreas de texto desse estilo são comuns em comentários, blogs, memorandos ou qualquer outro propósito que precise de um espaço expressivo.

Para cirar uma área de texto iremos abrir e deixar a tag desta maneira:

html<textarea>Área de texto!</textarea>

Demo

Textarea - Área de texto size

Para mudar o tamanho padrão da área de texto usaremos colunas e linhas, que terão valores numericos. Quanto maior o valor, maior a área de texto.

html<textarea cols="50" rows="2">Área de texto!</textarea>

<textarea cols="40" rows="5">Área de texto!</textarea>

<textarea cols="20" rows="10">Área de texto!</textarea>

Demo

Textarea - O atributo wrap

O atributo da tag <textarea> estabelecerá o jeito que o texto reagirá quando encontrar o fim da linha.

Wrap terá um dos três valores: hard, soft, off.

• Hard wrap - colocará um enter no final de cada linha e enviará o texto no mesmo formato que foi introduzido.
• Soft wrap - colocará um enter no final de cada linha, mas diferente de Hard , enviará o texto em um formato livre.
• Off wrap - não colocará o texto em nenhum fomato, permitindo o texto em uma única e continua linha.

O atributo Hard/Soft

html<textarea cols="20" rows="5" wrap="hard">Hard - colocará um enter no final de cada linha e enviará o texto no mesmo formato que foi introduzido.</textarea>

Demo

O atributo off

html<textarea cols="20" rows="5" wrap="off">Off - não colocará o texto em nenhum fomato, permitindo o texto em uma única e continua linha.</textarea>

Demo

Textarea - O atributo readonly

Dependendo do valor desse atributo o usuário poderá (ou não) mudar o conteúdo da área de texto. O atributo readonly pode ter o valor 'yes' ou 'no'.

html<textarea cols="20" rows="5" wrap="hard" readonly="yes">Como você pode ver, esse texto não pode ser modificado. No caso em que o valor 'no' for escolhido, o resultao oposto será obtido.</textarea>

Demo

Como você pode ver, esse texto não pode ser modificado. No caso em que o valor 'no' for escolhido, o resultao oposto será obtido. Apesar de não poder ser modificado, pode ser destacado e copiado com CTRL-C ou em copiar/colar.

Textarea - O atributo disabled

O atributo disabled não é muito diferente de readonly. O texto será mostrado em cinza, desabilitando na mesma hora a possibilidade de modificação do texto contido na área de texto.

html<textarea cols="20" rows="5" wrap="hard" disabled="yes">O atributo disabled não é muito diferente de readonly. O texto será mostrado em cinza, desabilitando na mesma hora a possibilidade de modificação do texto contido na área de texto.</textarea>

Demo

Você terá que praticar um pouco com esses atributos para melhorar. Boa sorte!