path: root/files/ca/learn/html/forms/index.html

---
title: HTML forms guide
slug: Learn/HTML/Forms
tags:
  - Featured
  - Formularis
  - Guía
  - HTML
  - Web
translation_of: Learn/Forms
---
<p>Aquesta guia és una sèrie d'articles que l'ajudaran a dominar els formularis HTML. Els formularis HTML són una eina molt potent per interactuar amb els usuaris; No obstant això, per raons històriques i tècniques, no sempre és obvi com usar-los al seu màxim potencial. En aquesta guia, anem a cobrir tots els aspectes dels formularis HTML, des de donar estil a l'estructura, des de la manipulació de dades amb components personalitzats. Aprendràs a gaudir de la gran potència que ofereixen!</p>

<h2 id="Articles">Articles</h2>

<ol>
 <li><a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/My_first_HTML_form">El meu primer formulari HTML</a></li>
 <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>Com estructurar un formulari HTML</span></a></li>
 <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>Formularis widgets nadius</span></a></li>
 <li>CSS amb formularis HTML
  <ol>
   <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Estil en formularis HTML</span></a></li>
   <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Estils avançats en formularis HTML</a></li>
   <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Taula de propietats compatibles per formularis widgets</a></li>
  </ol>
 </li>
 <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviar <s>y recuperar</s> dades del formulari</span></a></li>
 <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validació de dades del formulari</a></li>
 <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Contruir formularis <span>widgets personalitzats</span></a></li>
 <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Enviament de formularis amb JavaScript</a>
  <ol>
   <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Utilitzant l'objecte FormData</a></li>
  </ol>
 </li>
 <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">Formularis HTML en navegadors antics</a></li>
</ol>

<h2 id="Documentació_HTML">Documentació HTML</h2>

<h3 id="Elements_HTML">Elements HTML</h3>

<table>
 <thead>
  <tr>
   <th scope="col">Element</th>
   <th scope="col"><span class="short_text" id="result_box" lang="ca"><span>Interfície</span> <span>DOM</span> <span>relacionat</span></span></th>
   <th scope="col">Descripció</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("button")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td>
   <td style="vertical-align: top;"><span class="short_text" id="result_box" lang="ca"><span>L'element</span> <code><span>button</span></code> <span>representa</span> <span>un botó que</span> <span>es premi</span><span>.</span></span></td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td>
   <td style="vertical-align: top;">L'element <span style="font-family: courier new;">datalist</span> conté un conjunt d'elements {{ HTMLElement("option") }} que representen les opcions possibles per al valor d'altres elements de formulari.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td>
   <td style="vertical-align: top;">El <span style="font-family: courier new;">fieldset</span> s'utilitza per agrupar diversos elements formulari dins d'un formulari.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("form")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td>
   <td style="vertical-align: top;">L'element <code>form</code> representa una secció del document que conté l'element interactiu que permet a un usuari enviar informació a un servidor web.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("input")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td>
   <td style="vertical-align: top;">L'element <code>input</code> s'utilitza per crear controls interactius per als formularis.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td>
   <td style="vertical-align: top;">L'element <code>keygen</code> existeix per facilitar la generació de material clau, i l'enviament de la clau pública com a part d'un formulari HTML</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("label")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td>
   <td style="vertical-align: top;">L'element <code>label</code> representa un títol d'un article en una interfície d'usuari</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("legend")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td>
   <td style="vertical-align: top;">L'element <code>legend </code>representa una llegenda per al contingut del seu pare {{ HTMLElement("fieldset") }}.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("meter")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td>
   <td style="vertical-align: top;">L'element <code>metre</code> representa o bé un valor escalar dins d'un rang conegut o un valor fraccionari.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td>
   <td style="vertical-align: top;">l'element <code>optgroup</code> crea un grup d'opcions dins d'un element {{ HTMLElement("select") }} element.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("option")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td>
   <td style="vertical-align: top;">l'element HTML <code>option</code>  s'utilitza per crear un control que representa un element dins d'un element {{ HTMLElement("select") }}, o un {{ HTMLElement("optgroup") }} o un {{ HTMLElement("datalist") }}.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("output")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td>
   <td style="vertical-align: top;">L'element <code>output </code>representa el resultat d'un càlcul.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("progress")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td>
   <td style="vertical-align: top;">L'element <code>progress </code>s'utilitza per veure el progrés de la finalització d'una tasca.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("select")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td>
   <td style="vertical-align: top;">L'element <code>select</code> representa un control que presenta un menú d'opcions.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td>
   <td style="vertical-align: top;">L'element <code>textarea</code> representa un control d'edició de text pla multilínia.</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Nota:</strong> Tots els elements formulari, com tots els elements d'HTML, suportan la interfície DOM {{domxref("HTMLElement")}}.</p>
</div>

<h3 id="Atributs_HTML">Atributs HTML</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th>Nom Atribut</th>
   <th>Elements</th>
   <th>Descripció</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>accept</td>
   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
   <td>Llista de tipus que accepta el servidor, normalment un tipus de fitxer.</td>
  </tr>
  <tr>
   <td style="white-space: nowrap;">accept-charset</td>
   <td>{{ HTMLElement("form") }}</td>
   <td>Llista de jocs de caràcters suportats.</td>
  </tr>
  <tr>
   <td>action</td>
   <td>{{ HTMLElement("form") }}</td>
   <td>L'URI d'un programa que processa la informació presentada a través del formulari.</td>
  </tr>
  <tr>
   <td>autocomplete</td>
   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
   <td>Indica si els controls d'aquest formulari poden tenir per defecte els seus valors emplenats automàticament pel navegador.</td>
  </tr>
  <tr>
   <td>autofocus</td>
   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
   <td>L'element ha de tenir el focus automàticament després de carregar la pàgina.</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <td>challenge</td>
   <td>{{ HTMLElement("keygen") }}</td>
   <td>Una cadena proposada que es presenta juntament amb la clau pública.</td>
  </tr>
  <tr>
   <td>checked</td>
   <td>{{ HTMLElement("input") }}</td>
   <td>Indica si l'element s'ha de comprovar en carregar la pàgina.</td>
  </tr>
  <tr>
   <td>cols</td>
   <td>{{ HTMLElement("textarea") }}</td>
   <td><span id="result_box" lang="ca"><span>Defineix</span> <span>el nombre</span> <span>de columnes</span> <span>en una àrea</span> <span>de text.</span></span></td>
  </tr>
  <tr>
   <td>data</td>
   <td>{{ HTMLElement("object") }}</td>
   <td><span id="result_box" lang="ca"><span>Especifica</span> <span>l'adreça URL</span> <span>del recurs.</span></span></td>
  </tr>
  <tr>
   <td>dirname</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
   <td> </td>
  </tr>
  <tr>
   <td>disabled</td>
   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
   <td><span id="result_box" lang="ca"><span>Indica</span> <span>si l'usuari</span> <span>pot interactuar</span> <span>amb l'element</span><span>.</span></span></td>
  </tr>
  <tr>
   <td>enctype</td>
   <td>{{ HTMLElement("form") }}</td>
   <td><span id="result_box" lang="ca"><span>Defineix</span> <span>el tipus</span> <span>de contingut</span> <span>de les dades del</span> <span>formulari</span> <span>quan</span> <span>el mètode és</span> <span>POST</span><span>.</span></span></td>
  </tr>
  <tr>
   <td>for</td>
   <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
   <td><span id="result_box" lang="ca"><span>Descriu</span> <span>els</span> <span>elements que</span> <span>pertanyen</span> <span>a aquest.</span></span></td>
  </tr>
  <tr>
   <td>form</td>
   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
   <td>Indica el formulari que és el propietari de l'element.</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <td>high</td>
   <td>{{ HTMLElement("meter") }}</td>
   <td>Indica el límit inferior del rang superior.</td>
  </tr>
  <tr>
   <td>keytype</td>
   <td>{{ HTMLElement("keygen") }}</td>
   <td>Especifica el tipus de clau generada.</td>
  </tr>
  <tr>
   <td>list</td>
   <td>{{ HTMLElement("input") }}</td>
   <td>Identifica una llista d'opcions predefinides per suggerir a l'usuari.</td>
  </tr>
  <tr>
   <td>low</td>
   <td>{{ HTMLElement("meter") }}</td>
   <td>Indica el límit superior del rang inferior.</td>
  </tr>
  <tr>
   <td>max</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
   <td>Indica el valor màxim permès.</td>
  </tr>
  <tr>
   <td>maxlength</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
   <td><span id="result_box" lang="ca"><span>Defineix</span> <span>el nombre</span> <span>màxim</span> <span>de caràcters</span> <span>permesos en</span> <span>l'element</span><span>.</span></span></td>
  </tr>
  <tr>
   <td>method</td>
   <td>{{ HTMLElement("form") }}</td>
   <td><span id="result_box" lang="ca"><span>Defineix</span> <span>quin mètode</span> <span>HTTP</span> <span>a utilitzar al</span> <span>enviar el formulari.</span> <span>Pot ser</span> <span>GET</span> <span>(</span><span>per defecte</span><span>)</span> <span>o</span> <span>POST</span><span>.</span></span></td>
  </tr>
  <tr>
   <td>min</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
   <td><span id="result_box" lang="ca"><span>Indica</span> <span>el valor mínim</span> <span>permès.</span></span></td>
  </tr>
  <tr>
   <td>multiple</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
   <td>Indica si diversos valors es poden introduir en una entrada del <code>correu electrònic</code> o tipus  <code>arxiu</code>.</td>
  </tr>
  <tr>
   <td>name</td>
   <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
   <td>Nom de l'element. Per exemple el usat en el servidor per identificar els camps de formulari enviat.</td>
  </tr>
  <tr>
   <td>novalidate</td>
   <td>{{ HTMLElement("form") }}</td>
   <td>Aquest atribut indica que el formulari no ha de ser validat quan sigui enviat.</td>
  </tr>
  <tr>
   <td>optimum</td>
   <td>{{ HTMLElement("meter") }}</td>
   <td>Indica el valor numèric òptim.</td>
  </tr>
  <tr>
   <td>pattern</td>
   <td>{{ HTMLElement("input") }}</td>
   <td>Defineix una expressió regular que es validarà el valor de l'element en contra.</td>
  </tr>
  <tr>
   <td>placeholder</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
   <td>Proporciona un suggeriment a l'usuari de què es poden introduir en el camp.</td>
  </tr>
  <tr>
   <td>readonly</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
   <td><span id="result_box" lang="ca"><span>Indica si l'</span><span>element pot ser</span> <span>editat</span> <span>o</span> <span>no.</span></span></td>
  </tr>
  <tr>
   <td>required</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
   <td><span id="result_box" lang="ca"><span>Indica</span> <span>si es</span> <span>requereix aquest</span> <span>element</span> <span>per omplir o</span> <span>no.</span></span></td>
  </tr>
  <tr>
   <td>rows</td>
   <td>{{ HTMLElement("textarea") }}</td>
   <td><span id="result_box" lang="ca"><span>Defineix</span> <span>el nombre</span> <span>de files</span> <span>en una àrea</span> <span>de text.</span></span></td>
  </tr>
  <tr>
   <td>selected</td>
   <td>{{ HTMLElement("option") }}</td>
   <td><span id="result_box" lang="ca"><span>Defineix un</span> <span>valor que serà</span> <span>seleccionat</span> <span>en carregar la pàgina</span><span>.</span></span></td>
  </tr>
  <tr>
   <td>size</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
   <td>Defineix l'amplada de l'element (en píxels). Si el atribut <code>type</code> de l'element és <code>text</code> o <code>contrasenya</code>, llavors és el nombre de caràcters.</td>
  </tr>
  <tr>
   <td>src</td>
   <td>{{ HTMLElement("img") }}</td>
   <td>La URL del contingut integrable.</td>
  </tr>
  <tr>
   <td>step</td>
   <td>{{ HTMLElement("input") }}</td>
   <td> </td>
  </tr>
  <tr>
   <td>target</td>
   <td>{{ HTMLElement("form") }}</td>
   <td> </td>
  </tr>
  <tr>
   <td>type</td>
   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td>
   <td>Defineix el tipus d'element.</td>
  </tr>
  <tr>
   <td>usemap</td>
   <td>{{ HTMLElement("img") }}</td>
   <td> </td>
  </tr>
  <tr>
   <td>value</td>
   <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
   <td>Defineix un valor predeterminat que es mostrarà en l'element en la càrrega de la pàgina.</td>
  </tr>
  <tr>
   <td>wrap</td>
   <td>{{ HTMLElement("textarea") }}</td>
   <td>Indica si el text ha de ser embolicat o no.</td>
  </tr>
 </tbody>
</table>

<h3 id="Referència_normativa">Referència normativa</h3>

<ul>
 <li><a href="https://www.w3.org/TR/html51/sec-forms.html#sec-forms" lang="en" rel="external" title="https://www.w3.org/TR/html51/sec-forms.html#sec-forms">W3C HTML 5.1 Especificacions (Formularis)</a></li>
 <li><a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="https://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Temps de vida dels (Formularis)</a></li>
</ul>