Área de texto no documento HTML

Formulários / Tutorial HTML5

Como adicionar uma área de texto HTML?

Uma área de texto, representada pelo elemento <textarea>, é um campo de formulário que permite ao usuário inserir um texto de várias linhas. É utilizada quando se espera que o usuário forneça uma quantidade significativa de texto, como comentários, descrições ou mensagens.

Exemplo:

<textarea></textarea>

A principal diferença entre <input type="text"> e <textarea> é que o <input> é usado para uma única linha de texto, enquanto o <textarea> é usado para múltiplas linhas.

Como aumentar a quantidade de linhas da área de texto HTML?

Para aumentar a quantidade de linhas visíveis em uma área de texto, utilize o atributo rows.

Exemplo:

<textarea rows="10"></textarea>

Este código cria uma área de texto com 10 linhas visíveis.

Como aumentar a largura da área de texto HTML?

Para aumentar a largura da área de texto, utilize o atributo cols.

Exemplo:

<textarea cols="50"></textarea>

Este código cria uma área de texto com 50 colunas de largura.

Para tornar a área de texto mais responsiva, você pode usar CSS para definir a largura como 100%.

Exemplo:

<textarea style="width: 100%;"></textarea>

Como validar uma área de texto HTML?

Para validar uma área de texto, você pode usar atributos como required, minlength e maxlength.

Exemplo:

<textarea required minlength="10" maxlength="200"></textarea>

Este código cria uma área de texto que é obrigatória e deve conter entre 10 e 200 caracteres.

Você também pode usar o atributo pattern para validar o conteúdo da área de texto com uma expressão regular.

Exemplo:

<textarea pattern="[A-Za-z]{3,}"></textarea>

Este código cria uma área de texto que só aceita letras e deve ter pelo menos 3 caracteres.

Principais atributos do <textarea>:

  • rows: Define o número de linhas visíveis.
  • cols: Define o número de colunas visíveis.
  • placeholder: Texto exibido quando a área de texto está vazia.
  • required: Indica que o campo é obrigatório.
  • minlength: Define o número mínimo de caracteres.
  • maxlength: Define o número máximo de caracteres.
  • readonly: Torna a área de texto somente leitura.
  • disabled: Desabilita a área de texto.