<textarea>

O elemento  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.          

Os exemplos acima demonstram vários recursos do <textarea>. O primeiro exemplo mostra o uso mais simples, com apenas um id atributo para permitir que o<textarea> estar associado a um <label> elemento para fins de acessibilidade e um name 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:

  • O rows e cols 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 o minlength 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étodo pattern 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 o value atributo.

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

Atributos

Este elemento inclui os atributos globais.

autocapitalize
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: Descontinuado desde o iOS 5.
  • off: 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 o autocomplete atributo não está especificado em um <textarea> elemento, o navegador usa o elemento autocomplete 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 cuja id é especificado pelo form atributo do elemento de entrada. Para mais informações, consulte o autocomplete 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 o disabled 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 o id 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.
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. Veja Labels and placeholders in <input>: The Input (Form Input) element 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 do disabled 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 pai spellcheck 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; a cols 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.
  • off : Como soft mas muda a aparência para white-space: pre segmentos de linha que excedam cols 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 use vertical-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 pelo resize 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 que minlength 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 um minlength conjunto de valores (3, por exemplo), um campo vazio <textarea> ainda é considerado válido, a menos que você também tenha o required 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>

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. Veja Labels and placeholders in <input>: The Input (Form Input) element 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 - O disabled elemento não é selecionável de forma alguma (e seu valor não é enviado), enquanto o elemento readonly é 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

Categorias de conteúdo Elemento associado ao formulário de conteúdo de fluxo, conteúdo de frases, conteúdo interativo, listado, rotulável, redefinível e submetível a envio.
Conteúdo permitido Text
Omissão de tag Parents permitido

Funções ARIA permitidas

None
DOM interface HTMLTextAreaElement

Especificacões

Specificação Status Comentário
HTML Living Standard
The definition of '<textarea>' in that specification.
Padrão em tempo real
HTML5
The definition of '<textarea>' in that specification.
Recomendação
HTML 4.01 Specification
The definition of '<textarea>' in that specification.
Recomendação

Compatibilidade do navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
textareaChrome Full support YesEdge Full support YesFirefox Full support Yes
Notes
Full support Yes
Notes
Notes Before Firefox 6, when a <textarea> was focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.
Notes A default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.
IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support Yes
Notes
Full support Yes
Notes
Notes Before Firefox 6, when a <textarea> was focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.
Notes A default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.
Opera Android Full support YesSafari iOS Full support Yes
Notes
Full support Yes
Notes
Notes Unlike other major browsers, a default style of opacity: 0.4 is applied to disabled <textarea> elements.
Samsung Internet Android Full support Yes
autocapitalize
Non-standard
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
autocompleteChrome No support No
Notes
No support No
Notes
Notes See issue 758078.
Edge No support NoFirefox Full support 59IE No support NoOpera No support NoSafari Full support Yes
Notes
Full support Yes
Notes
Notes See bug 150731.
WebView Android No support NoChrome Android No support NoFirefox Android Full support 59Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
autofocusChrome Full support YesEdge Full support YesFirefox Full support 4IE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
colsChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
disabledChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
formChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
maxlengthChrome Full support YesEdge Full support YesFirefox Full support 4IE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
minlengthChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
nameChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
placeholderChrome Full support YesEdge Full support YesFirefox Full support 4IE Full support 10Opera Full support 11.5Safari Full support 5WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 11.5Safari iOS Full support 4Samsung Internet Android Full support Yes
readonlyChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
requiredChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
rowsChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
spellcheckChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
wrapChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

Veja também

Outros elementos relacionados ao formulário: