1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
---
title: Formulários em HTML
slug: HTML/Forms_in_HTML
translation_of: Learn/HTML/Forms/HTML5_updates
---
<p>{{ gecko_minversion_header("2") }}</p>
<p>Elementos e atributos de formulários em <strong>HTML5</strong> proporcionam um grau de marcação semântica maior que HTML4 e remove grande parte da tediosa necessidade de se mexer com scripts e estilos que era necessária em HTML4. As características dos formulários em HTML5 proporcionam uma melhor experiência para usuários por tornarem formulários mais consistentes entre diferentes sites e dar um feedback imediato ao usuário sobre a entrada de dados. Eles também oferecem essa experiência para usuários que possuem scripts desabilitados em seus navegadores.</p>
<p>Este tópico descreve itens novos ou modificados que são suportados por Gecko/Firefox, versão 4 ou mais recente.</p>
<h3 id="O_elemento_<input>">O elemento <code><input></code></h3>
<p>O elemento <code>{{ HTMLElement("input") }}</code> tem novos valores para o atributo {{ htmlattrxref("type", "input") }}.</p>
<ul>
<li><code>search</code>: O elemento representa um campo de entrada de pesquisa. Quebras de linha são automaticamente retiradas do valor de entrada, mas nenhuma outra sintaxe é aplicada.</li>
<li><code>tel</code>: O elemento representa um controle para edição de um número telefônico. Quebras de linha são automaticamente retiradas do valor de entrada, mas nenhuma outra sintaxe é aplicada, porque números telefônicos variam muito dependendo do país em que se encontra. Você pode usar atributos como {{ htmlattrxref("pattern", "input") }} e {{ htmlattrxref("maxlength", "input") }} para restringir valores de entrada.</li>
<li><code>url</code>: O elemento representa um controle para edição de uma <a class="external" href="http://pt.wikipedia.org/wiki/URL" title="http://pt.wikipedia.org/wiki/URL">URL</a>. Quebreas de linha e espaços em branco à esquerda e direita são automaticamente retirados do valor de entrada.</li>
<li>
<p><code>email</code>: O elemento representa um endereço de email. Quebras de linha são automaticamente retiradas do valor de entrada. Um email inválido até pode ser colocado, mas o campo de entrada só aceitará se ele respeitar o formato da ABNF <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> onde <code>atext</code> é definido em <a class="external" href="http://tools.ietf.org/html/rfc5322#section-3.2.3">RFC 5322 section 3.2.3</a>, e <code>ldh-str</code> é definido em <a class="external" href="http://tools.ietf.org/html/rfc1034#section-3.5">RFC 1034 section 3.5</a>.</p>
<div class="note"><strong>Nota:</strong> Se o atributo {{ htmlattrxref("multiple", "input") }} for aplicado, multiplos endereços de email podem ser colocador neste elemento {{ HTMLElement("input") }} , como uma lista separada por vírgulas, mas este recurso ainda está sendo implementado no Firefox.</div>
</li>
</ul>
<p>O elemento {{ HTMLElement("input") }} também tem novos atributos:</p>
<ul>
<li>{{ htmlattrxref("list", "input") }}: O ID de um elemento {{ HTMLElement("datalist") }} cujo conteúdo, elementos {{ HTMLElement("option") }} , e são usados como dicas e mostrados como sugestões no campo de entrada.</li>
<li>{{ htmlattrxref("pattern", "input") }}: Uma expressão regular que o valor de controle é comparado, que podem ser usados com valores {{ htmlattrxref("type", "input") }} de <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code>, e <code>email</code>.</li>
<li>{{ htmlattrxref("formmethod", "input") }}: Uma string indicando qual método HTTP (GET or POST) deve ser usado quando enviado; ele substitui o {{ htmlattrxref("method", "form") }} do elemento {{ HTMLElement("form") }} , se definido. O {{ htmlattrxref("formmethod", "input") }} só aplica quando o {{ htmlattrxref("type", "input") }} é <code>image</code> ou <code>submit</code>.</li>
<li>{{ htmlattrxref("x-moz-errormessage", "input") }} {{ non-standard_inline() }}: Uma string que é mostrada como uma mensagem de erro quando o a validação falha. Esta é uma extensão Mozilla, e não é padrão.</li>
</ul>
<h3 id="O_elemento_<form>">O elemento <code><form></code></h3>
<p>O elemento {{ HTMLElement("form") }} possui um novo atributo:</p>
<ul>
<li>{{ htmlattrxref("novalidate", "form") }}: Este atributo previne o formulário de ser validado antes de ser enviado.</li>
</ul>
<h3 id="O_elemento_<datalist>">O elemento <code><datalist></code></h3>
<p>O elemento {{ HTMLElement("datalist") }} representa a lista de elementos {{ HTMLElement("option") }} to suggest when filling an {{ HTMLElement("input") }} field.</p>
<p>Você pode usar o atributo {{ htmlattrxref("list", "input") }} em um elemento {{ HTMLElement("input") }} para ligar um específico campo de entrada com um específico elemento {{ HTMLElement("datalist") }}.</p>
<h3 id="O_elemento_<output>">O elemento <code><output></code></h3>
<p>O elemento <code>{{ HTMLElement("output") }}</code> representa o resultado de um cálculo.</p>
<p>Você pode usar o atributo {{ htmlattrxref("for", "output") }} para especificar uma relação entre o elemento<code> {{ HTMLElement("output") }}</code> e outros elementos no documento que afetam o resultado do cálculo (por exemplo, como entradas ou parâmetros). O valor do atributo {{ htmlattrxref("for", "output") }} é uma lista de IDs separados por espaço de outros elementos.</p>
<p>{{ non-standard_inline() }} Gecko 2.0 (mas não necessariamente outras engines de navegador) suportasupports defining custom validity constraints e mensagens de erro de elementos {{ HTMLElement("output") }} , e portanto aplica as pseudo-classes CSS {{ Cssxref(":invalid") }}, {{ Cssxref(":valid") }}, {{ Cssxref(":-moz-ui-invalid") }}, e {{ Cssxref(":-moz-ui-valid") }} a eles. Isso pode ser útil em situações quando o resultado calculadoThis can be helpful in situations where the calculated result violates a business rule, but no specific input value does (for example, "The total of percentages must not exceed 100").</p>
<h3 id="O_atributo_placeholder">O atributo <em>placeholder</em></h3>
<p>O atributo {{ htmlattrxref("placeholder", "input") }} nos elementos <code>{{ HTMLElement("input") }}</code> e <code>{{ HTMLElement("textarea") }}</code> fornecem uma dica para o usuário do que pode ser inserido no campo. O texto do placeholder não pode conter caracteres de quebra de linha.</p>
<h3 id="O_atributo_autofocus">O atributo <em>autofocus</em></h3>
<p>O atributo {{ htmlattrxref("autofocus", "input") }} permite você especificar um campo de formulário que será focado automaticamente quando a página carregar. No documento, apenas um campo pode ter o atributo <em>autofocus</em>, que é um booleano. Este atributo pode ser aplicado aos seguintes elementos: <code style="font-style: normal;">{{ HTMLElement("input") }}</code>, <code style="font-style: normal;">{{ HTMLElement("button") }}</code>, <code style="font-style: normal;">{{ HTMLElement("select") }}</code>, and <code style="font-style: normal;">{{ HTMLElement("textarea") }}. A única exceção é que o atributo <em>autofocus </em>não pode ser aplicado a um elemento </code>{{ HTMLElement("input") }} caso seu atributo {{ htmlattrxref("type", "input") }} seja <em>hidden.</em></p>
<h3 id="The_label.control_DOM_property">The label.control DOM property</h3>
<p>The <code><a href="/en/DOM/HTMLLabelElement" title="en/DOM/HTMLLabelElement">HTMLLabelElement</a></code> DOM interface provides an extra property, in addition to the properties that correspond to the HTML <code>{{ HTMLElement("label") }}</code> element attributes. The <strong>control</strong> property returns the labeled control, that is, the control that the label is for, which is determined by the {{ htmlattrxref("for", "label") }} attribute (if it is defined) or by the first descendant control element.</p>
<h3 id="Constraint_Validation">Constraint Validation</h3>
<p>HTML5 provides syntax and API items to support client-side validation of forms. While this functionality does not replace server-side validation, which is still necessary for security and data integrity, client-side validation can support a better user experience by giving the user immediate feedback about input data.</p>
<p>If the <code>title</code> attribute is set on the {{ HTMLElement("input") }} element, that string is displayed in a tooltip when validation fails. If the <code>title</code> is set to the empty string, no tooltip is displayed. If the <code>title</code> attribute isn't set, the standard validation message (as specified by the {{ htmlattrxref("x-moz-errormessage") }} attribute or by calling the <code>setCustomValidity()</code> method) is displayed instead.</p>
<div class="note"><strong>Note:</strong> Constraint validation is not supported on {{ HTMLElement("button") }} elements in a form; to style a button based on the validity of the associated form, use the {{ cssxref(":-moz-submit-invalid") }} pseudo-class.</div>
<h4 id="HTML_Syntax_for_Constraint_Validation">HTML Syntax for Constraint Validation</h4>
<p>The following items in HTML5 syntax can be used to specify constraints on form data.</p>
<ul>
<li>The {{ htmlattrxref("required", "input") }} attribute on the {{ HTMLElement("input") }}, {{ HTMLElement("select") }}, and {{ HTMLElement("textarea") }} elements indicates that a value must be supplied. (On the {{ HTMLElement("input") }} element, {{ htmlattrxref("required", "input") }} applies only in conjunction with certain values of the {{ htmlattrxref("type", "input") }} attribute.)</li>
<li>The {{ htmlattrxref("pattern", "input") }} attribute on the {{ HTMLElement("input") }} element constrains the value to match a specific regular expression.</li>
<li>The {{ htmlattrxref("min", "input") }} and {{ htmlattrxref("max", "input") }} attributes of the {{ HTMLElement("input") }} element constrain the minimum and maximum values that can be entered.</li>
<li>The {{ htmlattrxref("step", "input") }} attribute of the {{ HTMLElement("input") }} element (when used in combination with the {{ htmlattrxref("min", "input") }} and {{ htmlattrxref("max", "input") }} attributes) constrains the granularity of values that can be entered. A value that does not correspond an allowed value step does not validate.</li>
<li>The {{ htmlattrxref("maxlength", "input") }} attribute of the {{ HTMLElement("input") }} and {{ HTMLElement("textarea") }} elements constrains the maximum number of characters (in Unicode code points) that the user can enter.</li>
<li>The values <code>url</code> and <code>email</code> for the {{ htmlattrxref("type", "input") }} constrain the value to being a valid URL or e-mail address, respectively.</li>
</ul>
<p>In addition, you can prevent constraint validation by specifying the {{ htmlattrxref("novalidate", "form") }} attribute on the {{ HTMLElement("form") }}, or the {{ htmlattrxref("formnovalidate", "button") }} attribute on the {{ HTMLElement("button") }} element and on the {{ HTMLElement("input") }} element (when {{ htmlattrxref("type", "input") }} is <code>submit</code> or <code>image</code>). These attributes indicate that the form is not to be validated when it is submitted.</p>
<h4 id="Constraint_Validation_API">Constraint Validation API</h4>
<p>The following DOM properties and methods related to constraint validation are available to client-side scripts:</p>
<ul>
<li>On <code><a href="/en/DOM/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code> objects, the <code>checkValidity()</code> method, which returns true if all of this form element's associated elements that are subject to constraint validation satisfy their constraints, and false if any do not.</li>
<li>On <a href="/en/HTML/Content_categories#form-associated" title="en/HTML/Content Categories#form-associated">form-associated elements</a>:
<ul>
<li><code>willValidate</code> property, which is false if the element has constraints that are not satisfied.</li>
<li><code>validity</code> property, which is a <code><a href="/en/DOM/ValidityState" title="en/DOM/ValidityState Interface">ValidityState</a></code> object representing the validity states that the element is in (i.e., constraint failure or success conditions).</li>
<li><code>validationMessage</code> property, which is a message describing any constraint failures that pertain to the element.</li>
<li><code>checkValidity()</code> method, which returns false if the element fails to satisfy any of its constraints, or true otherwise.</li>
<li><code>setCustomValidity()</code> method, which sets a custom validation message, allowing for constraints to be imposed and validated beyond those that are predefined.</li>
</ul>
</li>
</ul>
<p>{{ languages({"es": "es/HTML/HTML5/Formularios_en_HTML5", "ja": "ja/HTML/HTML5/Forms_in_HTML5", "ko": "ko/HTML/HTML에서_폼"}) }}</p>
<p>{{ HTML5ArticleTOC() }}</p>
|
