Nível: iniciante
Como o próprio nome já diz, textarea é uma área de texto. Essa tag é utilizada principalmente em formulários e para colocar algum código que deve ser exibido tal qual como digitado.
Inserindo textarea
Coloque o seguinte código:
<textarea> Este código deve mostrar as tags <body>, </body>, <blockquote> e </blockquote> exatamente como digitadas.</textarea>
Na visualização deve ficar parecido com isso:
Atributos opcionais
cols e rows
Para definir o tamanho da área de texto direto na tag, basta acrescentar cols para colunas e rows para linhas. Exemplo:
<textarea cols='20' rows='1'>Exemplo de área de texto com tamanho definido na tag.</textarea>
Resultado:
readonly
Quando usar readonly (somente leitura) o visitante não conseguirá digitar nada além do que está escrito, também não conseguirá apagar. Atributo muito útil quando usar textarea para disponibilizar códigos prontos.
|
<textarea readonly>Exemplo de área de texto somente leitura.</textarea>
|
|
disabled
Na área de texto disabled (desabilitada), não é possível nem mesmo copiar o que está escrito.
|
<textarea readonly>Exemplo de área de texto desabilitada.</textarea>
|
|
Alguns outros atributos mais utilizados em formulários:
- accesskey - define um atalho de teclado para o campo textarea.
- name - define um nome para o campo que o identificará em scripts.
- tabindex - em formulários com vários campos textarea, define qual é o primeiro. <textarea tabindex>Exemplo…</textarea>
textarea na folha de estilos
Nível: intermediário
Segue um exemplo de como editar textarea na folha de estilos para que a área de texto tenha sempre as mesmas cores, fonte e tamanho.
textarea {background:#f0fff0;
border:green 2px solid;
font-family:courier new;
font-size:11px;
width:200px;
height:50px;}
textarea:focus {background:#fffff0;
border:gold 2px solid;}
]]></b:skin>
Fonte: HTML Dog.
Imagem encontrada no blog Deep PC.
