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

---
title: El teu primer formulari
slug: Learn/HTML/Forms/El_teu_primer_formulari
translation_of: Learn/Forms/Your_first_form
---
<div>{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</div>

<p class="summary">Aquest articles t'ofereix la primera experiència de creació d’un formulari web, que inclou dissenyar d’un formulari senzill amb els controls de formulari HTML adequats i altres elements HTML, afegir una mica d’estil molt senzill amb CSS i enviar les dades a un servidor. A mesura que avancem en el mòdul, ampliarem aquesta informació.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Requisits previs:</th>
   <td>Coneixements bàsics d'informàtica i <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">fonaments bàsics d’HTML</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objectiu:</th>
   <td>Familiaritzar-se amb els formularis web, per a què serveixen, com dissenyar-los, i quins elements bàsics HTML necessitaràs per a casos senzills.</td>
  </tr>
 </tbody>
</table>

<h2 id="Què_són_els_formularis_web">Què són els formularis web?</h2>

<p>Els <strong>formularis web</strong> són un dels principals punts d’interacció entre un usuari i un lloc web o aplicació. Els formularis permeten als usuaris introduir dades, que en general s’envien a un servidor web per a processar-les i emmagatzemar-les (consulta l’article <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari web</a> més endavant d’aquest mòdul) o permeten al client actualitzar a l’instant la interfície d’alguna manera (per exemple, afegir un altre element de llista, o mostrar o amagar una funció d'interfície d'usuari).</p>

<p>L’HTML d’un <strong>formulari web</strong> està format per un o més <strong>controls de formulari</strong> (de vegades anomenats <strong>ginys</strong> o, en anglès, <em>widgets</em>), a més d’alguns elements addicionals que ajuden a estructurar el formulari general, que sovint s’anomenen <strong>formularis HTML</strong>. Els controls poden ser camps de text d'una sola línia o de diverses línies, caixes desplegables, botons, caselles de selecció o botons d'opció, i es creen majoritàriament amb l'element {{htmlelement("input")}}, tot i que hi ha altres elements que també has de conèixer.</p>

<p>Els controls de formulari també es poden programar per a forçar la introducció de formats o valors específics (<strong>validació del formulari</strong>) i es poden combinar amb etiquetes de text que en descriuen el propòsit tant als usuaris estàndard com als que tenen discapacitats visuals.</p>

<h2 id="Disseny_del_formulari">Disseny del formulari</h2>

<p>Abans de començar a codificar, sempre és millor fer un pas enrere i prendre't el temps necessari per pensar en el teu formulari. Dissenyar una maqueta ràpida t'ajudarà a definir el conjunt adequat de dades que vols que l'usuari introdueixi. Des del punt de vista de l'experiència d’usuari (UX), és important recordar que, com més gran sigui el teu formulari, més risc hi ha de frustrar les persones i perdre usuaris. Fes que sigui senzill i concís: demana només les dades que necessites.</p>

<p>El disseny de formularis és un pas important a l’hora de crear un lloc web o una aplicació. Aquest article no tracta de l’experiència d’usuari amb els formularis, però si vos aprofundir aquest tema, pots llegir els articles següents:</p>

<ul>
 <li>Smashing Magazine conté <a href="https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/" rel="external" title="http://uxdesign.smashingmagazine.com/tag/forms/">articles molt bons sobre formularis UX</a>, que inclouen un article antic però encara rellevant anomenat <a href="https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/" rel="external" title="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/">Extensive Guide To Web Form Usability</a>.</li>
 <li>UXMatters també és un recurs que dona consells molt bons de <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">bones pràctiques bàsiques</a> per a problemes complexos, com ara <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">formularis que ocupen més d’una pàgina</a>.</li>
</ul>

<p>En aquest article crearem un formulari de contacte senzill. Fem-ne un esbós.</p>

<p><img alt="Una manera aproximada de fer un esbós de formulari" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; display: block; height: 352px; margin: 0px auto; width: 400px;"></p>

<p>El nostre formulari inclourà tres camps de text i un botó. Demanem a l’usuari el nom, el correu electrònic i el missatge que vol enviar. En prémer el botó, les dades s’enviaran a un servidor web.</p>

<h2 id="Aprenentatge_actiu_Creació_del_nostre_formulari_HTML">Aprenentatge actiu: Creació del nostre formulari HTML</h2>

<p>D’acord, en primer lloc creem l’HTML per al nostre formulari. Utilitzarem els elements HTML següents: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}} i {{HTMLelement("button")}}.</p>

<p>Abans d’avançar, fes una còpia local de la nostra <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">plantilla HTML senzilla</a> i hi introduiràs el formulari HTML.</p>

<h3 id="L’element_HTMLelementform">L’element {{HTMLelement("form")}}</h3>

<p>Tots els formularis comencen amb un element {{HTMLelement("form")}}, com ara:</p>

<pre class="brush:html; notranslate">&lt;form action="/my-handling-form-page" method="post"&gt;

&lt;/form&gt;</pre>

<p>Aquest element defineix formalment un formulari. És un element contenidor, com un element {{HTMLelement ("section")}} o {{HTMLelement ("footer")}}, però que conté específicament formularis; també admet alguns atributs específics per a configurar el comportament del formulari. Tots els atributs són opcionals, però és una pràctica habitual establir sempre com a mínim els atributs <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> i <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a>:</p>

<ul>
 <li>L’atribut <code>action</code> defineix la ubicació (URL) on s’han d’enviar les dades recollides pel formulari quan es validen.</li>
 <li>L'atribut <code>method</code> defineix amb quin mètode HTTP s’envien les dades (normalment <code>get</code> o <code>post</code>).</li>
</ul>

<div class="note">
<p><strong>Nota</strong>: Observa com funcionen aquests atributs en el nostre article <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari web</a>, que trobaràs més endavant.</p>
</div>

<p>Per ara, afegeix l'element {{htmlelement("form")}} anterior al teu element HTML {{htmlelement("body")}}.</p>

<h3 id="Els_elements_HTMLelementlabel_HTMLelementinput_i_HTMLelementtextarea">Els elements {{HTMLelement("label")}}, {{HTMLelement("input")}} i {{HTMLelement("textarea")}}</h3>

<p>El nostre formulari de contacte no és complex: la part de l’entrada de les dades conté tres camps de text, cadascun amb el seu element {{HTMLelement("label")}} corresponent:</p>

<ul>
 <li>El camp d'entrada del nom és un {{HTMLelement("input/text", "camp de text d'una sola línia")}}.</li>
 <li>El camp d'entrada del correu electrònic és una {{HTMLelement ("input/email", "entrada del tipus correu electrònic")}}: un camp de text d'una sola línia que accepta només adreces de correu electrònic.</li>
 <li>El camp d'entrada del missatge és un {{HTMLelement("textarea", "àrea de text")}}; un camp de text de múltiples línies.</li>
</ul>

<p>En termes de codi HTML, necessitem alguna cosa com la següent per a implementar aquests controls de formulari:</p>

<pre class="brush:html; notranslate" dir="rtl">&lt;form action="/my-handling-form-page" method="post"&gt;
 &lt;ul&gt;
  &lt;li&gt;
    &lt;label for="name"&gt;Nom:&lt;/label&gt;
    &lt;input type="text" id="name" name="user_name"&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;label for="mail"&gt;Correu electrònic:&lt;/label&gt;
    input type="email" id="mail" name="user_mail"&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;label for="msg"&gt;Missatge:&lt;/label&gt;
    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
  &lt;/li&gt;
 &lt;/ul&gt;
&lt;/form&gt;</pre>

<p>Actualitza el codi del teu formulari perquè s'assembli a l’anterior.</p>

<p>Els elements {{HTMLelement("li")}} hi són per estructurar convenientment el nostre codi i facilitar el disseny (ho veuràs més endavant en aquest article). Incloem una etiqueta explícita per a cada control de formulari per motius d'usabilitat i accessibilitat. Tingues en compte l’ús de l’atribut <a href="/en-US/docs/Web/HTML/Attributes/for"><code>for</code></a> per a tots els elements {{HTMLelement ("label")}}, que pren com a valor l'identificador del control de formulari <a href="/en-US/docs/Web/HTML/Attributes/id"><code>id</code></a> al qual està associat; així és com un formulari s'associa a la seva etiqueta.</p>

<p>Fer-ho resulta molt útil: associa l’etiqueta amb el control del formulari i permet als usuaris de ratolí, trackpad i dispositius tàctils fer clic a l’etiqueta i activar el control corresponent, i també proporciona un nom accessible per als usuaris de lectors de pantalla. Trobaràs més informació sobre les etiquetes dels formularis en l’article <a href="/ca/docs/Learn/HTML/Forms/Com_estructurar_un_formulari_web">Com estructurar un formulari web</a>.</p>

<p>En l’element {{HTMLelement("input")}}, l’atribut més important és <code>type</code>. Aquest atribut és molt important perquè defineix la manera com apareix l’element {{HTMLelement("input")}}, i com es comporta. Trobaràs més informació més endavant, en l’article <a href="/ca/docs/Learn/HTML/Forms/Controls_de_formulari_originals">Els controls de formulari bàsics originals</a>.</p>

<ul>
 <li>En el nostre exemple senzill, utilitzem el valor {{HTMLelement ("input/text")}} per a la primera entrada: el valor per defecte d'aquest atribut. Representa un camp bàsic de text d’una sola línia que accepta qualsevol tipus d’entrada de text.</li>
 <li>Per a la segona entrada, utilitzem el valor {{HTMLelement ("input/email")}}, que defineix un camp de text d'una sola línia que només accepta una adreça de correu electrònic ben formada. Això converteix un camp de text bàsic en una mena de camp «intel·ligent» que fa algunes comprovacions de validació de les dades que l'usuari introdueix per teclat. També crea un disseny de teclat més adequat per a introduir adreces de correu electrònic (per exemple, amb un símbol @ per defecte) en dispositius amb teclats dinàmics, com els telèfons intel·ligents. Trobaràs més informació sobre la validació de formularis més endavant en l'article <a href="/en-US/docs/Learn/Forms/Form_validation">Validació de formularis en la banda del client</a>.</li>
</ul>

<p>Per últim, però no per això menys important, cal destacar la sintaxi de <code>&lt;input&gt;</code> en contraposició a <code>&lt;textarea&gt;&lt;/textarea&gt;</code>. Aquesta és una de les curiositats de l’HTML. L’etiqueta <code>&lt;input&gt;</code> és un element buit, que significa que no necessita una etiqueta de tancament. En canvi, {{HTMLElement("textarea")}} no és un element buit, és a dir, s'hauria de tancar amb l'etiqueta final adequada. Això té una conseqüència en una característica específica dels formularis: la manera de definir el valor per defecte. Per a definir el valor predeterminat d'un element {{HTMLElement("input")}} has d'utilitzar l'atribut <a href="/en-US/docs/Web/HTML/Attributes/value"><code>value</code></a> de la manera següent:</p>

<pre class="brush:html; notranslate">&lt;input type="text" value="per defecte aquest element s'omple amb aquest text"&gt;</pre>

<p>D'altra banda, si vols definir un valor predeterminat per a un {{HTMLElement("textarea")}}, l'has de posar entre les etiquetes d'obertura i tancament de l'element {{HTMLElement("textarea")}}, com en el cas següent:</p>

<pre class="brush:html; notranslate">&lt;textarea&gt;
per defecte aquest element s'omple amb aquest text
&lt;/textarea&gt;</pre>

<h3 id="L’element_HTMLelementbutton">L’element {{HTMLelement("button")}}</h3>

<p>L'etiquetatge del nostre formulari és gairebé complet; només haurem d’afegir un botó que permeti a l’usuari enviar les dades un cop emplenat el formulari. Això es fa amb l’element {{HTMLelement("button")}}; afegeix el següent just a sobre de l’etiqueta de tancament <code>&lt;/form&gt;</code>:</p>

<pre class="brush:html; notranslate">&lt;li class="button"&gt;
  &lt;button type="submit"&gt;Envia el teu missatge&lt;/button&gt;
&lt;/li&gt;</pre>

<p>L’element {{htmlelement("button")}} també accepta un atribut <code>type</code>, que a la vegada accepta un d'aquests tres valors: <code>submit</code>, <code>reset</code> o <code>button</code>.</p>

<ul>
 <li>Un clic sobre el botó <code>submit</code> (el valor predeterminat) envia les dades del formulari a la pàgina web definida en l'atribut <code>action</code> de l'element {{HTMLelement("form")}}.</li>
 <li>Un clic en un botó <code>reset</code> restableix immediatament tots els controls del formulari als valors predeterminats. Des d’un punt de vista de l'experiència d'usuari, es considera una mala pràctica, per la qual cosa has d’evitar fer servir aquest tipus de botons, tret que tinguis un bon motiu per a incloure’ls.</li>
 <li>Un clic sobre un botó <code>button</code>, no fa res! Això sembla una ximpleria, però és molt útil per a crear botons personalitzats; pots definir-ne la funció amb JavaScript.</li>
</ul>

<div class="note">
<p><strong>Nota</strong>: També pots utilitzar l’element {{HTMLElement("input")}} amb el <code>type</code> corresponent i crear un botó, per exemple <code>&lt;input type="submit"&gt;</code>. L’avantatge principal de l’element {{HTMLelement("button")}} és que l’element {{HTMLelement("input")}} només admet text, mentre que l’element {{HTMLelement("button")}} admet contingut HTML complet i permet dissenyar botons més complexos i creatius.</p>
</div>

<h2 id="Nocions_bàsiques_d’aplicació_d’estil_a_formularis">Nocions bàsiques d’aplicació d’estil a formularis</h2>

<p>Ara que has acabat d'escriure el codi HTML del teu formulari, desa’l i obre’l en un navegador. Observa que, de moment, presenta un aspecte més aviat lleig.</p>

<div class="note">
<p><strong>Nota</strong>: Si creus que el teu codi HTML no és correcte, compara’l amb el nostre exemple acabat: consulta el fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (també pots consultar l’<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html">exemple en viu</a>).</p>
</div>

<p>Aplicar estil a un formulari perquè quedi bé no és gens fàcil. En aquest article no t’ensenyarem a aplicar-hi estil de manera detallada; de moment, només afegirem una mica de CSS perquè sigui presentable.</p>

<p>Abans de res, afegeix un element {{htmlelement("style")}} a la teva pàgina, en la capçalera de l’HTML. Hi hauria d’haver una cosa com aquesta:</p>

<pre class="brush: html notranslate">&lt;style&gt;

&lt;/style&gt;</pre>

<p>Afegeix a l'etiqueta <code>style</code> el CSS següent:</p>

<pre class="brush:css; notranslate">form {
  /* Centra el formulari a la pàgina */
  margin: 0 auto;
  width: 400px;
  /* Esquema de formulari */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li {
  margin-top: 1em;
}

label {
  /* Mida i alineació uniforme */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input,
textarea {
  / * Per garantir que tots els camps de text tenen la mateixa configuració de tipus de lletra
     de manera predeterminada, les àrees de text tenen un tipus de lletra monospai */
  font: 1em sans-serif;

  /* Mida uniforme del camp de text */
  width: 300px;
  box-sizing: border-box;

  /* Vores del camp de formulari */
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  /* Destacat addicional per a elements enfocats */
  border-color: #000;
}

textarea {
  /* Alinea els camps de text multilínies amb les seves etiquetes */
  vertical-align: top;

  /* Proporciona espai per a escriure algun text */
  height: 5em;
}

.button {
  /* Alinea els botons amb els camps de text */
  padding-left: 90px; /* la mateixa mida que els elements d'etiqueta */
}

button {
  /* Aquest marge addicional representa aproximadament el mateix espai que l’espai
     entre les etiquetes i els seus camps de text */
  margin-left: .5em;
}</pre>

<p>Desa’l i torna’l a carregar i observa que el teu formulari no s’hauria de veure tan lleig com abans.</p>

<div class="note">
<p><strong>Nota</strong>: Pots trobar la nostra versió a GitHub, en el fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (o consultar l’<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">exemple en viu</a>).</p>
</div>

<h2 id="Enviar_les_dades_del_formulari_al_servidor_web">Enviar les dades del formulari al servidor web</h2>

<p>L’última part, i potser la més complicada, és tractar les dades del formulari del costat del servidor. L’element {{HTMLelement("form")}} defineix on i com enviar les dades amb els atributs <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> i <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a>.</p>

<p>Proporcionem un nom (<a href="/en-US/docs/Web/HTML/Attributes/name"><code>name</code></a>) a cada control de formulari. Els noms són importants tant del costat del client com del costat del servidor; informen el navegador sobre quin nom ha de donar a cadascuna de les dades i, del costat del servidor, permeten tractar cada dada pel nom. Les dades del formulari s’envien al servidor com a parells de nom/valor.</p>

<p>Per posar el nom a les dades d'un formulari, has d'utilitzar l'atribut <code>name</code> en cada control de formulari que recopilarà una informació específica. Vegem de nou una mica de codi del nostre formulari:</p>

<pre class="brush:html; notranslate">&lt;form action="/my-handling-form-page" method="post"&gt;
 &lt;ul&gt;
  &lt;li&gt;
    &lt;label for="name"&gt;Nom:&lt;/label&gt;
    &lt;input type="text" id="name" name="user_name" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;label for="mail"&gt;Correu electrònic:&lt;/label&gt;
    &lt;input type="email" id="mail" name="user_email" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;label for="msg"&gt;Missatge:&lt;/label&gt;
    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
  &lt;/li&gt;

  ...
</pre>

<p>En el nostre exemple, el formulari enviarà 3 blocs de dades anomenats «<code>user_name</code>», «<code>user_email</code>» i «<code>user_message</code>». Aquestes dades s’enviaran a l’URL «<code>/my-handling-form-page</code>» pel mètode <a href="/en-US/docs/Web/HTTP/Methods/POST"><code>post</code> de HTTP </a>.</p>

<p>De la banda del servidor, l'script a l'URL «<code>/my-handling-form-page</code>» rebrà les dades com una llista de 3 elements clau/valor continguts en la sol·licitud HTTP. La manera de gestionar aquest script depèn de les dades. Cada llenguatge de servidor (PHP, Python, Ruby, Java, C#, etc.) té el seu mecanisme propi per al tractament de les dades de formulari. Està fora de l’àmbit d’aquest article aprofundir en aquest tema, però si vols saber-ne més, et proporcionem alguns exemples en el nostre article <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari web</a> que trobaràs més endavant.</p>

<h2 id="Resum">Resum</h2>

<p>Enhorabona!, has creat el teu primer formulari web. Hauria de presentar un aspecte semblant a aquest:</p>

<p>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', '/en-US/Learn/Forms/Your_first_form/Example') }}</p>

<p>Això només és el començament; ara toca aprofundir. Els formularis tenen molt més poder que el que hem vist aquí i la resta d'articles d'aquest mòdul t'ajudaran a dominar-los.</p>

<p>{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</p>

<h2 id="En_aquest_mòdul">En aquest mòdul</h2>

<ul>
 <li><a href="/en-US/docs/Learn/Forms/Your_first_form">El teu primer formulari</a></li>
 <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">Com estructurar un formulari web</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Els controls de formulari bàsics originals</a></li>
 <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">Els tipus d'entrada HTML5</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Altres controls de formulari</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Aplicació d'estil a formularis web</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Aplicació d'estil a formularis avançada</a></li>
 <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">Les pseudoclasses UI</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Form_validation">Validació de formulari del costat del client</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari web</a></li>
</ul>

<h3 id="Temes_avançats">Temes avançats</h3>

<ul>
 <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">Com crear controls de formulari personalitzats</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Enviar formularis amb JavaScript</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Taula de compatibilitat dels controls de formulari de codi propietari</a></li>
</ul>