Artigos HTML e CSS HTML Textarea: criando caixas de texto no HTML

<textarea>

Nesta documentação de HTML vamos falar sobre a tag <textarea> e aprender como utilizá-la na construção de caixas de texto dentro de uma página.

Através da caixa de texto podemos permitir ao usuário digitar textos maiores, como uma mensagem em um formulário de contato, por exemplo.

<textarea>: na prática

Veja a seguir um exemplo de como uma textarea é utilizada na prática:

<textarea>: atributos

A tag <textarea> possui diversos atributos que podem ser utilizados para modificar alguns aspectos do seu funcionamento. Vamos conhecer neste artigos os principais:

name

O atributo name é essencial quando vamos utilizar a textarea dentro de um formulário, pois é através dele que o valor será recebido no back-end.


  <form>
      <textarea name="mensagem"></textarea>
  </form>

Placeholder

O atributo placeholder permite ao desenvolvedor exibir uma mensagem padrão na caixa de texto até que o usuário digite alguma coisa. Veja um exemplo de placeholder:

Minlength

O atributo minlength define a quantidade mínima de caracteres que deve ser digitado pelo usuário na caixa de texto.

Veja que ao tentar enviar a caixa de texto com menos de 20 caracteres uma mensagem é exibida, informando que a quantidade mínima de caracteres não foi atingida.

Maxlength

O atributo maxlength define a quantidade máxima de caracteres que pode ser digitado pelo usuário na caixa de texto.

Veja que não é possível digitar mais do que 50 caracteres, a própria textarea impede a digitação além do maxlength.

Rows

O atributo rows define quantas linhas a textarea exibirá por vez, sem que seja necessário usar uma barra de rolagem. Por exemplo, se quisermos que a textarea mostre cinco linhas simultaneamente, definimos rows=5. Veja o exemplo:

Perceba que a textarea mostra exatamente cinco linhas por vez, mesmo quando rolamos a caixa de texto.

Cols

O atributo cols define quantas colunas a textarea terá. Por exemplo, se quisermos que a textarea tenha 25 colunas, definimos cols=25. Veja o exemplo:

Perceba que quando o texto alcança o número de colunas definidas a textarea cria uma quebra de linha automaticamente. Desse modo, todo texto ocupará no máximo 25 colunas por linha.

Exemplo prático de textarea

Abaixo você pode conferir um exemplo prático de uso de textarea. No exemplo temos uma página que permite ao usuário enviar sugestões através de uma caixa de texto: