path: root/files/ca/web/html/element/button/index.html

---
title: <button>
slug: Web/HTML/Element/button
translation_of: Web/HTML/Element/button
---
<h2 id="Sumari">Sumari</h2>

<p>L'element HTML <code>&lt;button&gt;</code> representa un botó que es premi.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categories de contingut</a></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contingut de Flux</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">Contingut interactiu</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">enumerat</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">etiquetables</a>, i <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">enviament formularis associats</a> element, contingut palpable.</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td>{{no_tag_omission}} </td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Qualsevol element que accepti <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Interfície DOM</th>
   <td>{{domxref("HTMLButtonElement")}}</td>
  </tr>
  <tr>
   <th scope="row">Tipus d'element</th>
   <td>En línia</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element inclou els<span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributs globals</a><span style="line-height: 21px;">.</span></p>

<dl>
 <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt>
 <dd>Aquest atribut booleà permet especificar que el botó ha de tenir un focus d'entrada quan es carrega la pàgina, llevat que l'usuari els redefineixi, per exemple escrivint en un control diferent. Només un element form-associated a un document pot tenir aquest atribut especificat.</dd>
 <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt>
 <dd>L'ús d'aquest atribut en un {{HTMLElement("button")}} no és estàndard i específic de Firefox. Per defecte, a diferència d'altres navegadors, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox persisteix l'estat dinàmic desactivat</a> d'un {{HTMLElement("button")}} a través de càrregues de pàgina. Establir el valor d'aquest atribut en <code>off</code> (i.e. <code>autocomplete = "off"</code>) desactiva aquesta funció. Vegeu {{bug(654072)}}.</dd>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>
 <p>Aquest atribut booleà indica que l'usuari no pot interactuar amb el botó. Si no s'especifica aquest atribut, el botó hereta la seva configuració des de l'element que el conté, per exemple {{HTMLElement("fieldset")}} ; si no hi ha cap element que contingui l'atribut <strong>disabled</strong>, llavors el botó està activat.</p>

 <p>Firefox, a diferència d'altres navegadors, per defecte, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persisteixi l'estat dinàmica desactivat</a> d'un {{HTMLElement("button")}} a través de càrregues de pàgina. Utilitzeu l'atribut {{htmlattrxref("autocomplete","button")}} per a controlar aquesta funció.</p>
 </dd>
 <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt>
 <dd>L'element form que el botó està associat amb (<em>el propietari del formulari</em>). El valor de l'atribut ha de ser l'atribut id d'un element {{HTMLElement("form")}} en el mateix document. Si no s'especifica aquest atribut, l'element <code>&lt;button&gt;</code> s'associa a un ancestre element {{HTMLElement("form")}}, si és que existeix. Aquest atribut permet associar elements <code>&lt;button&gt;</code> a elements {{HTMLElement("form")}} en qualsevol lloc dins d'un document, no només com descendents dels elements {{HTMLElement("form")}}.</dd>
 <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt>
 <dd>L'URI d'un programa que processa la informació presentada pel botó. Si s'especifica, s'anul·la l'atribut {{htmlattrxref("action","form")}} del propietari del formulari del botó.</dd>
 <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}</dt>
 <dd><span id="result_box" lang="ca"><span>Si</span> <span>el botó</span> <span>és</span> <span>un botó</span> <span>d'enviament,</span> <span>aquest</span> <span>atribut</span> <span>especifica</span> <span>el tipus</span> <span>de contingut</span> <span>que s'utilitza</span> <span>per enviar el</span> <span>formulari al</span> <span>servidor.</span> <span>Els</span> <span>valors</span> <span>possibles</span> <span>són</span><span>:</span></span>
 <ul>
  <li><code>application/x-www-form-urlencoded</code>: <span id="result_box" lang="ca"><span>El valor</span> <span>per defecte si</span> <span>no s'especifica</span> <span>l'atribut</span><span>.</span></span></li>
  <li><code>multipart/form-data</code>: Utilitzeu aquest valor si està utilitzant un element {{HTMLElement("input")}} amb l'atribut {{htmlattrxref("type","input")}} establert en l<code>'arxiu</code>.</li>
  <li><code>text/plain</code></li>
 </ul>

 <p>Si s'especifica aquest atribut, s'anul·la l'atribut {{htmlattrxref("enctype","form")}} del propietari del formulari dels botons.</p>
 </dd>
 <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}</dt>
 <dd><span id="result_box" lang="ca"><span>Si</span> <span>el botó</span> <span>és</span> <span>un botó</span> <span>d'enviament,</span> <span>aquest</span> <span>atribut</span> <span>especifica el</span> <span>mètode</span> <span>HTTP</span> <span>que el navegador</span> <span>utilitza</span> <span>per enviar el</span> <span>formulari.</span> <span>Els</span> <span>valors</span> <span>possibles</span> <span>són</span><span>:</span></span>
 <ul>
  <li><code>post</code>: Les dades del formulari s'incloent en el cos del formulari i s'envia al servidor.</li>
  <li><code>get</code>: Les dades del formulari s'afegeixen a l'atribut de formulari URI, amb un '?' com a separador, i l'URI resultant s'envia al servidor. Utilitzeu aquest mètode quan el formulari no té efectes secundaris i conté només caràcters ASCII.</li>
 </ul>

 <p>Si s'especifica, aquest atribut reemplaça l'atribut {{htmlattrxref("method","form")}} del propietari del formulari del botó.</p>
 </dd>
 <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}</dt>
 <dd>Si el botó és un botó d'enviament, aquest atribut booleà especifica que el formulari no ha de ser validat quan es presenti. Si s'especifica aquest atribut, s'anul·la l'atribut {{htmlattrxref("novalidate","form")}} del propietari del formulari del botó.</dd>
 <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}</dt>
 <dd><span id="result_box" lang="ca"><span>Si</span> <span>el botó</span> <span>és</span> <span>un botó</span> <span>d'enviament,</span> <span>aquest</span> <span>atribut</span> <span>és</span> <span>un nom</span> <span>o una paraula</span> <span>clau que</span> <span>indica on</span> <span>s'ha de mostrar</span> <span>la resposta que</span> <span>es</span> <span>rep</span> <span>després d'enviar</span> <span>el formulari.</span> <span>Es</span> <span>tracta</span> <span>d'un nom de</span><span>,</span> <span>o una paraula</span> <span>clau</span> <span>per a un</span> <span>context</span> <span>de navegació</span> <span>(</span><span>per</span> <span>exemple</span><span>, pestanya</span><span>, finestra</span> <span>o</span> <span>marc en</span> <span>línia</span><span>)</span><span>.</span> <span>Si s'especifica</span> <span>aquest</span> <span>atribut</span><span>, </span></span> reemplaça l'atribut de destinació <span lang="ca"> <span>del propietari del</span> <span>formulari</span> <span>del botó.</span> <span>Les</span> <span>següents</span> <span>paraules</span> <span>clau</span> <span>tenen</span> <span>un significat</span> <span>especial</span><span>:</span></span></dd>
 <dd>
 <ul>
  <li><code>_self</code>: Càrrega la resposta en el mateix context de navegació com l'actual. Aquest valor és el valor per defecte si no s'especifica l'atribut.</li>
  <li><code>_blank</code>: Càrrega la resposta en un nou context de navegació sense nom.</li>
  <li><code>_parent</code>: Càrrega la resposta en el context de navegació dels pares de l'actual. Si no hi ha pare, aquesta opció es comporta de la mateixa manera que <code>_self</code>.</li>
  <li><code>_top</code>: Càrrega la resposta en el context de navegació de nivell superior (és a dir, el context de navegació que és un ancestre de l'actual, i no té pare). Si no hi ha pare, aquesta opció es comporta de la mateixa manera que<code> _self</code>.</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd><span id="result_box" lang="ca"><span>El nom del</span> <span>botó</span><span>, que es presenta</span> <span>amb</span> <span>les dades del</span> <span>formulari.</span></span></dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd><span id="result_box" lang="ca"><span>Tipus</span> <span>de botó.</span> <span>Els</span> <span>valors</span> <span>possibles</span> <span>són</span><span>:</span></span>
 <ul>
  <li><code>submit</code>: El botó envia les dades del formulari al servidor. Aquest és el valor per defecte si no s'especifica l'atribut, o si l'atribut es canviat dinàmicament a un valor buit o no vàlid.</li>
  <li><code>reset</code>: Rstableix tots els controls als seus valors inicials</li>
  <li><code>button</code>: El botó no té cap comportament predeterminat. Pot tenir seqüències d'ordres del costat del client, relacionats amb els events de l'element, que s'activen quan es produeixen els events.</li>
  <li>menu: El botó obre un menú emergent definit pel seu element {{HTMLElement("menu")}} designat.</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd><span id="result_box" lang="ca"><span>El valor inicial</span> <span>del botó.</span> <span>Defineix</span> <span>el valor associat</span> <span>amb</span> <span>el botó que</span> <span>es presenta</span> <span>amb</span> <span>les dades del</span> <span>formulari.</span> <span>Aquest</span> <span>valor</span> <span>es passa al</span> <span>servidor</span> <span>en</span> <span>params</span> <span>quan</span> <span>s'envia el</span> <span>formulari.</span></span></dd>
</dl>

<h2 id="Example" name="Example">Exemple</h2>

<pre class="brush:html">&lt;button name="button"&gt;Click me&lt;/button&gt;
</pre>

<p>{{ EmbedLiveSample('Example', 200, 64) }}</p>

<p><span class="short_text" id="result_box" lang="ca"><span>Recordeu que</span> <span>aquest</span> <span>botó</span> <span>s'ha</span> <span>aplicat</span> <span>CSS.</span></span></p>

<h2 id="Specifications" name="Specifications">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '&lt;button&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '&lt;button&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '&lt;button&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>formaction</code></td>
   <td>9.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>10</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>formenctype</code></td>
   <td>9.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>10</td>
   <td>10.6</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>formmethod</code></td>
   <td>9.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>10</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>autofocus</code></td>
   <td>5.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>10</td>
   <td>9.6</td>
   <td>5.0</td>
  </tr>
  <tr>
   <td>atribut <code>menu</code> value for <code>type</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>formaction</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>formenctype</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>formmethod</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>menu</code> value for <code>type</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Gecko no implementa aquesta funció fins el moment. Veure {{bug("1241353")}}.</p>

<h3 id="En_fer_clic_i_enfocament"><span class="short_text" id="result_box" lang="ca"><span>En fer</span> <span>clic i</span> <span>enfocament</span></span></h3>

<p><span id="result_box" lang="ca"><span class="alt-edited">Si fem clic a un </span></span>{{HTMLElement("button")}}<span lang="ca"><span class="alt-edited"> fa que (per defecte) aquest es converteixi en el focus i varïi segons el navegador i sistema operatiu. Els resultats de </span></span>{{HTMLElement("input")}}<span lang="ca"><span class="alt-edited"> de <code>type="button"</code> i <code>type="submit"</code> son els mateixos.</span></span></p>

<table>
 <caption>Fer clic en un {{HTMLElement("button")}} donar-li el focus?</caption>
 <tbody>
  <tr>
   <td>Desktop Browsers</td>
   <th>Windows 8.1</th>
   <th>OS X 10.9</th>
  </tr>
  <tr>
   <th>Firefox 30.0</th>
   <td style="background-color: LawnGreen;">Yes</td>
   <td style="background-color: red;">No (even with a <code>tabindex</code>)</td>
  </tr>
  <tr>
   <th>Chrome 35</th>
   <td style="background-color: LawnGreen;">Yes</td>
   <td style="background-color: LawnGreen;">Yes</td>
  </tr>
  <tr>
   <th>Safari 7.0.5</th>
   <td style="background-color: silver;">N/A</td>
   <td style="background-color: red;">No (even with a <code>tabindex</code>)</td>
  </tr>
  <tr>
   <th>Internet Explorer 11</th>
   <td style="background-color: LawnGreen;">Yes</td>
   <td style="background-color: silver;">N/A</td>
  </tr>
  <tr>
   <th>Presto (Opera 12)</th>
   <td style="background-color: LawnGreen;">Yes</td>
   <td style="background-color: LawnGreen;">Yes</td>
  </tr>
 </tbody>
</table>

<table>
 <caption>Fer un toc en un {{HTMLElement("button")}} donar-li el focus?</caption>
 <tbody>
  <tr>
   <td>Navagadors Mòvils</td>
   <th>iOS 7.1.2</th>
   <th>Android 4.4.4</th>
  </tr>
  <tr>
   <th>Safari Mobile</th>
   <td style="background-color: red;">No (even with a <code>tabindex</code>)</td>
   <td style="background-color: silver;">N/A</td>
  </tr>
  <tr>
   <th>Chrome 35</th>
   <td style="background-color: red;">No (even with a <code>tabindex</code>)</td>
   <td style="background-color: LawnGreen;">Yes</td>
  </tr>
  <tr>
  </tr>
 </tbody>
</table>

<h2 id="Notes">Notes</h2>

<p>Els elements <code>&lt;button&gt;</code> són molt més fàcil de donar estil que els elements {{HTMLElement("input")}}. Podeu afegir contingut HTML intern (com <code>&lt;em&gt;, &lt;strong&gt;</code> o fins i tot <code>&lt;img&gt;</code>), i fer ús dels pseudo-elements  {{Cssxref(":after")}} i {{Cssxref(":before")}}  per aconseguir la generació d'elements complexos, mentre que {{HTMLElement("input")}} només accepta un atribut de valor de text.</p>

<p>Internet Explorer 7 té un error pel qual l'enviar un formulari amb <code>&lt;button type="submit" name="myButton" value="foo"&gt;Click me&lt;/button&gt;</code>, les dades POST enviats donarà com  a  resultat <code>myButton=Click</code> <code>me</code> en lloc de <code>myButton=foo</code>. IE6 té un error encara pitjor quan s'envia un formulari a través d'un botó, presentarà tots els botons del formulari, amb el mateix error com IE7.Aquest error s'ha corregit en IE8.</p>

<p><span id="result_box" lang="ca"><span class="alt-edited">Firefox afegirà, amb fins d'accessibilitat, una petita vora de punts en un botó que té el focus. Aquesta frontera es declara a través de CSS, en el full d'estil del navegador, però pot substituir-lo en cas necessari, afegin el seu propi estil en el botó enfocat</span></span><code> {{cssxref("::-moz-focus-inner")}} { }.</code></p>

<p>Firefox, a diferència d'altres navegadors, per defecte, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persisteixi l'estat desactivat dinàmica</a> d'un {{HTMLElement("button")}} a través de càrregues de pàgina. En establir el valor de l'atribut {{htmlattrxref("autocomplete","button")}} en <code>off</code> desactiva aquesta funció. Vegeu {{bug(654072)}}.</p>

<p>Firefox &lt;35 per Android estableix per defecte un gradient {{ cssxref("background-image") }} en tots els botons (veure {{bug(763671)}}). Això es pot desactivar usant <code>background-image: none</code>.</p>

<h2 id="Veure">Veure</h2>

<p><span id="result_box" lang="ca"><span>Altres elements</span> <span>que s'utilitzen</span> <span>per a la</span> <span>creació</span> <span>de formularis</span></span> : {{HTMLElement("form")}}, {{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")}}.</p>

<div>{{HTMLRef}}</div>