<textarea>

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.

Este elemento inclui os atributos globais.

autocapitalize Non-standard

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

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. Veja Labels 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 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 Non-standard : 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.

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

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

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;
}

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;
}

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>

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.

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. Veja Labels e placeholders para uma explicação completa.

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
>

Outros elementos relacionados ao formulário:

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