HTML textarea: texto multilinha, limite, readonly e valores enviados

Referência de HTML

Criado em 2026-10-30 Última atualização 2026-10-30

O HTML textarea aceita várias linhas de texto simples. Coloque o conteúdo inicial entre suas tags de abertura e fechamento, use rows/cols para tamanho de exibição, e minlength/maxlength para comprimento da entrada. Defina name para submeter o valor com um formulário.

Tamanho de exibição, conteúdo inicial e limites de entrada

textarea precisa de uma tag de fechamento. Diferentemente do input, ele não utiliza um atributo value do HTML para o valor inicial. Quebras de linha e espaços entre suas tags afetam o conteúdo, então verifique se a identação da formatação não introduz entradas indesejadas.

Atributo	Função e limitações
`rows`, `cols`	Defina a contagem de linhas visíveis e a largura medida em larguras médias de caracteres usando inteiros positivos. Eles não limitam o número de linhas ou caracteres de entrada; a largura e altura do CSS também afetam a exibição.
`placeholder`	Uma dica exibida quando o valor está vazio. Não é enviada como o valor real e desaparece ao digitar, portanto, não substitui um rótulo separado.
`required`	Bloqueia o envio normal do formulário quando está vazio. Não decide se texto com apenas espaços em branco é significativo.
`minlength`, `maxlength`	Limita o comprimento mínimo e máximo dos valores inseridos pelo usuário em unidades de código UTF-16. Um emoji pode usar duas ou mais unidades. Somente um mínimo permite um valor vazio; combine-o com required para entrada obrigatória.
`readonly`	Evita a edição pelo usuário, mas permite foco e cópia. Com um nome, permanece incluído nos dados do formulário.
`disabled`	Desativa o controle e o exclui dos dados do formulário e da validação de restrições.

Execute um exemplo completo de entrada multilinha

Salve este código completo como textarea.html e abra-o em um navegador. Nenhum servidor ou biblioteca extra é necessário. O botão de envio mostra os nomes/valores do navegador em vez de enviá-los.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Entrada textarea e valores enviados</title>
  <style>
    body { font-family: sans-serif; margin: 24px; }
    label, textarea { display: block; }
    textarea { max-width: 100%; box-sizing: border-box; margin: 8px 0 20px; resize: vertical; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Escrever uma consulta</h1>
  <form id="demo">
    <label for="message">Mensagem (5–200 unidades de código)</label>
    <textarea id="message" name="message" rows="4" cols="32"
      minlength="5" maxlength="200" required
      placeholder="Descreva o problema e o resultado desejado.">Esta é a primeira linha.
Esta é a segunda linha.</textarea>
    <label for="reference">Orientação somente leitura</label>
    <textarea id="reference" name="reference" rows="2" readonly>Inclua o número do pedido.</textarea>
    <label for="locked">Campo desativado</label>
    <textarea id="locked" name="locked" rows="2" disabled>Este valor é excluído do envio.</textarea>
    <button type="submit">Mostrar valores enviados</button>
    <button type="reset">Redefinir</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const result = document.querySelector('#result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

Envie o formulário inicial: message e reference aparecem. O JSON \n indica uma quebra de linha no valor; locked é omitido.
Limpe a mensagem e envie: a validação obrigatória bloqueia o envio. Em seguida, digite diretamente dois ou três caracteres comuns e envie para verificar a validação de comprimento mínimo.
Digite <b>Practice</b> como mensagem e envie. Como a entrada e a saída são texto, o resultado mostra texto em forma de tag em vez de texto em negrito.
O reset restaura a mensagem original de duas linhas e limpa o resultado. O reset retorna aos padrões do HTML em vez de deixar o valor vazio.

A validação nativa do navegador auxilia na entrada do usuário e no envio normal de formulários. As mesmas verificações não são garantidas para valores atribuídos por script, portanto, aplicações reais devem validar também no servidor os valores obrigatórios, comprimentos permitidos e formatos.

Diferencie a quebra visual de linhas das quebras de linha reais

A quebra visual causada pela largura do campo é diferente de uma quebra inserida com Enter. O wrap="soft" padrão não adiciona quebras de linha enviadas apenas porque o texto se quebra visualmente. O wrap="hard" adiciona quebras de linha enviadas de acordo com a largura de coluna especificada e requer cols. Para se ajustar a uma tela estreita, comece com a quebra de linha padrão e a largura CSS.

O max-width: 100% do exemplo ajuda a manter o campo dentro de seu elemento pai em telas estreitas, enquanto o resize: vertical permite que os usuários alterem sua altura. A largura em pixels do cols="32" depende da fonte, das larguras dos caracteres e do navegador, então não assuma que exatamente 32 caracteres cabem em uma linha.

Leia os valores em JavaScript e valide-os no servidor

Leia a entrada atual através de textarea.value e a padrão através de textarea.defaultValue. Para ler edições do usuário, use value em vez de textContent da tag. O exemplo escreve os resultados para textContent para que a entrada não seja executada como HTML.

readonly e disabled não são controles de segurança. Os usuários podem alterar valores através das ferramentas de desenvolvedor ou solicitações separadas, então verifique números de pedido inalteráveis ou dados de permissão contra dados confiáveis do servidor. Se o servidor contar bytes ou outra unidade de caracteres, verifique se seu limite usa a mesma medida que o maxlength do navegador.

A referência do textarea referência de textarea na MDN explica os atributos e restrições.

Referência de HTML