Tag textarea HTML

Tempo de leitura: 3 minutos

Tag textarea HTML: Quando a entrada de dados do usuário exige mais do que uma linha simples (como comentários, mensagens longas ou descrições), a tag <textarea> é a ferramenta ideal.

Ao contrário do elemento <input type="text">, que se limita a uma única linha, a <textarea> oferece um espaço redimensionável e multi-linha, tornando-a essencial para formulários completos e interativos.

Neste artigo, vamos explorar a tag <textarea>, seus atributos de controle e as melhores práticas para integrá-la ao seu formulário com foco em usabilidade e acessibilidade.

1. Estrutura e Atributos de Controle

A tag <textarea> possui uma estrutura de abertura e fechamento, e o texto padrão (se houver) deve ser colocado entre as tags.

Atributos Essenciais

Atributo	Função	Importância
`name`	Nome que identifica o dado para o servidor.	Crucial para o envio de formulário.
`id`	Identificador único.	Crucial para associar com a tag `<label>` (acessibilidade).
`rows`	Define o número inicial de linhas visíveis (altura).	Define a altura inicial da caixa.
`cols`	Define o número de caracteres visíveis em uma linha (largura).	Define a largura inicial da caixa.
`maxlength`	Define o número máximo de caracteres permitidos.	Validação nativa (UX).
`placeholder`	Texto de dica que aparece dentro da área e desaparece ao digitar.	UX: Indica ao usuário o que deve ser escrito.

Exemplo Básico:

HTML

<label for="msg">Sua Mensagem:</label>
<textarea id="msg" name="mensagem_contato" rows="6" cols="40" placeholder="Deixe sua mensagem ou feedback aqui."></textarea>

Sua Mensagem:

2. Conteúdo e Propriedades de Estado

Valor Padrão (Conteúdo Inicial)

Diferente do <input>, o valor inicial da <textarea> é definido no seu conteúdo, e não no atributo value.

HTML

<textarea name="comentario" rows="4">
Este é um texto padrão que o usuário pode editar.
</textarea>

Atributos de Estado e Interação

Atributo	Função
`required`	Torna o preenchimento obrigatório para o envio do formulário.
`disabled`	Impede totalmente a interação e o envio do dado.
`readonly`	Impede a edição, mas permite que o conteúdo seja lido e enviado.
`autofocus`	Coloca o cursor na `<textarea>` automaticamente ao carregar a página.
`wrap`	Controla a quebra de linha: `soft` (padrão) ou `hard` (insere quebras de linha reais no envio).

3. Acessibilidade e Estilo

A. A Regra de Ouro da Acessibilidade

É imperativo associar a <textarea> a um <label> usando o par for e id.

HTML

<label for="comentario">Seus Comentários Detalhados (Máx: 500 caracteres)</label>
<textarea id="comentario" name="comentarios" maxlength="500"></textarea>

Seus Comentários Detalhados (Máx: 500 caracteres)

B. Controle de Redimensionamento (CSS)

Por padrão, os navegadores permitem que o usuário redimensione a <textarea>. Você pode controlar isso usando a propriedade CSS resize:

resize: none; (Impede qualquer redimensionamento.)
resize: vertical; (Permite redimensionar apenas a altura.)
resize: horizontal; (Permite redimensionar apenas a largura.)

Exemplo de CSS (Opcional):

CSS

/* Impede o redimensionamento horizontal e vertical */
textarea {
  resize: none; 
}

✅ Conclusão Tag textarea HTML

A tag <textarea> é indispensável para coletar informações extensas. Ao configurar corretamente os atributos de tamanho (rows, cols) e de restrição (maxlength), e, mais importante, ao garantir a acessibilidade com a tag <label>, você cria um campo de entrada robusto, fácil de usar e que atende a todos os padrões modernos de desenvolvimento web.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: