⇐ Clique aqui para expandir o post. ⇒

terça-feira, dezembro 16, 2008

Usando textarea

Nível: iniciante
Teclado sujo

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.

Pix meutedio arroba mail ponto com

5 comentários:

  1. vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

    ResponderExcluir
  2. muito boa essa dica Helem alias todas suas dicas são exelentes brigadão¨¨O¨¨¨¨O¨¨

    ResponderExcluir
  3. Socorro querida amiga. Eu estou a tentar à horas colocar uma placa link-me no meu blog só que não consigo customizar as dimensões da mesma.
    Ela fica sempre enorme por muito que altere os valores em cols e em rows.
    Podes ajudar-me? Ou tentar?
    O blog em causa é o AJISMAIS.

    ResponderExcluir
  4. Valeu! Sua postagem me ajudou. :D

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.