Docs executáveis de HTML: Textarea

Q: Como criar uma textarea no HTML?

Escreva dentro de um formulário, com um . Ao contrário do , ela tem tag de fechamento, e tudo o que fica entre as tags é o texto inicial.

Q: Como definir o valor padrão de uma textarea?

Coloque o texto entre as tags: Hello . Uma textarea não tem atributo value no HTML. No JavaScript, leia e defina textarea.value.

Q: Como impedir que uma textarea seja redimensionada?

Defina resize: none no CSS. resize: vertical costuma ser mais amigável: o usuário ainda consegue deixá-la mais alta para textos longos, mas não quebra o seu layout arrastando para os lados.

Q: Como limitar o número de caracteres de uma textarea?

Adicione maxlength="280". O navegador para de aceitar texto nesse tamanho. Mostre um contador ao lado, atualizado no evento input, para o usuário saber quanto espaço ainda tem, e verifique o tamanho no servidor também.

Como fazer uma textarea

<textarea> é um campo de texto para mais de uma linha: mensagens, comentários, descrições. rows define a altura visível em linhas. Digite algumas linhas e aperte Send:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Textarea</title>
</head>
<body>
  <form>
    <label for="msg">Message</label><br>
    <textarea id="msg" name="message" rows="4" cols="40" placeholder="What would you like to ask?"></textarea>
    <br>
    <button type="submit">Send</button>
  </form>
</body>
</html>

Duas coisas são diferentes do <input>: uma textarea precisa de tag de fechamento, e o seu texto inicial fica entre as tags em vez de num atributo value. O seu name é enviado com o texto como valor, quebras de linha incluídas.

Atributos da textarea

Atributo	Faz
`name`	A chave com que o texto é enviado
`rows`	Altura visível em linhas (padrão 2)
`cols`	Largura visível em caracteres (padrão 20); `width` no CSS costuma ser melhor
`placeholder`	Uma dica mostrada enquanto está vazia
`maxlength`, `minlength`	Limites de tamanho em caracteres
`required`	Não pode ficar vazia
`readonly`	Pode ser selecionada e copiada, não editada; ainda é enviada
`disabled`	Não pode ser usada; não é enviada
`wrap`	`soft` (padrão) ou `hard`, veja abaixo
`spellcheck`	`true` ou `false`

O texto padrão vai entre as tags

Tudo o que fica entre <textarea> e </textarea> é o texto inicial, exatamente como está escrito: espaços, tabs e quebras de linha incluídos. Só uma quebra de linha logo depois da tag de abertura é ignorada. Isso transforma a indentação numa armadilha:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Default text</title>
  <style>
    textarea { display: block; margin-bottom: 12px; font: inherit; }
  </style>
</head>
<body>
  <textarea rows="2">Hello, this is the default text.</textarea>

  <textarea rows="3">
    Indented to match the HTML
  </textarea>

  <p id="out"></p>
  <script>
    const [a, b] = document.querySelectorAll('textarea');
    document.querySelector('#out').textContent =
      'Lengths: ' + a.value.length + ' and ' + b.value.length +
      ' (the second adds 4 leading spaces, a line break and 2 more spaces)';
  </script>
</body>
</html>

A segunda textarea começa com quatro espaços e termina com uma quebra de linha e mais dois espaços, e o usuário precisa apagar tudo isso. Escreva o texto padrão encostado nas tags.

HTML dentro de uma textarea não é renderizado; <b>hi</b> entre as tags aparece como esse texto literal.

Largura, redimensionamento e altura automática

Os navegadores deixam o usuário arrastar o canto para redimensionar uma textarea. O CSS resize limita isso, e width: 100% com box-sizing: border-box faz ela preencher o contêiner exatamente:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Resize</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin: 4px 0 14px;
      padding: 8px;
      font: inherit;
      border: 2px solid #9ca3af;
      border-radius: 8px;
    }
    .vertical { resize: vertical; min-height: 60px; }
    .none { resize: none; }
    .grow { resize: none; overflow: hidden; }
  </style>
</head>
<body>
  <label>resize: vertical <textarea class="vertical" rows="2"></textarea></label>
  <label>resize: none <textarea class="none" rows="2"></textarea></label>
  <label>grows as you type <textarea class="grow" rows="2" id="grow"></textarea></label>

  <script>
    const grow = document.querySelector('#grow');
    grow.addEventListener('input', () => {
      grow.style.height = 'auto';
      const border = grow.offsetHeight - grow.clientHeight;
      grow.style.height = grow.scrollHeight + border + 'px';
    });
  </script>
</body>
</html>

A última zera a altura e depois a define como scrollHeight (a altura do conteúdo e do padding) mais as bordas, a cada tecla. Digite várias linhas nela: ela nunca mostra barra de rolagem. resize: vertical é o padrão mais amigável: respostas longas ganham espaço, e ninguém consegue arrastar o campo para além da largura do layout.

Navegadores Chromium conseguem fazer a altura automática só com CSS usando field-sizing: content. Navegadores sem suporte ignoram a linha e mantêm o tamanho normal, então é seguro adicionar, mas mantenha o script se todo usuário deve ter a caixa que cresce.

maxlength e um contador de caracteres

maxlength para a digitação num número de caracteres. Sozinho ele não dá nenhum aviso, então o usuário só percebe quando a digitação para de funcionar. Um contador resolve isso:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Character counter</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; padding: 8px; }
    .count { font-size: 14px; color: #4b5563; }
    .count.near { color: #b45309; font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <label for="bio">Short bio</label>
    <textarea id="bio" name="bio" rows="3" maxlength="100" aria-describedby="bio-count"></textarea>
    <p class="count" id="bio-count" aria-live="polite">100 characters left</p>
    <button type="submit">Save</button>
  </form>

  <script>
    const bio = document.querySelector('#bio');
    const count = document.querySelector('#bio-count');
    bio.addEventListener('input', () => {
      const left = bio.maxLength - bio.value.length;
      count.textContent = left + ' characters left';
      count.classList.toggle('near', left <= 20);
    });
  </script>
</body>
</html>

aria-describedby faz os leitores de tela lerem o contador junto com o campo, e aria-live="polite" anuncia as mudanças nele entre as teclas. maxlength só é garantido pelo navegador, então o servidor também precisa verificar o tamanho.

Quebras de linha no texto enviado

As quebras de linha do usuário são enviadas com o texto. Nos dados enviados, cada uma vira um par de retorno de carro e avanço de linha (%0D%0A num formulário codificado para URL), que é o que a maioria dos servidores espera. Para mostrar o texto numa página depois com as quebras de linha, converta-as em <br> na saída ou estilize o elemento com white-space: pre-line.

wrap="hard" (que precisa de cols) vai além: ele também insere quebras de linha onde o texto quebrou visualmente, então o servidor recebe linhas com no máximo cols caracteres. O padrão, wrap="soft", envia só as quebras que o usuário digitou.

Estilizando uma textarea

Chrome e Firefox dão às textareas uma fonte monoespaçada com cerca de 13px, e é por isso que uma textarea muitas vezes parece fora do lugar. font: inherit resolve. Mantenha um estilo de foco visível se você mudar a borda:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled textarea</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; }
    textarea { display: block; margin: 4px 0 12px; }
    .styled {
      font: inherit;
      padding: 10px 12px;
      border: 1px solid #9ca3af;
      border-radius: 8px;
      resize: vertical;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }
    .styled::placeholder { color: #6b7280; }
  </style>
</head>
<body>
  <label>Browser default <textarea rows="2">Monospace, small</textarea></label>
  <label>Styled <textarea class="styled" rows="2">Same font as the page</textarea></label>
</body>
</html>

O texto do placeholder deve ter um contraste legível; o cinza claro que muitos designs usam é difícil de ler. E, como em todo campo, o placeholder não é um label: ele some assim que o usuário digita. Os labels estão em label no HTML.

Erros comuns

<textarea value="...">. Não existe atributo value; coloque o texto entre as tags.
Indentar o texto padrão junto com o HTML. Os espaços viram parte do valor.
Uma <textarea /> auto fechada. Não é um elemento vazio; sem </textarea>, o resto da página é engolido por ela como texto.
Nenhum font: inherit, então o campo usa uma fonte monoespaçada pequena.
resize: none com uma altura fixa pequena. Respostas longas acabam numa caixinha com rolagem.
Contar só com maxlength. Valide o tamanho no servidor também.

Perguntas frequentes

Como criar uma textarea no HTML?

Escreva <textarea name="message" rows="4"></textarea> dentro de um formulário, com um <label>. Ao contrário do <input>, ela tem tag de fechamento, e tudo o que fica entre as tags é o texto inicial.

Como definir o valor padrão de uma textarea?

Coloque o texto entre as tags: <textarea name="bio">Hello</textarea>. Uma textarea não tem atributo value no HTML. No JavaScript, leia e defina textarea.value.

Como impedir que uma textarea seja redimensionada?

Defina resize: none no CSS. resize: vertical costuma ser mais amigável: o usuário ainda consegue deixá-la mais alta para textos longos, mas não quebra o seu layout arrastando para os lados.

Como limitar o número de caracteres de uma textarea?

Adicione maxlength="280". O navegador para de aceitar texto nesse tamanho. Mostre um contador ao lado, atualizado no evento input, para o usuário saber quanto espaço ainda tem, e verifique o tamanho no servidor também.

Por que minha textarea usa uma fonte diferente?

Chrome e Firefox dão às textareas uma fonte monoespaçada com cerca de 13px por padrão. Adicione font: inherit para que ela combine com o resto da página.

Conceitos relacionados