path: root/files/pt-br/web/html/element/form/index.html

---
title: <form>
slug: Web/HTML/Element/form
translation_of: Web/HTML/Element/form
---
<h2 id="Summary" name="Summary">Resumo</h2>

<p>O <strong>elemento HTML <code>&lt;form&gt;</code> </strong>representa uma seção de um documento que contém controles interativos que permitem ao usuário submeter informação a um determinado servidor web.</p>

<p>É possível utilizar as pseudo-classes de CSS {{cssxref(':valid')}} e{{cssxref(':invalid')}} para aplicar estilo a um elemento <code>&lt;form&gt;</code>.</p>

<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, palpable content.</li>
 <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, but with no contained <code>&lt;form&gt;</code> elements.</li>
 <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
 <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>.</li>
 <li><dfn>DOM interface</dfn> {{domxref("HTMLFormElement")}}</li>
</ul>

<h2 id="Attributes" name="Attributes">Atributos</h2>

<p><span style="line-height: 21px;">Este elemento inclue os  </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">Atributos global</a><span style="line-height: 21px;">.</span></p>

<dl>
 <dt>{{htmlattrdef("accept")}} {{HTMLVersionInline(4)}} {{obsolete_inline}}</dt>
 <dd>A comma-separated list of content types that the server accepts.
 <div class="note"><strong>Usage note:</strong> This attribute has been removed in HTML5 and should no longer be used. Instead, use the<span class="st"> {{htmlattrxref("accept", "input")}}</span> attribute of the specific {{HTMLElement("input")}} element.</div>
 </dd>
 <dt>{{htmlattrdef("accept-charset")}}</dt>
 <dd>A list of character encodings that the server accepts. The list can be delimited by spaces or commas. The browser uses in the order in which they are listed. The default value is the reserved string "UNKNOWN", in which case the encoding corresponds to the encoding of the document containing the form element.<br>
 HTML 4: In previous versions of HTML, the different character encodings could be delimited by spaces or commas. This is no longer the case in HTML5, where only spaces are correct.</dd>
 <dt>{{htmlattrdef("action")}}</dt>
 <dd>The URI of a program that processes the information submitted via the form. This value can be overridden by a {{htmlattrxref("formaction", "button")}} attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element.</dd>
 <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline(5)}}</dt>
 <dd>Indicates whether controls in this form can by default have their values automatically completed by the browser. This setting can be overridden by an <code>autocomplete</code> attribute on an element belonging to the form. Possible values are:
 <ul>
  <li><code>off</code>: The user must explicitly enter a value into each field for every use, or the document provides its own auto-completion method; the browser does not automatically complete entries.</li>
  <li><code>on</code>: The browser can automatically complete values based on values that the user has entered during previous uses of the form.</li>
 </ul>

 <div class="note">
 <p><strong>Note: </strong>If you set <code>autocomplete</code> to <code>off</code> in a form because the document provides its own auto-completion, then you should also set <code>autocomplete</code> to <code>off</code> for each of the form's <code>input</code> elements that the document can auto-complete. For details, see {{anch("Google Chrome notes")}}.</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("enctype")}}</dt>
 <dd>When the value of the <code>method</code> attribute is <code>post</code>, this attribute is the <a href="http://en.wikipedia.org/wiki/Mime_type" title="http://en.wikipedia.org/wiki/Mime_type">MIME type</a> of content that is used to submit the form to the server. Possible values are:
 <ul>
  <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li>
  <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the <code>type</code> attribute set to "file".</li>
  <li><code>text/plain (HTML5)</code></li>
 </ul>

 <p>This value can be overridden by a {{htmlattrxref("formenctype", "button")}} attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element.</p>
 </dd>
 <dt>{{htmlattrdef("method")}}</dt>
 <dd>O <a href="/en-US/docs/HTTP" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a> method that the browser uses to submit the form. Possible values are:
 <ul>
  <li><code>post</code>: Corresponds to the HTTP <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST method</a> ; the data from the form is included in the body of the form and is sent to the server.</li>
  <li><code>get</code>: Corresponds to the HTTP <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET method</a>; the data from the form are appended to the <code>action</code> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li>
 </ul>

 <p>This value can be overridden by a {{htmlattrxref("formmethod", "button")}} attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element.</p>
 </dd>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>The name of the form. In HTML 4 its use is deprecated (<code>id</code> should be used instead). It must be unique among the forms in a document and not the empty string in HTML 5.</dd>
 <dt>{{htmlattrdef("novalidate")}} {{HTMLVersionInline(5)}}</dt>
 <dd>This Boolean attribute indicates that the form is not to be validated when it is submitted. If this attribute is missing (and therefore the form is validated), this default setting can be overridden by a {{htmlattrxref("formnovalidate", "button")}} attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element belonging to the form.</dd>
 <dt>{{htmlattrdef("target")}}</dt>
 <dd>A name or keyword indicating where to display the response that is received after submitting the form. In HTML 4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). The following keywords have special meanings:
 <ul>
  <li><code>_self</code>: Load the response into the same HTML 4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.</li>
  <li><code>_blank</code>: Load the response into a new unnamed HTML 4 window or HTML5 browsing context.</li>
  <li><code>_parent</code>: Load the response into the HTML 4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li>
  <li><code>_top</code>: HTML 4: Load the response into the full, original window, canceling all other frames. HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li>
  <li><em>iframename</em>: The response is displayed in a named {{HTMLElement("iframe")}}.</li>
 </ul>

 <p>HTML5: This value can be overridden by a {{htmlattrxref("formtarget", "button")}} attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element.</p>
 </dd>
</dl>

<h2 id="Examples" name="Examples">Exemplos</h2>

<pre class="brush: html">&lt;!-- Form que envia uma requisição GET --&gt;
&lt;form action="" method="get"&gt;
  &lt;label for="GET-name"&gt;Name:&lt;/label&gt;
  &lt;input id="GET-name" type="text" name="name"&gt;
  &lt;input type="submit" value="Save"&gt;
&lt;/form&gt;

&lt;!-- Simple form which will send a POST request --&gt;
&lt;form action="" method="post"&gt;
  &lt;label for="POST-name"&gt;Name:&lt;/label&gt;
  &lt;input id="POST-name" type="text" name="name"&gt;
  &lt;input type="submit" value="Save"&gt;
&lt;/form&gt;

&lt;!-- Form with fieldset, legend, and label --&gt;
&lt;form action="" method="post"&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Title&lt;/legend&gt;
    &lt;input type="radio" name="radio" id="radio"&gt; &lt;label for="radio"&gt;Click me&lt;/label&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;
</pre>

<h2 id="Specifications" name="Specifications">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col"><label>Especificação</label></th>
   <th scope="col"><label>Status</label></th>
   <th scope="col"><label>Comment</label></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><label>{{SpecName('HTML WHATWG', 'forms.html#the-form-element', '&lt;form&gt;')}}</label></td>
   <td><label>{{Spec2('HTML WHATWG')}}</label></td>
   <td><label> </label></td>
  </tr>
  <tr>
   <td><label>{{SpecName('HTML5 W3C', 'forms.html#the-form-element', '&lt;form&gt;')}}</label></td>
   <td><label>{{Spec2('HTML5 W3C')}}</label></td>
   <td><label> </label></td>
  </tr>
  <tr>
   <td><label>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '&lt;form&gt;')}}</label></td>
   <td><label>{{Spec2('HTML4.01')}}</label></td>
   <td><label> </label></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do navegador</h2>

<p><label>{{CompatibilityTable}}</label></p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th><label>Feature</label></th>
   <th><label>Chrome</label></th>
   <th><label>Firefox (Gecko)</label></th>
   <th><label>Internet Explorer</label></th>
   <th><label>Opera</label></th>
   <th><label>Safari</label></th>
  </tr>
  <tr>
   <td><label>Basic support</label></td>
   <td><label>1.0</label></td>
   <td><label>{{CompatGeckoDesktop("1.0")}}</label></td>
   <td><label>{{CompatVersionUnknown}}</label></td>
   <td><label>{{CompatVersionUnknown}}</label></td>
   <td><label>{{CompatVersionUnknown}}</label></td>
  </tr>
  <tr>
   <td><label><code>novalidate</code> attribute</label></td>
   <td><label>1.0</label></td>
   <td><label>{{CompatGeckoDesktop("2.0")}}</label></td>
   <td><label>{{CompatNo}}</label></td>
   <td><label>{{CompatUnknown}}</label></td>
   <td><label>{{CompatUnknown}}</label></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th><label>Feature</label></th>
   <th><label>Android</label></th>
   <th><label>Firefox Mobile (Gecko)</label></th>
   <th><label>IE Mobile</label></th>
   <th><label>Opera Mobile</label></th>
   <th><label>Safari Mobile</label></th>
  </tr>
  <tr>
   <td><label>Basic support</label></td>
   <td><label>{{CompatVersionUnknown}}</label></td>
   <td><label>{{CompatGeckoMobile("1.0")}}</label></td>
   <td><label>{{CompatVersionUnknown}}</label></td>
   <td><label>{{CompatVersionUnknown}}</label></td>
   <td><label>{{CompatVersionUnknown}}</label></td>
  </tr>
  <tr>
   <td><label><code>novalidate</code> attribute</label></td>
   <td><label>{{CompatUnknown}}</label></td>
   <td><label>{{CompatGeckoMobile("2.0")}}</label></td>
   <td><label>{{CompatUnknown}}</label></td>
   <td><label>{{CompatUnknown}}</label></td>
   <td><label>{{CompatUnknown}}</label></td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Google_Chrome_notes"><label>Google Chrome notes</label></h3>

<p><label>The Google Chrome UI for auto-complete requests varies, depending on whether <code>autocomplete</code> is set to <code>off</code> on <code>input</code> elements as well as their form. Specifically, when a form has <code>autocomplete</code> set to <code>off</code> and its input element's <code>autocomplete</code> field is <strong>not</strong> set, then if the user asks for autofill suggestions for the input element, Chrome might display a message saying "autocomplete has been disabled for this form." On the other hand, if both the form and the input element have <code>autocomplete</code> set to <code>off</code>, the browser will not display that message. For this reason, you should set <code>autocomplete</code> to <code>off</code> for each input that has custom auto-completion.</label></p>

<h2 id="See_also" name="See_also">Veja também</h2>

<ul>
 <li><label><a href="/en-US/docs/Web/Guide/HTML/Forms" title="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a></label></li>
 <li><label>Other elements that are used for creating forms: {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</label></li>
</ul>

<p><label>{{HTMLRef}}</label></p>

<p> </p>