Área de texto livre: textarea

Até agora, vimos campos de entrada de texto de uma única linha (input type="text"). Mas e se o usuário precisar digitar um texto mais longo, como um comentário, uma mensagem ou uma descrição detalhada? Para isso, o HTML oferece a tag <textarea>.

A tag <textarea> cria uma área de texto multilinha onde o usuário pode digitar um volume maior de informações.

A tag <textarea>: o campo de texto multilinha

Diferente da tag <input>, que é uma tag vazia (não tem tag de fechamento), <textarea> é uma tag de contêiner e possui uma tag de fechamento (</textarea>). O texto que você coloca entre as tags de abertura e fechamento será o valor inicial do campo.

Atributos importantes de <textarea>:

• id: Identificador único para o campo (importante para o label).
• name: Nome do campo que será enviado ao servidor.
• rows: Define o número de linhas visíveis do campo.
• cols: Define o número de colunas (largura) visíveis do campo. (Ambos rows e cols são sugestões visuais e podem ser sobrescritos por CSS).
• placeholder: Um texto de dica que aparece no campo antes do usuário digitar.
• required: Torna o campo obrigatório.
• minlength: Define o número mínimo de caracteres que o usuário deve digitar.
• maxlength: Define o número máximo de caracteres que o usuário pode digitar.
• disabled: Desabilita o campo.
• readonly: Torna o campo somente leitura.

Exemplo básico de <textarea>:

<form>
  <label for="mensagem">Sua Mensagem:</label><br>
  <textarea id="mensagem" name="texto_mensagem" rows="5" cols="40" placeholder="Digite sua mensagem aqui..." required></textarea>
</form>

rows e cols: controlando o tamanho visual

Os atributos rows e cols são usados para definir o tamanho inicial da área de texto.

• rows: O número de linhas de texto visíveis.
• cols: O número de caracteres (aproximadamente) visíveis por linha.

Importante: Estes atributos definem o tamanho inicial do campo. O usuário ainda pode redimensionar o <textarea> (se o navegador permitir) e o conteúdo pode ter mais linhas e colunas do que o definido. Para um controle mais preciso do tamanho e do redimensionamento, usa-se CSS.

minlength e maxlength: controlando o comprimento do texto

Estes atributos são muito úteis para validação nativa do formulário:

• minlength: O navegador exigirá que o usuário digite pelo menos este número de caracteres.
• maxlength: O navegador impedirá que o usuário digite mais do que este número de caracteres.

Exemplo com minlength e maxlength:

<form>
  <label for="comentario">Deixe seu comentário (mín. 10, máx. 200 caracteres):</label><br>
  <textarea id="comentario" name="texto_comentario" rows="7" cols="50"
            minlength="10" maxlength="200" required
            placeholder="Seu comentário aqui..."></textarea>
</form>

O valor inicial de <textarea>

Ao contrário do <input>, onde o valor inicial é definido pelo atributo value, em <textarea> o valor inicial é o texto que está entre as tags de abertura e fechamento.

<form>
  <label for="descricao">Descrição do Produto:</label><br>
  <textarea id="descricao" name="produto_descricao" rows="6" cols="50">
Este é um produto excelente e de alta qualidade.
Perfeito para suas necessidades diárias.
  </textarea>
</form>

Cuidado: Qualquer espaço ou quebra de linha antes do texto inicial dentro das tags <textarea> será considerado parte do valor inicial.

Conectando label e <textarea>

Assim como nos campos <input> e <select>, é essencial conectar cada <label> ao seu <textarea> correspondente usando os atributos for e id para melhorar a acessibilidade.

<label for="feedback">Seu Feedback:</label>
<textarea id="feedback" name="feedback_usuario"></textarea>

Resumindo

• A tag <textarea> cria uma área de texto multilinha.
• É uma tag de contêiner (<textarea>...</textarea>).
• rows e cols: Definem o tamanho visual inicial (sugestões).
• placeholder: Texto de dica.
• required: Torna o campo obrigatório.
• minlength e maxlength: Controlam o número mínimo e máximo de caracteres.
• O valor inicial é o texto entre as tags de abertura e fechamento.
• Sempre conecte o <label> ao <textarea> usando for e id para acessibilidade.