Oelemento HTML<textarea> representa um controle de edição para uma caixa de texto, útil quando você quer permitir ao usuário informar um texto extenso em formato livre, como um comentário ou formulário de retorno.

Experimente

<label for="story">Tell us your story:</label><textarea name="story" rows="5" cols="33">It was a dark and stormy night...</textarea>

label,textarea {  font-size: 0.8rem;  letter-spacing: 1px;}textarea {  padding: 10px;  max-width: 100%;  line-height: 1.5;  border-radius: 5px;  border: 1px solid #ccc;  box-shadow: 1px 1px 1px #999;}label {  display: block;  margin-bottom: 10px;}

Os exemplos acima demonstram vários recursos do<textarea>. O primeiro exemplo mostra o uso mais simples, com apenas umid atributo para permitir que o<textarea> estar associado a um<label> elemento para fins de acessibilidade e umname atributo para definir o nome do ponto de dados associado enviado ao servidor quando o formulário é enviado.

O segundo exemplo mostra alguns recursos mais complexos:

• Orows ecols atributos permitem especificar um tamanho exato para o<textarea> pegar. Definir isso é uma boa idéia para manter a consistência, pois os padrões do navegador podem ser diferentes.
• maxlength especifica um número máximo de caracteres que o<textarea> tem permissão para conter. Você também pode definir um comprimento mínimo considerado válido usando ominlength atributo e especifique que o<textarea> não enviará (e é inválido) se estiver vazio, usando orequired atributo. Isso fornece o<textarea> com validação simples, que é mais básica que os outros elementos do formulário (por exemplo, você não pode fornecer regexs específicas para validar o valor usando o métodopattern atributo, como você pode com o<input> elemento).
• wrap especifica o comportamento de quebra automática do texto quando ele atinge a borda do<textarea>.
• Se você deseja conteúdo padrão para o seu<textarea>, você o insere entre as tags de abertura e fechamento.<textarea> não suporta ovalue atributo.

O<textarea> O elemento também aceita vários atributos comuns para formar<input>s, tal comoautocomplete,autofocus,disabled,placeholder,readonly, erequired.

Atributos

Este elemento inclui os atributos globais.

autocapitalizeNão padrão

Este é um atributo não padrão suportado pelo WebKit no iOS (portanto, quase todos os navegadores executados no iOS, incluindo Safari, Firefox e Chrome), que controla se e como o valor do texto deve ser automaticamente capitalizado quando é inserido / editado pelo do utilizador. Os valores não preteridos estão disponíveis no iOS 5 e posterior. Os valores possíveis são:

• none: Desativa completamente a capitalização automática.
• sentences: Coloque automaticamente em maiúscula a primeira letra das frases.
• words: Coloque em maiúscula automaticamente a primeira letra das palavras.
• characters: Colocar em maiúscula automaticamente todos os caracteres.
• on:Deprecated Descontinuado desde o iOS 5.
• off:Deprecated Descontinuado desde o iOS 5.

autocomplete

Este atributo indica se o valor do controle pode ser preenchido automaticamente pelo navegador. Os valores possíveis são:

• off: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.
• on: O navegador pode concluir automaticamente o valor com base nos valores inseridos pelo usuário durante os usos anteriores.

Se oautocomplete atributo não está especificado em um<textarea> elemento, o navegador usa o elementoautocomplete valor do atributo<textarea> proprietário do formulário do elemento. O proprietário do formulário é o<form> elemento que este<textarea> elemento é um descendente ou o elemento de formulário cujaid é especificado peloform atributo do elemento de entrada. Para mais informações, consulte oautocomplete atribuno no<form>.

autofocus

Esse atributo booleano permite especificar que um controle de formulário tenha foco de entrada quando a página for carregada. Somente um elemento associado ao formulário em um documento pode ter esse atributo especificado.

cols

A largura visível do controle de texto, em larguras médias de caracteres. Se for especificado, deve ser um número inteiro positivo. Se não for especificado, o valor padrão é 20.

disabled

Esse atributo booleano indica que o usuário não pode interagir com o controle. Se esse atributo não for especificado, o controle herdará sua configuração do elemento que contém, por exemplo<fieldset>; se não houver elemento contendo quando odisabled atributo estiver definido, o controle está ativado.

form

O elemento do formulário que o<textarea> elemento está associado (seu "proprietário do formulário"). O valor do atributo deve ser oid de um elemento de formulário no mesmo documento. Se este atributo não for especificado, o atributo<textarea> O elemento deve ser um descendente de um elemento do formulário. Este atributo permite que você coloque<textarea> elementos em qualquer lugar do documento, não apenas como descendentes de elementos do formulário.

maxlength

O número máximo de caracteres (pontos de código unicode) que o usuário pode inserir. Se esse valor não for especificado, o usuário poderá inserir um número ilimitado de caracteres.

minlength

O número mínimo de caracteres (pontos de código unicode) exigidos pelo usuário.

name

O nome do controle.

placeholder

Uma dica para o usuário sobre o que pode ser inserido no controle. Retornos de carro ou feeds de linha no texto do espaço reservado devem ser tratados como quebras de linha ao renderizar a dica.

Note:Nota: Os espaços reservados devem ser usados apenas para mostrar um exemplo do tipo de dados que deve ser inserido em um formulário; eles não substituem uma adequada<label> elemento vinculado à entrada. VejaLabels e placeholders para uma explicação completa.

readonly

Esse atributo booleano indica que o usuário não pode modificar o valor do controle. Ao contrário dodisabled atributo, oreadonly O atributo não impede o usuário de clicar ou selecionar no controle. O valor de um controle somente leitura ainda é enviado com o formulário.

required

Este atributo especifica que o usuário deve preencher um valor antes de enviar um formulário.

rows

O número de linhas de texto visíveis para o controle.

spellcheck

Especifica se o<textarea>está sujeito a verificação ortográfica pelo navegador / SO subjacente. o valor pode ser:

• true: Indica que o elemento precisa ter sua ortografia e gramática verificadas.
• default :Indica que o elemento deve agir de acordo com um comportamento padrão, possivelmente com base no próprio elemento paispellcheck valor.
• false : Indica que o elemento não deve ter verificação ortográfica.

wrap

Indica como o controle quebra o texto. Os valores possíveis são:

• hard: O navegador insere automaticamente quebras de linha (CR + LF) para que cada linha não tenha mais que a largura do controle; acols O atributo também deve ser especificado para que isso entre em vigor.
• soft: O navegador garante que todas as quebras de linha no valor consistam em um par CR + LF, mas não insira nenhuma quebra de linha adicional.
• offNão padrão: Comosoft mas muda a aparência parawhite-space: pre segmentos de linha que excedamcols não estão embrulhados e os<textarea> torna-se rolável horizontalmente.

Se este atributo não for especificado,soft é o seu valor padrão.

Estilo com CSS

<textarea> é um elemento substituído - possui dimensões intrínsecas, como uma imagem rasterizada. Por padrão, suadisplay o valor é bloco. Em comparação com outros elementos de formulário, é relativamente fácil de estilizar, com seu modelo de caixa, fontes, esquema de cores etc. sendo facilmente manipuláveis usando CSS comum.

O estilo de formulários HTML fornece algumas dicas úteis sobre estilo<textarea>s.

Inconsistência da linha de base

A especificação HTML não define onde a linha de base de um<textarea> ou seja, navegadores diferentes o definem em posições diferentes. Para Gecko, o<textarea> linha de base é definida na linha de base da primeira linha da primeira linha da área de texto, em outro navegador pode ser definida na parte inferior da<textarea>caixa. Não usevertical-align: baseline nele; o comportamento é imprevisível

Controlando se uma área de texto é redimensionável

Na maioria dos navegadores,<textarea>s são redimensionáveis - você notará a alça de arrasto no canto direito, que pode ser usada para alterar o tamanho do elemento na página. Isso é controlado peloresize Propriedade CSS - o redimensionamento está ativado por padrão, mas você pode desativá-lo explicitamente usando umresize valor denone:

textarea {  resize: none;}

Estilo de valores válidos e inválidos

Valores válidos e inválidos de um<textarea> elemento (por exemplo, dentro e fora dos limites definidos porminlength,maxlength, ourequired) pode ser destacado usando o:valid e:invalid pseudo-classes. Por exemplo, para atribuir à sua área de texto uma borda diferente, dependendo se é válida ou inválida:

textarea:invalid {  border: 2px dashed red;}textarea:valid {  border: 2px solid lime;}

Exemplo

Exemplo básico

O exemplo a seguir mostra uma área de texto muito simples, com um número definido de linhas e colunas e algum conteúdo padrão.

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

Comprimento mínimo e máximo

Este exemplo tem um número mínimo e máximo de caracteres - de 10 e 20, respectivamente. Experimente e veja.

<textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20">Write something here</textarea>

Observe queminlength não impede o usuário de remover caracteres para que o número digitado ultrapasse o mínimo, mas faz com que o valor digitado no<textarea> invalide.Observe também que, mesmo se você tiver umminlength conjunto de valores (3, por exemplo), um campo vazio<textarea> ainda é considerado válido, a menos que você também tenha orequired conjunto de atributos.

Placeholder

Este exemplo tem um espaço reservado definido. Observe como ele desaparece quando você começa a digitar na caixa.

<textarea  name="textarea"  rows="5"  cols="30"  placeholder="Comment text."></textarea>

Note:Nota: Os espaços reservados devem ser usados apenas para mostrar um exemplo do tipo de dados que deve ser inserido em um formulário; eles não substituem uma adequada<label> elemento vinculado à entrada. VejaLabels e placeholders para uma explicação completa.

Desativado e somente leitura

Este exemplo mostra dois<textarea>s — um dos quais édisabled, e o outro éreadonly.Brinque com os dois e verá a diferença de comportamento - Odisabled elemento não é selecionável de forma alguma (e seu valor não é enviado), enquanto o elementoreadonly é selecionável e seu conteúdo copiável (e seu valor é enviado); você simplesmente não pode editar o conteúdo.

<textarea name="textarea" rows="5" cols="30" disabled>I am a disabled textarea</textarea><textarea name="textarea" rows="5" cols="30" readonly>I am a readonly textarea</textarea>

Resumo técnico

Especificações

Compatibilidade com navegadores

Veja também

Outros elementos relacionados ao formulário:

• <form>
• <button>
• <datalist>
• <legend>
• <label>
• <select>
• <optgroup>
• <option>
• <input>
• <fieldset>
• <output>
• <progress>
• <meter>