diff options
Diffstat (limited to 'files/pt-br/web/html/element/textarea/index.html')
-rw-r--r-- | files/pt-br/web/html/element/textarea/index.html | 262 |
1 files changed, 262 insertions, 0 deletions
diff --git a/files/pt-br/web/html/element/textarea/index.html b/files/pt-br/web/html/element/textarea/index.html new file mode 100644 index 0000000000..546d86ba4c --- /dev/null +++ b/files/pt-br/web/html/element/textarea/index.html @@ -0,0 +1,262 @@ +--- +title: <textarea> +slug: Web/HTML/Element/textarea +translation_of: Web/HTML/Element/textarea +--- +<div>{{HTMLRef}}</div> + +<p>O <strong>elemento</strong> HTML <code><textarea></code> 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. </p> + +<div>{{EmbedInteractiveExample("pages/tabbed/textarea.html", "tabbed-standard")}}</div> + +<p class="hidden">O código fonte deste exemplo interativo está armazenado em um repositório GitHub. Caso queira contribuir com o projeto de exemplos interativos, faça um clone do repósitório <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> e nos envie um solicitação de recebimento.</p> + +<p>Os exemplos acima demonstram vários recursos do <code><textarea></code>. O primeiro exemplo mostra o uso mais simples, com apenas um <code>id</code> atributo para permitir que o<code><textarea></code> estar associado a um {{htmlelement("label")}} elemento para fins de acessibilidade e um <code>name</code> atributo para definir o nome do ponto de dados associado enviado ao servidor quando o formulário é enviado.</p> + +<p>O segundo exemplo mostra alguns recursos mais complexos:</p> + +<ul> + <li>O <code>rows</code> e <code>cols</code> atributos permitem especificar um tamanho exato para o <code><textarea></code> pegar. Definir isso é uma boa idéia para manter a consistência, pois os padrões do navegador podem ser diferentes.</li> + <li><code>maxlength</code> especifica um número máximo de caracteres que o <code><textarea></code> tem permissão para conter. Você também pode definir um comprimento mínimo considerado válido usando o <code>minlength</code> atributo e especifique que o <code><textarea></code> não enviará (e é inválido) se estiver vazio, usando o<code>required</code> atributo. Isso fornece o <code><textarea></code> 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 <code>pattern</code> atributo, como você pode com o {{htmlelement("input")}} elemento).</li> + <li><code>wrap</code> especifica o comportamento de quebra automática do texto quando ele atinge a borda do <code><textarea></code>.</li> + <li>Se você deseja conteúdo padrão para o seu <code><textarea></code>, você o insere entre as tags de abertura e fechamento. <code><textarea></code> não suporta o <code>value</code> atributo.</li> +</ul> + +<p>O <code><textarea></code> O elemento também aceita vários atributos comuns para formar <code><input></code>s, tal como<code>autocomplete</code>, <code>autofocus</code>, <code>disabled</code>, <code>placeholder</code>, <code>readonly</code>, e <code>required</code>.</p> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui os atributos globais.</p> + +<dl> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>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: + <ul> + <li><code>none</code>: Desativa completamente a capitalização automática.</li> + <li><code>sentences</code>: Coloque automaticamente em maiúscula a primeira letra das frases.</li> + <li><code>words</code>: Coloque em maiúscula automaticamente a primeira letra das palavras.</li> + <li><code>characters</code>: Colocar em maiúscula automaticamente todos os caracteres.</li> + <li><code>on</code>: {{deprecated_inline()}} Descontinuado desde o iOS 5.</li> + <li><code>off</code>: {{deprecated_inline()}} Descontinuado desde o iOS 5.</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}}</dt> + <dd>Este atributo indica se o valor do controle pode ser preenchido automaticamente pelo navegador. Os valores possíveis são: + <ul> + <li><code>off</code>: 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.</li> + <li><code>on</code>: O navegador pode concluir automaticamente o valor com base nos valores inseridos pelo usuário durante os usos anteriores.</li> + </ul> + + <p>Se o <code>autocomplete</code> atributo não está especificado em um <code><textarea></code> elemento, o navegador usa o elemento <code>autocomplete</code> valor do atributo <code><textarea></code> proprietário do formulário do elemento. O proprietário do formulário é o {{HTMLElement("form")}} elemento que este<code><textarea></code> elemento é um descendente ou o elemento de formulário cuja <code>id</code> é especificado pelo <code>form</code> atributo do elemento de entrada. Para mais informações, consulte o {{htmlattrxref("autocomplete", "form")}} atribuno no {{HTMLElement("form")}}.</p> + </dd> + <dt>{{ htmlattrdef("autofocus") }}</dt> + <dd>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.<br> + <br> + {{ htmlattrdef("cols") }}</dd> + <dd>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.</dd> + <dt>{{ htmlattrdef("disabled") }}</dt> + <dd>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 {{ HTMLElement("fieldset") }}; se não houver elemento contendo quando o <code>disabled</code> atributo estiver definido, o controle está ativado.</dd> + <dt>{{ htmlattrdef("form") }}</dt> + <dd>O elemento do formulário que o <code><textarea></code> elemento está associado (seu "proprietário do formulário"). O valor do atributo deve ser o <code>id</code> de um elemento de formulário no mesmo documento. Se este atributo não for especificado, o atributo <code><textarea></code> O elemento deve ser um descendente de um elemento do formulário. Este atributo permite que você coloque<code><textarea></code> elementos em qualquer lugar do documento, não apenas como descendentes de elementos do formulário.</dd> + <dt>{{ htmlattrdef("maxlength") }}</dt> + <dd>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.</dd> + <dt>{{ htmlattrdef("minlength") }}</dt> + <dd>O número mínimo de caracteres (pontos de código unicode) exigidos pelo usuário.</dd> + <dt>{{ htmlattrdef("name") }}</dt> + <dd>O nome do controle.</dd> + <dt>{{ htmlattrdef("placeholder") }}</dt> + <dd>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. + <div class="note"><strong>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</strong> {{HTMLElement("label")}} elemento vinculado à entrada. Veja {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} para uma explicação completa.</div> + </dd> + <dt>{{ htmlattrdef("readonly") }}</dt> + <dd>Esse atributo booleano indica que o usuário não pode modificar o valor do controle. Ao contrário do <code>disabled</code> atributo, o<code>readonly</code> 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.</dd> + <dt>{{ htmlattrdef("required") }}</dt> + <dd>Este atributo especifica que o usuário deve preencher um valor antes de enviar um formulário.</dd> + <dt>{{ htmlattrdef("rows") }}</dt> + <dd>O número de linhas de texto visíveis para o controle.</dd> + <dt>{{ htmlattrdef("spellcheck") }}</dt> + <dd>Especifica se o <code><textarea></code>está sujeito a verificação ortográfica pelo navegador / SO subjacente. o valor pode ser: + <ul> + <li><code>true</code>: Indica que o elemento precisa ter sua ortografia e gramática verificadas.</li> + <li><code>default</code> :Indica que o elemento deve agir de acordo com um comportamento padrão, possivelmente com base no próprio elemento pai <code>spellcheck</code> valor.</li> + <li><code>false</code> : Indica que o elemento não deve ter verificação ortográfica.</li> + </ul> + </dd> + <dt>{{ htmlattrdef("wrap") }}</dt> + <dd>Indica como o controle quebra o texto. Os valores possíveis são: + <ul> + <li><code>hard</code>: O navegador insere automaticamente quebras de linha (CR + LF) para que cada linha não tenha mais que a largura do controle; a <code>cols</code> O atributo também deve ser especificado para que isso entre em vigor.</li> + <li><code>soft</code>: 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.</li> + <li><code>off</code> {{non-standard_inline}}: Como <code>soft</code> mas muda a aparência para <code>white-space: pre</code> segmentos de linha que excedam <code>cols</code> não estão embrulhados e os <code><textarea></code> torna-se rolável horizontalmente.</li> + </ul> + + <p>Se este atributo não for especificado, <code>soft</code> é o seu valor padrão.</p> + </dd> +</dl> + +<h2 id="Estilo_com_CSS">Estilo com CSS</h2> + +<p><code><textarea></code> é um elemento substituído - possui dimensões intrínsecas, como uma imagem rasterizada. Por padrão, sua{{cssxref("display")}} 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.</p> + +<p><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">O estilo de formulários HTML fornece algumas dicas úteis sobre estilo</a><code><textarea></code>s.</p> + +<h3 id="Inconsistência_da_linha_de_base">Inconsistência da linha de base</h3> + +<p>A especificação HTML não define onde a linha de base de um <code><textarea></code> ou seja, navegadores diferentes o definem em posições diferentes. Para Gecko, o <code><textarea></code> 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 <code><textarea></code>caixa. Não use {{cssxref("vertical-align")}}<code>: baseline</code> nele; o comportamento é imprevisível</p> + +<h3 id="Controlando_se_uma_área_de_texto_é_redimensionável">Controlando se uma área de texto é redimensionável</h3> + +<p>Na maioria dos navegadores, <code><textarea></code>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 {{ cssxref("resize") }} Propriedade CSS - o redimensionamento está ativado por padrão, mas você pode desativá-lo explicitamente usando um<code>resize</code> valor de<code>none</code>:</p> + +<pre class="brush: html">textarea { + resize: none; +} +</pre> + +<h3 id="Estilo_de_valores_válidos_e_inválidos">Estilo de valores válidos e inválidos</h3> + +<p>Valores válidos e inválidos de um <code><textarea></code> elemento (por exemplo, dentro e fora dos limites definidos por<code>minlength</code>, <code>maxlength</code>, ou<code>required</code>) pode ser destacado usando o {{cssxref(":valid")}} e{{cssxref(":invalid")}} pseudo-classes. Por exemplo, para atribuir à sua área de texto uma borda diferente, dependendo se é válida ou inválida:</p> + +<pre class="brush: css">textarea:invalid { + border: 2px dashed red; +} + +textarea:valid { + border: 2px solid lime; +}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="Exemplo_básico">Exemplo básico</h3> + +<p>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.</p> + +<pre class="brush: html"><textarea name="textarea" + rows="10" cols="50">Write something here</textarea></pre> + +<p>{{ EmbedLiveSample('Basic_example','600','150') }}</p> + +<h3 id="Comprimento_mínimo_e_máximo">Comprimento mínimo e máximo</h3> + +<p>Este exemplo tem um número mínimo e máximo de caracteres - de 10 e 20, respectivamente. Experimente e veja.</p> + +<pre class="brush: html"><textarea name="textarea" + rows="5" cols="30" + minlength="10" maxlength="20">Write something here</textarea></pre> + +<p>{{ EmbedLiveSample('Min_and_max_length','600','80') }}</p> + +<p>Observe que <code>minlength</code> 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 <code><textarea></code> invalide.Observe também que, mesmo se você tiver um <code>minlength</code> conjunto de valores (3, por exemplo), um campo vazio <code><textarea></code> ainda é considerado válido, a menos que você também tenha o <code>required</code> conjunto de atributos.</p> + +<h3 id="Placeholder">Placeholder</h3> + +<p>Este exemplo tem um espaço reservado definido. Observe como ele desaparece quando você começa a digitar na caixa.</p> + +<pre class="brush: html"><textarea name="textarea" + rows="5" cols="30" + placeholder="Comment text."></textarea></pre> + +<p>{{ EmbedLiveSample('Placeholder','600','80') }}</p> + +<div class="note"> +<p><strong>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</strong>{{HTMLElement("label")}} elemento vinculado à entrada. Veja {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} para uma explicação completa.</p> +</div> + +<h3 id="Desativado_e_somente_leitura">Desativado e somente leitura</h3> + +<p>Este exemplo mostra dois <code><textarea></code>s — um dos quais é <code>disabled</code>, e o outro é <code>readonly</code>.Brinque com os dois e verá a diferença de comportamento - O <code>disabled</code> elemento não é selecionável de forma alguma (e seu valor não é enviado), enquanto o elemento <code>readonly</code> é selecionável e seu conteúdo copiável (e seu valor é enviado); você simplesmente não pode editar o conteúdo.</p> + +<pre class="brush: html"><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> +</pre> + +<p>{{ EmbedLiveSample('Disabled_and_readonly','600','80') }}</p> + +<h2 id="Resumo_técnico">Resumo técnico</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Categorias de conteúdo</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">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.</a></td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td>Text</td> + </tr> + <tr> + <th scope="row">Omissão de tag</th> + <td><strong style="font-size: 1rem; font-style: inherit; font-weight: 700; letter-spacing: -0.00278rem;">Parents permitido</strong></td> + </tr> + <tr> + <th scope="row"> + <p>Funções ARIA permitidas</p> + </th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTextAreaElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Especificacões">Especificacões</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '<textarea>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de recebimento.</div> + +<p>{{Compat("html.elements.textarea")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<p>Outros elementos relacionados ao formulário:</p> + +<ul> + <li>{{ HTMLElement("form") }}</li> + <li>{{ HTMLElement("button") }}</li> + <li>{{ HTMLElement("datalist") }}</li> + <li>{{ HTMLElement("legend") }}</li> + <li>{{ HTMLElement("label") }}</li> + <li>{{ HTMLElement("select") }}</li> + <li>{{ HTMLElement("optgroup") }}</li> + <li>{{ HTMLElement("option") }}</li> + <li>{{ HTMLElement("input") }}</li> + <li>{{ HTMLElement("keygen") }}</li> + <li>{{ HTMLElement("fieldset") }}</li> + <li>{{ HTMLElement("output") }}</li> + <li>{{ HTMLElement("progress") }}</li> + <li>{{ HTMLElement("meter") }}</li> +</ul> |