Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/pt-BR/docs/Web/HTML/Reference/Elements/textarea below:

<textarea> - HTML: Linguagem de Marcação de Hipertexto

Baseline Widely available *

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.

<label for="story">Tell us your story:</label>

<textarea id="story" 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 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 Nã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 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 Não padrão : 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
>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4