Tag HTML <textarea>
A tag HTML <textarea> define um campo de formulário para entrada de texto de várias linhas, permitido ao enviar o formulário.
A tag <textarea> define um campo de formulário onde os utilizadores podem inserir texto de várias linhas. Ao contrário da tag <input>, a quebra de linha dentro de <textarea> é permitida quando o formulário é enviado.
Uma área de texto pode ter um número ilimitado de caracteres. O texto dentro desta tag é renderizado numa fonte proporcional por padrão.
O <textarea> é utilizado dentro da tag <form>.
Sintaxe
A tag <textarea> vem em pares. O conteúdo é escrito entre as tags de abertura (<textarea>) e de fechamento (</textarea>).
Um erro comum para iniciantes: um <textarea> não aceita um atributo value. O seu valor padrão vai entre as tags de abertura e de fechamento, ao contrário de um <input> de linha única, que usa value="…". Por exemplo, <textarea>Hello</textarea> mostra "Hello", enquanto <input value="Hello"> mostra "Hello" — mas <textarea value="Hello"></textarea> não mostra nada.
Exemplo da tag HTML <textarea>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post">
<textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea><br />
<input type="submit" name="submitInfo" value="Submit" />
</form>
</body>
</html>Resultado
Neste exemplo usamos o <textarea> para definir o campo de texto, o atributo name para atribuir um nome a este campo ("comment"), o atributo rows para definir a sua altura visível (12 linhas) e o atributo cols para definir a sua largura visível (35 caracteres).
Associar um label a um <textarea>
Cada campo de formulário deve ter um <label>. Conecte o label ao textarea atribuindo um id ao textarea e apontando o atributo for do label para esse mesmo valor. Isso permite que os leitores de ecrã anunciem o campo e que os utilizadores cliquem no texto do label para mover o foco para a área de texto — ambas são melhorias para acessibilidade e usabilidade.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post">
<label for="comment">Your comment:</label><br />
<textarea id="comment" name="comment" rows="6" cols="40"></textarea><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Limitar e sugerir a entrada
Use o atributo maxlength para limitar o número de caracteres que um utilizador pode digitar, e o atributo placeholder para mostrar uma dica curta dentro de um campo vazio. O placeholder desaparece assim que o utilizador começa a digitar — não é um valor padrão, por isso nunca é enviado com o formulário.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post">
<label for="bio">Short bio (max 100 characters):</label><br />
<textarea id="bio" name="bio" rows="4" cols="40" maxlength="100"
placeholder="Tell us a little about yourself..."></textarea><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Estilizar o elemento <textarea> com CSS
A tag <textarea> é considerada um elemento substituído, pois tem algumas dimensões intrínsecas. Estilizar esta tag é relativamente fácil com CSS regular.
Os seus valores válidos e inválidos podem ser destacados com as pseudo-classes :valid e :invalid.
Na maioria dos navegadores, o <textarea> é redimensionável graças à propriedade CSS resize. O redimensionamento está ativado por padrão. Pode desativá-lo definindo o valor de resize como none.
Exemplo da tag HTML <textarea> com propriedades CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.comment {
width: 60%;
height: 100px;
padding: 10px;
outline: 0;
border: 3px solid #1c87c9;
background: #d0e2bc;
line-height: 20px;
}
</style>
</head>
<body>
<form>
<p>Here we use CSS styles to customize the look of the text field.</p>
<textarea class="comment"> Send your comments to the author.</textarea>
<br />
<input type="submit" name="submitInfo" value="Submit" />
</form>
</body>
</html>Neste exemplo usamos estilos CSS para personalizar a aparência do campo de texto.
Controlar o redimensionamento com a propriedade resize
Por padrão, a maioria dos navegadores adiciona uma alça de arrastar no canto de um <textarea> para que os utilizadores possam redimensioná-lo em ambas as direções. Pode controlar isso com a propriedade CSS resize:
resize: none;— desativa o redimensionamento completamente.resize: vertical;— permite redimensionar apenas a altura.resize: horizontal;— permite redimensionar apenas a largura.resize: both;— o padrão, permite redimensionar em ambas as direções.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
textarea {
width: 60%;
padding: 8px;
}
.no-resize {
resize: none;
}
.vertical-only {
resize: vertical;
}
.horizontal-only {
resize: horizontal;
}
</style>
</head>
<body>
<p>Not resizable:</p>
<textarea class="no-resize" rows="3"></textarea>
<p>Resizable vertically only:</p>
<textarea class="vertical-only" rows="3"></textarea>
<p>Resizable horizontally only:</p>
<textarea class="horizontal-only" rows="3"></textarea>
</body>
</html>Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| autocomplete | on, off | Especifica se um campo de texto deve ter o preenchimento automático ativado. |
| autofocus | autofocus | Define que uma área de texto deve receber foco automaticamente quando a página carrega. |
| cols | number | Define a largura visível de uma área de texto. O valor padrão é 20 caracteres. |
| dirname | dirname | Especifica o nome de um controlo de formulário oculto que conterá a direção do texto da textarea ao ser enviado. |
| disabled | disabled | Define que uma área de texto deve estar desativada. |
| form | form_id | Define um ou mais formulários aos quais a área de texto pertence (via id). |
| maxlength | number | Define o número máximo de caracteres permitidos na área de texto. |
| minlength | number | Define o número mínimo de caracteres permitidos na área de texto. |
| name | text | Define um nome para uma área de texto. |
| placeholder | text | Define uma dica curta que descreve o valor esperado de uma área de texto. A dica é mostrada quando o campo está vazio e desaparece quando recebe foco. |
| readonly | readonly | Define que uma área de texto é somente leitura. |
| required | required | Define que uma área de texto deve ser preenchida antes de o formulário ser enviado. |
| rows | number | Define o número visível de linhas de uma área de texto. O padrão depende do navegador (normalmente 2). |
| spellcheck | true, false, default | Especifica se o texto na tag <textarea> deve ser verificado ortograficamente pelo navegador/SO subjacente. |
| wrap | soft, hard | Define como o texto numa área de texto deve ser encapsulado ao enviar o formulário. soft (padrão): o texto é enviado sem quebras de linha adicionais. hard: o navegador insere quebras de linha com base na largura (requer cols). |
A tag <textarea> também suporta os Atributos Globais e os Atributos de Evento.
Tags relacionadas
<input>— controlos de formulário de linha única e especializados.<form>— o contentor que agrupa e envia campos de formulário.<label>— etiquetas que tornam os campos de formulário acessíveis.