diff options
Diffstat (limited to 'files/ca/learn/html/forms')
5 files changed, 2124 insertions, 0 deletions
diff --git a/files/ca/learn/html/forms/com_estructurar_un_formulari_web/index.html b/files/ca/learn/html/forms/com_estructurar_un_formulari_web/index.html new file mode 100644 index 0000000000..c0cb1e022c --- /dev/null +++ b/files/ca/learn/html/forms/com_estructurar_un_formulari_web/index.html @@ -0,0 +1,316 @@ +--- +title: Com estructurar un formulari web +slug: Learn/HTML/Forms/Com_estructurar_un_formulari_web +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}</div> + +<p class="summary">Ara que ja coneixem els conceptes bàsics, veurem amb més detall els elements que s’utilitzen per a proporcionar estructura i significat a les diferents parts d’un formulari.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Coneixements bàsics d'informàtica i una <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">fonaments bàsics de l’HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre a estructurar els formularis HTML i donar-los semàntica perquè compleixin criteris d’usabilitat i accessibilitat.</td> + </tr> + </tbody> +</table> + +<p>La flexibilitat dels formularis els converteix en una de les estructures més complexes pel que fa al codi <a href="/ca/docs/Learn/HTML" title="/en-US/docs/HTML">HTML</a>; pots crear qualsevol tipus de formulari bàsic amb elements i atributs específics de formulari. Fer servir una estructura correcta en crear un formulari HTML et garantirà la usabilitat i l’<a href="/ca/docs/Learn/Accessibility">accessibilitat</a> del formulari.</p> + +<h2 id="Lelement_<form>">L'element <form></h2> + +<p>L’element {{HTMLElement("form")}} defineix formalment un formulari i els atributs que determinen el comportament del formulari. Cada vegada que vols crear un formulari HTML, has de començar per aquest element i imbricar-hi tot el contingut a dins. Moltes tecnologies d'assistència i complements de navegador poden descobrir elements {{HTMLElement("form")}} i implementar codis de suport (<em>hooks</em>) especials per a facilitar-ne l’ús.</p> + +<p>Ja ho hem vist en l’article anterior.</p> + +<div class="warning"><strong>Atenció</strong>: Està totalment prohibit imbricar un formulari dins d’un altre formulari. És una mala idea perquè la imbricació de formularis pot introduir comportaments del tot imprevisibles.</div> + +<p>Sempre és possible utilitzar un control de formulari fora d'un element {{HTMLElement("form")}}. Si ho fas, per defecte aquest control no tindrà res a veure amb cap formulari, tret que l’associïs a algun formulari amb l'atribut <a href="/en-US/docs/Web/HTML/Attributes/form"><code>form</code></a>. Això es va introduir per a permetre unir explícitament un control amb un formulari encara que no hi estigui imbricat.</p> + +<p>Avancem una mica i observem els elements estructurals que trobaràs en un formulari.</p> + +<h2 id="Els_elements_<fieldset>_i_<legend>">Els elements <code><fieldset></code> i <code><legend></code></h2> + +<p>L’element {{HTMLElement("fieldset")}} és una manera convenient de crear grups de controls que comparteixen el mateix propòsit, amb les mateixes finalitats d’estil i semàntiques. Pots etiquetar un element {{HTMLElement("fieldset")}} incloent un element {{HTMLElement("legend")}} just a sota de l'etiqueta d'obertura {{HTMLElement("fieldset")}}. El text contingut en l'element {{HTMLElement("legend")}} descriu formalment el propòsit de l'element {{HTMLElement("fieldset")}} que hi ha inclòs.</p> + +<p>Moltes tecnologies d'assistència utilitzaran l'element {{HTMLElement("legend")}} com si fos una part de l'etiqueta de cada control de formulari que hi ha dins de l'element {{HTMLElement("fieldset")}} corresponent. Per exemple, alguns lectors de pantalla com <a href="http://www.freedomscientific.com/products/software/jaws/" rel="external" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> i <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> llegiran el contingut de la llegenda abans de llegir el text de l’etiqueta de cada control.</p> + +<p>Aquí hi ha un petit exemple:</p> + +<pre class="brush:html; notranslate"><form> + <fieldset> + <legend>Mida del suc de fruita</legend> + <p> + <input type="radio" name="size" id="size_1" value="small"> + <label for="size_1">Petit</label> + </p> + <p> + <input type="radio" name="size" id="size_2" value="medium"> + <label for="size_2">Mitjà</label> + </p> + <p> + <input type="radio" name="size" id="size_3" value="large"> + <label for="size_3">Gran</label> + </p> + </fieldset> +</form></pre> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple en el fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html">fieldset-legend.html</a> (o consultar-ne l’<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html">exemple en viu</a>).</p> +</div> + +<p>En llegir el formulari anterior, un lector de pantalla dirà «Mida del suc de fruita: petit» per al primer giny, «Mida del suc de fruita: mitjà» per al segon i «Mida del suc de fruita: gran» per al tercer.</p> + +<p>El cas d’ús que mostra aquest exemple és un dels més importants. Cada vegada que tinguis un conjunt de botons d'opció, els hauries d’imbricar dins d’un element {{HTMLElement("fieldset")}}. Hi ha altres casos d'ús i, en general, l'element {{HTMLElement("fieldset")}} també es pot utilitzar per a introduir seccions en un formulari. L’ideal seria que els formularis llargs ocupin diverses pàgines, però si un formulari s’allarga i només ha d’ocupar una sola pàgina, posar les diferents seccions relacionades dins de diferents elements {{HTMLElement("fieldset")}} millora la usabilitat.</p> + +<p>L’element {{HTMLElement("fieldset")}} és un dels elements clau per crear formularis accessibles per l’efecte que té sobre la tecnologia d’assistència; tanmateix, és la teva responsabilitat no abusar-ne. Si és possible, cada cop que creïs un formulari, intenta <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">escoltar com l’interpreta un lector de pantalla</a>. Si sona estrany, prova de millorar l'estructura del formulari.</p> + +<h2 id="Lelement_<label>">L'element <label></h2> + +<p>Com hem vist en l’article anterior, l’element {{HTMLElement("label")}} és la manera formal de definir una etiqueta per a un control de formulari en HTML. Aquest és l’element més important si vols crear formularis accessibles: quan s’implementen correctament, els lectors de pantalla llegeixen l’etiqueta d’un element de formulari juntament amb qualsevol instrucció relacionada, i també resulta útil per als usuaris sense discapacitats. Considerem aquest exemple, que hem vist en l’article anterior:</p> + +<pre class="brush: html notranslate"><label for="name">Nom:</label> <input type="text" id="name" name="user_name"></pre> + +<p>Amb l'etiqueta <code><label></code> associada correctament amb l’element <code><input></code> per l’atribut <code>for</code> (que conté l'atribut <code>id</code> de l'element <code><input></code>), un lector de pantalla llegirà una cosa així com «Nom, editar text».</p> + +<p>Hi ha una altra manera d’associar un control de formulari amb una etiqueta: introduir el control de formulari dins de <code><label></code> i associar-l’hi implícitament.</p> + +<pre class="brush: html notranslate"><label for="name"> + Nom: <input type="text" id="name" name="user_name"> +</label></pre> + +<p>Fins i tot en aquests casos, però, es considera una bona pràctica establir-hi l’atribut <code>for</code> per garantir que totes les tecnologies d’assistència entenen la relació entre l'etiqueta i el control.</p> + +<p>Si no hi ha cap etiqueta o si el control de formulari no està associat implícitament ni explícitament amb una etiqueta, un lector de pantalla llegirà alguna cosa com ara «Editar text en blanc», la qual cosa no és gaire útil.</p> + +<h3 id="També_pots_clicar_les_etiquetes!">També pots clicar les etiquetes!</h3> + +<p>Un altre avantatge de configurar correctament les etiquetes és que pots fer-hi clic o tocar-les per a activar-ne el control corresponent. Això és útil per a controls com les entrades de text, en què pots fer clic a l’etiqueta i també a l’entrada per a donar-hi el focus, però és útil, sobretot, per als botons d'opció i les caselles de verificació; l’àrea d’aquest control pot ser molt petita, de manera que és útil per a facilitar-ne l’activació.</p> + +<p>Per exemple, si fas clic al text de l'etiqueta «M'agraden les cireres» de l'exemple següent, canviarà l'estat seleccionat de la casella <em>taste_cherry</em>:</p> + +<pre class="brush:html; notranslate"><form> + <p> + <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry"> + <label for="taste_1">M'agraden les cireres</label> + </p> + <p> + <input type="checkbox" id="taste_2" name="taste_banana" value="banana"> + <label for="taste_2">M'agraden els plàtans</label> + </p> +</form></pre> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple en el fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> (o consultar l’<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">exemple en viu</a>).</p> +</div> + +<h3 id="Etiquetes_múltiples">Etiquetes múltiples</h3> + +<p>Estrictament parlant, pots posar diverses etiquetes en un sol control, però no és una bona idea perquè algunes tecnologies d'assistència poden tenir problemes a l'hora de manejar-los. En el cas de tenir etiquetes múltiples, hauràs d’incloure el control i les seves múltiples etiquetes dins d’un únic element {{htmlelement("label")}}.</p> + +<p>Considerem l'exemple següent:</p> + +<pre class="brush: html notranslate"><p>Els camps obligatoris van seguits de <abbr title="required">*</abbr>.</p> + +<!-- Doncs, això: ---> +<div> + <label for="username">Nom:</label> + <input type="text" name="username"> + <label for="username"><abbr title="obligatori" aria-label="required">*</abbr></label> +</div> + +<!-- seria millor fer-ho d'aquesta manera: --> +<div> + <label for="username"> + <span>Nom:</span> + <input id="username" type="text" name="username"> + <abbr title="obligatori" aria-label="required">*</abbr> + </label> +</div> + +<!-- Però això és probablement el millor: --> +<div> + <label for="username">Nom: <abbr title="obligatori" aria-label="required">*</abbr></label> + <input id="username" type="text" name="username"> +</div></pre> + +<p>{{EmbedLiveSample("Etiquetes_múltiples", 120, 120)}}</p> + +<p>El paràgraf de la part superior estableix una regla per als elements obligatoris. La regla s'ha d'incloure <em>abans</em> que s’hagi d'utilitzar perquè els usuaris generals i els usuaris amb tecnologies d’assistència, com ara lectors de pantalla, puguin saber què vol dir abans de trobar un element obligatori. Tot i que això ajuda a informar els usuaris què significa un asterisc, no ens en podem refiar. Un lector de pantalla llegirà un asterisc així: «<em>estrella</em>». Si s'hi passa el ratolí per sobre, hauria d'aparèixer «<em>obligatori</em>», que s'aconsegueix amb l'atribut <code>title</code>. Els títols que es llegeixen en veu alta depenen de la configuració del lector de pantalla, de manera que és més fiable incloure també l’atribut <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code>, que els lectors de pantalla llegeixen sempre.</p> + +<p>Les variants anteriors augmenten l’efectivitat a mesura que hi avances:</p> + +<ul> + <li>En el primer exemple, l’etiqueta no es llegeix del tot amb l’entrada: només es llegeix «editar text en blanc»; a més, les etiquetes es llegeixen en realitat per separat. Els múltiples elements <code><label></code> confonen el lector de pantalla.</li> + <li>En el segon exemple, les coses són una mica més clares: l’etiqueta, llegida juntament amb l’entrada, és «Editar text nom estrella nom obligatori» i les etiquetes encara es llegeixen per separat. Tot és encara una mica confús, però aquesta vegada està una mica més bé, perquè <code><input></code> té una etiqueta associada.</li> + <li>El tercer exemple és el millor: l’etiqueta es llegeix realment en conjunt i l’etiqueta que es llegeix amb l’entrada és «Editar text nom requerit».</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Pots obtenir resultats una mica diferents, segons quin sigui el teu lector de pantalla. Aquest ha estat provat amb VoiceOver (i NVDA es comporta de manera similar). Ens agradaria conèixer també les teves experiències.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple a GitHub en el fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> (o consulta l’<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">exemple en viu</a>). No provis l'exemple amb les dues o tres versions sense comentaris: els lectors de pantalla definitivament es confondran si tens diverses etiquetes i múltiples entrades amb el mateix ID.</p> +</div> + +<h2 id="Estructures_HTML_habituals_que_es_fan_servir_als_formularis">Estructures HTML habituals que es fan servir als formularis</h2> + +<p>Més enllà de les estructures específiques dels formularis web, és bo recordar que l'etiquetatge del formulari només és HTML. Això significa que pots utilitzar tot el poder de l'HTML per a estructurar un formulari web.</p> + +<p>Com es pot veure en els exemples, és una pràctica habitual delimitar una etiqueta i el control associat amb un element {{HTMLElement("li")}} dins d'un element de llista {{HTMLElement("ul")}} o {{HTMLElement("ol")}}. Els elements {{HTMLElement("p")}} i {{HTMLElement("div")}} també s'utilitzen de forma habitual. Per a estructurar diverses caselles de verificació o botons d'opció es recomana crear una llista.</p> + +<p>A més de l’element {{HTMLElement("fieldset")}}, també és una pràctica habitual utilitzar títols HTML (per exemple, {{htmlelement("h1")}}, {{htmlelement("h2")}}) i seccionar (per exemple, {{htmlelement("section")}}), per a estructurar formularis complexos.</p> + +<p>Per sobre de tot, et correspon a tu trobar un estil de codificació còmode que doni lloc a formularis que compleixin criteris d’accessibilitat i usabilitat. Les seccions independents amb funcions diferents haurien d’estar contingudes en un element {{htmlelement("section")}} separat, amb elements {{htmlelement("fieldset")}} per a contenir botons d'opció.</p> + +<h3 id="Aprenentatge_actiu_construir_l’estructura_d’un_formulari">Aprenentatge actiu: construir l’estructura d’un formulari</h3> + +<p>Posem en pràctica aquestes idees i construïm un formulari una mica més complicat: un formulari de pagament. Aquest formulari contindrà diversos tipus de controls que encara no coneixes. No et preocupis; en veuràs el funcionament en l’article següent (<a href="/ca/docs/Learn/HTML/Forms/Controls_de_formulari_originals">Els controls de formulari bàsics originals</a>). Per ara, llegeix amb detall les descripcions mentre segueixes les instruccions següents i comences a entendre quins elements utilitzem per a estructurar un formulari, i per què.</p> + +<ol> + <li>Per començar, fes una còpia local del <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">fitxer de plantilla en blanc</a> i del <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS del nostre formulari de pagament</a> en un directori nou del teu ordinador.</li> + <li>Aplica el CSS a l’HTML afegint la línia següent a l’element {{htmlelement("head")}} de l’HTML: + <pre class="brush: html notranslate"><link href="payment-form.css" rel="stylesheet"></pre> + </li> + <li>A continuació, afegeix l’element extern {{htmlelement("form")}} per a crear el teu formulari: + <pre class="brush: html notranslate"><form> + +</form></pre> + </li> + <li>Afegeix un títol d’encapçalament encapçalament i un paràgraf a les etiquetes <code><form></code> per a informar els usuaris com es marquen els camps obligatoris: + <pre class="brush: html notranslate"><h1>Forma de pagament</h1> +<p>Els camps obligatoris van seguits de <strong><abbr title = "obligatori">*</abbr></strong>.</p></pre> + </li> + <li>A continuació, afegirem una secció més gran de codi al formulari, a sota de l’entrada anterior. Aquí veuràs que delimitem amb un element {{htmlelement("section")}} independent els camps amb la informació de contacte. A més, hi ha un conjunt de dos botons d'opció, cadascun dels quals col·loquem dins d’un element de llista ({{htmlelement("li")}}) propi. També hi ha dos textos estàndard {{htmlelement("input")}} i els seus elements {{htmlelement("label")}} associats, cadascun imbricat dins d'un element {{htmlelement("p")}} i un camp per a introduir una contrasenya. Afegeix aquest codi al teu formulari: + <pre class="brush: html notranslate"><section> + <h2>Informació de contacte</h2> + <fieldset> + <legend>Títol </legend> + <ul> + <li> + <label for="title_1"> + <input type="radio" id="title_1" name="title" value="K" > + Rei + </label> + </li> + <li> + <label for="title_2"> + <input type="radio" id="title_2" name="title" value="Q"> + Reina + </label> + </li> + <li> + <label for="title_3"> + <input type="radio" id="title_3" name="title" value="J"> + Bufó + </label> + </li> + </ul> + </fieldset> + <p> + <label for="name"> + <span>Nom: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="text" id="name" name="username"> + </p> + <p> + <label for="mail"> + <span>Correu electrònic: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="email" id="mail" name="usermail"> + </p> + <p> + <label for="pwd"> + <span>Contrasenya:</span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="password" id="pwd" name="password"> + </p> +</section></pre> + </li> + <li>La segona secció (<code><section></code>) del nostre formulari és la informació de pagament. Hi ha tres controls diferents, juntament amb les seves etiquetes, cadascun inclòs en un element <code><p></code>. El primer és un menú desplegable ({{htmlelement("select")}}) que selecciona el tipus de targeta de crèdit. El segon és un element <code><input></code> del tipus <code>tel</code>, que introdueix un número de targeta de crèdit; tot i que podríem haver utilitzat el tipus <code>number</code>, no volem la interfície d'usuari que s'hi aplica per defecte. L'últim és un element <code><input></code> del tipus <code>date</code>, per a introduir la data de caducitat de la targeta; aquest apareixerà amb un control de selecció de dates en els navegadors compatibles, i es converteix en una entrada de text normal en els navegadors no compatibles. Aquests tipus d’entrada més nous es reintrodueixen en l’article <a href="/en-US/docs/Learn/Forms/HTML5_input_types">tipus d’entrades en HTML5</a>.<br> + <br> + Introdueix el següent en la secció anterior: + <pre class="brush: html notranslate"><section> + <h2>Informació de pagament</h2> + <p> + <label for="card"> + <span>Tipus de targeta: </span> + </label> + <select id="card" name="usercard"> + <option value="visa">Visa</option> + <option value="mc">Mastercard</option> + <option value="amex">American Express</option> + </select> + </p> + <p> + <label for="number"> + <span>Número de targeta:</span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="tel" id="number" name="cardnumber"> + </p> + <p> + <label for="date"> + <span> Data de caducitat: </span> + <strong><abbr title="required">*</abbr></strong> + <em>en format mm/aa</em> + </label> + <input type="date" id="date" name="expiration"> + </p> +</section></pre> + </li> + <li>L’última secció que afegim és molt més senzilla, perquè només conté un element {{htmlelement("button")}} de tipus <code>submit</code>, que envia les dades del formulari. Afegeix això al final del formulari: + <pre class="brush: html notranslate"><p> <button type="submit">Validar el pagament</button> </p></pre> + </li> +</ol> + +<p>A sota pots veure en acció el formulari acabat (també el pots trobar a GitHub; consulta el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html">codi d’origen</a> a payment-form.html i <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html">executa’l en viu</a>):</p> + +<p>{{EmbedLiveSample("A_payment_form","100%",620, "", "en-US/Learn/Forms/How_to_structure_a_web_form/Example")}}</p> + +<h2 id="Resum">Resum</h2> + +<p>Ara tens tot el coneixement que necessites per a estructurar adequadament els teus formularis web. En els pròxims articles tractarem moltes de les funcions que s’introdueixen aquí; l’article següent explica amb més detall l’ús de tots els diferents tipus de controls de formulari que voldràs utilitzar per a recopilar informació dels teus usuaris.</p> + +<h2 id="Consulta_també">Consulta també</h2> + +<ul> + <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external noopener" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">El teu primer formulari HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Com estructurar un formulari HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Controls de formulari bàsics originals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/HTML5_input_types">Tipus d'entrades en HTML5</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Additional_form_controls">Els controls de formulari addicionals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/UI_pseudo-classes">Pseudoclasses d’interfícies d’usuari UI</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Aplicació d’estil als formularis HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validació de les dades d’un formulari</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari</a></li> +</ul> + +<h3 id="Temes_avançats">Temes avançats</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Enviar formularis mitjançant JavaScript</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Com crear controls de formulari personalitzats</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">Formularis HTML en els navegadors antics</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Estil avançat per als formularis HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Taula de compatibilitat dels controls de formulari segons el seu codi propietari</a></li> +</ul> diff --git a/files/ca/learn/html/forms/controls_de_formulari_originals/index.html b/files/ca/learn/html/forms/controls_de_formulari_originals/index.html new file mode 100644 index 0000000000..73ee2a9249 --- /dev/null +++ b/files/ca/learn/html/forms/controls_de_formulari_originals/index.html @@ -0,0 +1,325 @@ +--- +title: Controls de formulari originals +slug: Learn/HTML/Forms/Controls_de_formulari_originals +translation_of: Learn/Forms/Basic_native_form_controls +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}</div> + +<p class="summary">En <a href="/ca/docs/Learn/HTML/Forms/Com_estructurar_un_formulari_web">l’article anterior</a> hem etiquetat un exemple de formulari web funcional, hem introduït alguns controls de formulari i elements estructurals comuns, però sobretot, ens hem centrat en l'accessibilitat. A continuació analitzarem amb detall la funcionalitat dels diferents controls de formulari, també anomenats <em>ginys</em> o <em>widgets</em>, i estudiarem totes les opcions que hi ha disponibles per a recollir diferents tipus de dades. En aquest article, veurem el conjunt original de controls de formulari que hi ha disponibles en tots els navegadors des dels primers dies.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica i una <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">comprensió bàsica d’HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Comprendre amb detall el conjunt de controls de formulari originals que hi ha disponibles als navegadors per a la recollida de dades, i com implementar-los amb HTML.</td> + </tr> + </tbody> +</table> + +<p>Ja coneixes alguns elements de formulari, com ara {{HTMLelement('form')}}, {{HTMLelement('fieldset')}}, {{HTMLelement('legend')}}, {{HTMLelement('textarea')}}, {{HTMLelement('label')}}, {{HTMLelement('button')}} i {{HTMLelement('input')}}. Aquest article exposa:</p> + +<ul> + <li>Els tipus d’entrada habituals {{HTMLelement('input/button', 'button')}}, {{HTMLelement('input/checkbox', 'checkbox')}}, {{HTMLelement('input/file', 'file')}}, {{HTMLelement('input/hidden', 'hidden')}}, {{HTMLelement('input/image', 'image')}}, {{HTMLelement('input/password', 'password')}}, {{HTMLelement('input/radio', 'radio')}}, {{HTMLelement('input/reset', 'reset')}}, {{HTMLelement('input/submit', 'submit')}} i {{HTMLelement('input/text', 'text')}}.</li> + <li>Alguns dels atributs que són comuns a tots els controls de formulari.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Les característiques que comentem en aquest article són compatibles amb tots els navegadors, però no amb tots els controls de formulari. En els dos articles següents expliquem els controls de formulari que s’han afegit a l’HTML5 més recentment. Si vols una referència més avançada, has de consultar la nostra <a href="https://wiki.developer.mozilla.org/ca/docs/Web/HTML/Element#Formularis">referència d’elements de formulari HTML</a> i, en particular, la nostra extensa referència de <a href="/ca/docs/Web/HTML/Element/input">tipus <input></a>.</p> +</div> + +<h2 id="Camps_dentrada_de_text">Camps d'entrada de text</h2> + +<p>Els camps d’entrada de text {{htmlelement("input")}} són els controls del formulari més bàsics. Són una manera molt còmoda de permetre a l’usuari introduir qualsevol tipus de dades, i ja n’hem vist alguns exemples senzills.</p> + +<div class="note"> +<p><strong>Nota</strong>: Els camps de text en format HTML són controls d’entrada de text pla. Això vol dir que no pots aplicar-hi <a href="/ca/docs/Web/HTML/Element/input" title="/en-US/docs/Rich-Text_Editing_in_Mozilla"> una edició enriquida</a> (negreta, cursiva, etc.). Tots els controls de formulari que trobis amb text enriquit són controls de formulari personalitzats creats amb HTML, CSS i JavaScript.</p> +</div> + +<p>Tots els controls bàsics de text comparteixen alguns comportaments comuns:</p> + +<ul> + <li>Es poden etiquetar amb {{htmlattrxref("readonly","input")}} (l'usuari no pot modificar el valor d'entrada, però aquest s’envia igualment amb la resta de dades del formulari) o {{htmlattrxref("disabled","input")}} (el valor d'entrada no es pot modificar i no s'envia mai amb la resta de dades del formulari).</li> + <li>Poden tenir un element {{htmlattrxref("placeholder","input")}}; és el text que apareix dins la caixa d’entrada de text que s’ha d’utilitzar i que en descriu breument l’objectiu.</li> + <li>Se’n poden restringir les propietats <a href="/en-US/docs/Web/HTML/Attributes/size"><code>size</code></a> (la mida física de la caixa) i <a href="/en-US/docs/Web/HTML/Attributes/maxlength" title="/en-US/docs/HTML/Element/input#attr-maxlength"><code>maxlength</code></a> (el nombre màxim de caràcters que es poden introduir a la caixa).</li> + <li>Són compatibles amb la funció de <a href="/en-US/docs/HTML/Element/input#attr-spellcheck" title="/en-US/docs/HTML/Element/input#attr-spellcheck">revisió ortogràfica</a> (utilitzant l'atribut <a href="/en-US/docs/Web/HTML/Attributes/spellcheck"><code>spellcheck</code></a>), si el navegador hi és compatible.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: L’element {{htmlelement("input")}} és únic entre els elements d’HTML perquè pot adoptar moltes formes diferents segons el valor del seu atribut <code><a href="/en-US/docs/Web/HTML/Attributes/type">type</a></code>. S'utilitza per a crear la majoria de tipus de controls de formulari, que inclouen camps de text d'una sola línia, controls d'hora i data, controls sense entrada de text com ara caixes de selecció, botons d'opció i selectors de colors, i botons.</p> +</div> + +<h3 id="Camps_de_text_duna_sola_línia">Camps de text d'una sola línia</h3> + +<p>Un camp de text d'una sola línia es crea en assignar a l'atribut {{htmlattrxref("type","input")}} d’un element {{HTMLElement("input")}} el valor <code>text</code>, o si l’atribut {{htmlattrxref("type","input")}} s’omet (perquè el valor per defecte d’aquest atribut és <code>text</code>). El valor <code>text</code> d’aquest atribut és també el valor alternatiu que el navegador utilitza si el valor que especifiques per a l’atribut {{htmlattrxref("type","input")}} li és desconegut (per exemple, si especifiques <code>type="color"</code> i el navegador no és compatible amb els selectors de color).</p> + +<div class="note"> +<p><strong>Nota</strong>: Consulta exemples de tots els tipus de camp de text d’una sola línia a GitHub, en el fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> (també pots consultar l’<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">exemple en viu</a>).</p> +</div> + +<p>A continuació es mostra un exemple bàsic de camp de text d'una sola línia:</p> + +<pre class="brush: html notranslate"><input type="text" id="comment" name="comment" value="I'm a text field"></pre> + +<p>Els camps de text d'una sola línia només tenen una restricció: si escrius text amb salts de línia, el navegador elimina els salts de línia abans d'enviar les dades al servidor.</p> + +<p><em>La captura de pantalla següent mostra els tipus de controls d’entrada de text predeterminat, amb el focus i desactivat en Firefox 71 i Safari amb macOS i en Chrome 79 i Edge 18 amb Windows 10.</em></p> + +<p><img alt="Captura de pantalla que mostra els estils de l’atribut en els estats predeterminat, amb el focus i desactivat per a un control d’entrada de text en Firefox, Safari, Chrome i Edge." src="https://mdn.mozillademos.org/files/17021/disabled.png" style="height: 113px; width: 442px;"></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: L'HTML5 va millorar el camp de text d'una sola línea bàsic original afegint valors especials per a l’atribut {{htmlattrxref("type","input")}} que aplica restriccions de validació específiques i altres funcions, per exemple a l'hora d'introduir adreces URL o números. Les tractarem en l’article següent: <a href="/en-US/docs/Learn/Forms/HTML5_input_types">tipus d’entrada HTML5</a>.</p> +</div> + +<h4 id="Camps_de_contrasenya">Camps de contrasenya</h4> + +<p>Un dels tipus d’entrada de text originals era el tipus de camp de text per a introduir una contrasenya (<code>password</code>):</p> + +<pre class="brush: html notranslate"><input type="password" id="pwd" name="pwd"></pre> + +<p>El valor de contrasenya (<code>password</code>) no afegeix cap restricció especial al text que s’introdueix al camp, però n’amaga el valor (per exemple, amb punts o asteriscs) i impedeix que altres usuaris el puguin llegir.</p> + +<p>Tingues en compte que es tracta només d’una funció d’interfície d’usuari; si no és que envies el formulari d’una manera segura, s’enviarà un text pla, i això no és aconsellable per a la seguretat. Una persona maliciosa podria interceptar les teves dades i robar-te contrasenyes, dades de la targeta de crèdit o qualsevol cosa que hagis enviat. La millor manera de protegir els usuaris d’això és allotjar les pàgines que incloguin formularis en una connexió segura (és a dir, una adreça <code>https://</code>...), perquè les dades se xifrin abans d’enviar-se.</p> + +<p>Els navegadors reconeixen les implicacions de seguretat de l'enviament de dades del formulari per una connexió no segura i disposen de missatges d’advertiments per a dissuadir els usuaris d'utilitzar formularis no segurs. Per a obtenir més informació sobre el que implementa Firefox, consulta l’article <a href="/ca/docs/Security/InsecurePasswords">Contrasenyes insegures</a>.</p> + +<h3 id="Contingut_ocult">Contingut ocult</h3> + +<p>Un altre control de text original és el tipus d’entrada <code>hidden</code>. S'utilitza per a crear un control de formulari que és invisible per a l'usuari, però que s'envia al servidor juntament amb la resta de dades del formulari. Per exemple, pot ser que vulguis enviar una marca de temps al servidor que indiqui quan s’ha fet una comanda. Com que és un control ocult, l’usuari no el pot veure ni editar-ne el valor de manera intencionada, mai no rep el focus i un lector de pantalla tampoc no el detecta.</p> + +<pre class="brush: html notranslate"><input type="hidden" id="timestamp" name="timestamp" value="1286705410"> +</pre> + +<p>Quan crees aquest element, cal que hi configuris els atributs <code>name</code> i <code>value</code>. El valor es pot configurar dinàmicament amb JavaScript. El tipus d’entrada <code>hidden</code> no hauria de tenir cap etiqueta associada.</p> + +<p>Amb HTML5 es van afegir altres tipus d'entrada de text, com {{HTMLElement("input/search", "search")}}, {{HTMLElement("input/url", "url")}} i {{HTMLElement("input/tel", "tel")}}. Es tracten en el tutorial següent: tipus d’entrada HTML5.</p> + +<h2 id="Elements_de_selecció_caselles_de_selecció_i_botons_dopció">Elements de selecció: caselles de selecció i botons d'opció</h2> + +<p>Els elements de selecció (o <em>checkable items</em>, en anglès) són controls dels quals pots canviar l’estat fent-hi clic a sobre o en les etiquetes que hi estan associades. Hi ha dos tipus d’elements de selecció: la casella de selecció, o <em>check box</em>, i el botó d'opció, o <em>radio button</em>. Tots dos utilitzen l’atribut <a href="/en-US/docs/Web/HTML/Attributes//checked"><code>checked</code></a> per indicar si el control està en estat seleccionat per defecte o no.</p> + +<p>Val la pena assenyalar que aquests controls no es comporten exactament igual que altres controls de formulari. Per a la majoria de controls de formulari, un cop validat el formulari s’envien tots els controls que tenen un atribut <a href="/en-US/docs/Web/HTML/Attributes/name"><code>name</code></a>, fins i tot si no se n’ha omplert el valor. En el cas dels elements de selecció, els valors s’envien només si estan seleccionats. Si no ho estan, no s'envia res, ni tan sols el nom. Si estan seleccionats però no tenen cap valor, el nom s'envia amb el valor <em>on</em>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar els exemples d'aquesta secció a GitHub, en el fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> (o també consultar-ne l’<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">exemple en viu</a>).</p> +</div> + +<p>Per a assolir una usabilitat/accessibilitat màxima, es recomana delimitar cada llista d’elements que estan relacionats entre si dins d'un element {{htmlelement("fieldset")}} amb un element {{htmlelement("legend")}} que ofereixi una descripció general de la llista. Cada parella d'elements {{htmlelement("label")}}/{{htmlelement("input")}} hauria d’estar continguda en un element de llista (o similar) propi. L'element associat {{htmlelement('label')}} se situa en general immediatament a continuació del botó d'opció o de la caixa de verificació, i les instruccions del grup de botons d'opció o caselles de selecció solen ser el contingut de l'element {{htmlelement("legend")}}. Observa els exemples estructurals que et presentem en l’enllaç anterior.</p> + +<h3 id="Caselles_de_verificació">Caselles de verificació</h3> + +<p>Una casella de verificació es crea amb l’element {{HTMLElement("input")}} i un atribut <a href="/en-US/docs/Web/HTML/Attributes/type"><code>type</code></a> amb el valor {{HTMLElement("input/checkbox", "checkbox")}}.</p> + +<pre class="brush: html notranslate"><input type="checkbox" id="carrots" name="carrots" value="carrots" checked> +</pre> + +<p>Si s’hi inclou l’atribut <code><a href="/en-US/docs/Web/HTML/Attributes/checked">checked</a></code>, la casella de verificació es marca automàticament en carregar-se la pàgina. Si s’hi fa clic, en la casella de verificació o en l’etiqueta associada, la casella de verificació canvia entre els estats activat o desactivat.</p> + +<p>Les captures de pantalla següents mostren les caselles de verificació en els estats per defecte, amb el focus i desactivat en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10:</p> + +<p><img alt="Caselles de verificació en els estats per defecte, amb el focus i desactivat en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10" src="https://mdn.mozillademos.org/files/17024/checkboxes.png" style="height: 203px; width: 293px;"></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: La pseudoclasse {{cssxref('<code>:default')}}</code> selecciona les caselles de verificació i els botons d'opció que presenten l'atribut <code><a href="/en-US/docs/Web/HTML/Attributes/checked">checked</a></code> en el moment de carregar-se la pàgina, encara que ja no estiguin en l’estat <code>checked</code>. La pseudoclasse <code>{{cssxref(':checked')}}</code> selecciona només els elements que estan en estat <code>checked</code>.</p> +</div> + +<p id="Radio_button">A causa de la característica activada-desactivada que presenten les caselles de verificació, es consideren botons de commutació i molts desenvolupadors i dissenyadors han estès l’estil per defecte de la casella de selecció per a crear botons que semblen interruptors. Pots consultar-ne un <a href="https://mdn.github.io/learning-area/html/forms/toggle-switch-example/">exemple en acció aquí</a> (o també pots consultar-ne el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/toggle-switch-example/index.html">codi d’origen</a>).</p> + +<h3 id="Botons_dopció">Botons d'opció</h3> + +<p>Un botó d'opció es crea amb l’element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor <code>radio</code>:</p> + +<pre class="brush: html notranslate"><input type="radio" id="soup" name="meal" checked></pre> + +<p>És possible associar diversos botons de ràdio. Si comparteixen el mateix valor de l’atribut {{htmlattrxref("name","input")}}, es considera que estan en el mateix grup de botons. Només és possible marcar un botó d’un grup determinat cada vegada; això vol dir que quan se’n clica un, tots els altres es desmarquen automàticament. Quan el formulari s’envia, només s’envia el valor del botó d'opció seleccionat. Si no se'n selecciona cap, es considera que el conjunt de botons d'opció està en un estat desconegut i no s’envia cap valor amb el formulari. Quan s’ha clicat un dels botons d'opció d’un mateix grup de botons, no és possible desmarcar tots els botons sense reiniciar el formulari.</p> + +<pre class="brush: html notranslate"><fieldset> + <legend>Quin és el teu menjar preferit?</legend> + <ul> + <li> + <label for="soup">Sopa </label> + <input type="radio" id="soup" name="meal" value="soup" checked> + </li> + <li> + <label for="curry">Curry </label> + <input type="radio" id="curry" name="meal" value="curry"> + </li> + <li> + <label for="pizza">Pizza </label> + <input type="radio" id="pizza" name="meal" value="pizza"> + </li> + </ul> +</fieldset></pre> + +<p>Les captures de pantalla següents mostren els botons d'opció en els estats no marcat i marcat, amb el focus i desactivats: en Firefox 71 i Safari 13 amb MacOs i Chrome 79 i en Edge 18 amb Windows 10.</p> + +<p><img alt="Botons d'opció en Firefox 71 i Safari 13 amb Mac i Chrome 79 i en Edge 18 amb Windows 10" src="https://mdn.mozillademos.org/files/17022/radios.png" style="height: 142px; width: 196px;"></p> + +<h2 id="Botons_reals">Botons reals</h2> + +<p>En realitat, els botons d'opció no són botons, malgrat el nom. Ara anirem una mica més enllà i veurem botons autèntics! Hi ha tres tipus d’entrada que proporcionen botons:</p> + +<dl> + <dt><code>submit</code></dt> + <dd>Envien les dades del formulari al servidor. Per als elements {{HTMLElement("button")}}, si s’omet l'atribut <code>type</code> (o es posa un valor de <code>type</code> no vàlid), s’obté un botó d'enviament.</dd> + <dt><code>reset</code></dt> + <dd>Restableixen tots els controls de formulari als valors predeterminats.</dd> + <dt><code>button</code></dt> + <dd>No presenten cap efecte automàtic, però es poden personalitzar amb codi JavaScript.</dd> +</dl> + +<p>A més, l’element {{htmlelement("button")}} pot prendre un atribut <code>type</code> i imitar aquests tres tipus d'entrada. La diferència principal entre els dos elements és que els elements <code><button></code> autèntics admeten moltes més opcions d’estil.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: També es pot representar com un botó el tipus d’entrada <code>image</code>. El tractarem més endavant també.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar els exemples d'aquesta secció a GitHub, en els fitxers <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html">button-examples.html</a> (o també pots consultar l’<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html">exemple en viu</a>).</p> +</div> + +<p>A continuació pots trobar exemples de cada tipus d’entrada <code><input></code> de tipus botó, juntament amb el tipus de botó equivalent.</p> + +<h3 id="submit">submit</h3> + +<pre class="brush: html notranslate"><button type="submit"> + Aquest és un <strong>botó Enviar</strong> +</button> + +<input type="submit" value="Aquest és un botó Enviar"></pre> + +<h3 id="reset">reset</h3> + +<pre class="brush: html notranslate"><button type="reset"> + Aquest és un <strong>botó Reiniciar</strong> +</button> + +<Input type = "reset" value = "Aquest és un botó Reiniciar"></pre> + +<h3 id="anonymous">anonymous</h3> + +<pre class="brush: html notranslate"><button type="button"> + Aquest és un <strong>botó anònim</strong> +</button> + +<input type="button" value="Aquest és un botó anònim"></pre> + +<p>Els botons sempre es comporten igual, tant si fas servir un element {{HTMLElement("button")}} com un element {{HTMLElement("input")}}. Però, com pots veure en els exemples, els elements {{HTMLElement("button")}} et permeten aplicar HTML al contingut inclòs entre les etiquetes <code><button></code> d'obertura i de tancament. En canvi, els elements {{HTMLElement("input")}} són elements buits; el contingut que s’hi mostra s’insereix dins de l’atribut <code>value</code>, i per tant només accepten contingut textual.</p> + +<p>Els exemples següents mostren els tipus d’entrada per defecte dels botons en els estats predeterminat, amb el focus i desactivat: en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10.</p> + +<p><img alt="Tipus d’entrada per defecte dels botons en els estats predeterminat, amb el focus i desactivat: en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10" src="https://mdn.mozillademos.org/files/17023/buttons.png" style="height: 182px; width: 286px;"></p> + +<h3 id="Botons_imatge">Botons imatge</h3> + +<p>El control <strong>botó imatge</strong> es comporta exactament com un element {{HTMLElement("img")}}, però passa a comportar-se com un botó de validació quan un usuari hi fa clic.</p> + +<p>Un botó imatge es crea amb un element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor <code>image</code>. Aquest element admet exactament el mateix conjunt d’atributs que l’element {{HTMLElement("img")}}, i a més, tots els atributs que són compatibles amb els altres botons de formulari.</p> + +<pre class="brush: html notranslate"><input type="image" alt="Fes-me clic!" src="my-img.png" width="80" height="30"></pre> + +<p>Si per a validar el formulari s’utilitza un botó imatge, aquest control no envia el seu valor, sinó que s’envien les coordenades X i Y del clic que s’ha fet en la imatge (les coordenades són relatives a la imatge, és a dir, que la part superior esquerra de la imatge representa les coordenades (0, 0)). Les coordenades s’envien com dos parells clau/valor:</p> + +<ul> + <li>La clau del valor X és el valor de l’atribut {{htmlattrxref("name","input")}} seguit de la cadena «<em>.x</em>».</li> + <li>La clau del valor Y és el valor de l’atribut {{htmlattrxref("name","input")}} seguit de la cadena «<em>.y</em>»</li> +</ul> + +<p>Així, per exemple, observa que en fer clic a les coordenades (123, 456) de la imatge i enviar pel mètode <code>get</code>, aquests valors s’annexen a l’URL de la manera següent:</p> + +<pre class="notranslate">http://foo.com?pos.x=123&pos.y=456</pre> + +<p>Aquesta és una manera molt còmoda de construir un «mapa interactiu». La manera d’enviar i recuperar aquests valors es detalla en l’article <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari</a>.</p> + +<h2 id="Selector_de_fitxers">Selector de fitxers</h2> + +<p>Un últim tipus <code><input></code> que ens va arribar amb l'HTML inicial és el tipus entrada de fitxer. Els formularis poden enviar fitxers a un servidor (aquesta acció específica també es detalla en l’article <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari</a>). El control de selecció de fitxers es pot utilitzar per triar un o més fitxers que es volen enviar.</p> + +<p>Pots crear un <a href="/en-US/docs/Web/HTML/Element/input/file">control de selecció de fitxers</a> amb l’element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor <code>file</code>. Pots restringir els tipus de fitxers que se seleccionen amb l’atribut {{htmlattrxref("accept","input")}}. A més, pots deixar que l’usuari triï més d’un fitxer si hi afegeixes l’atribut {{htmlattrxref("multiple","input")}}.</p> + +<h4 id="Exemple">Exemple</h4> + +<p>En aquest exemple es crea un selector de fitxers que sol·licita fitxers gràfics d’imatge. En aquest cas, l'usuari té la possibilitat de seleccionar diversos fitxers.</p> + +<pre class="brush: html notranslate"><input type="file" name="file" id="file" accept="image/*" multiple></pre> + +<p>En alguns dispositius mòbils, el selector de fitxers pot accedir a fotos, vídeos i àudio capturats directament per la càmera i el micròfon del dispositiu i afegir a l’atribut <code>accept</code> informació sobre la captura com ara:</p> + +<pre class="notranslate"><input type="file" accept="image/*;capture=camera"> +<input type="file" accept="video/*;capture=camcorder"> +<input type="file" accept="audio/*;capture=microphone"></pre> + +<h2 id="Atributs_comuns">Atributs comuns</h2> + +<p>Molts dels elements utilitzats per a definir controls de formulari tenen atributs específics propis. Això no obstant, hi ha un conjunt d’atributs comuns a tots els elements de formulari. Ja n'has conegut uns quants, però a continuació et presentem una llista d’aquests atributs comuns, perquè els tinguis com a referència:</p> + +<table> + <thead> + <tr> + <th scope="col">Nom de l'atribut</th> + <th scope="col">Valor per defecte</th> + <th scope="col">Descripció</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Web/HTML/Attributes/autofocus">autofocus</a></code></td> + <td>false</td> + <td>Aquest atribut booleà permet especificar que un element adquireix el focus d'entrada automàticament quan es carrega la pàgina. En un document només hi pot haver un element associat a un formulari que tingui especificat aquest atribut.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/HTML/Attributes/disabled">disabled</a></code></td> + <td>false</td> + <td>Aquest atribut booleà indica que l'usuari no pot interactuar amb l'element. Si aquest atribut no s'especifica, l'element hereta la configuració de l'element que el conté, per exemple, {{HTMLElement("fieldset")}}; si no hi ha cap element contenidor que tingui establert l'atribut <code>disabled</code>, l'element està habilitat.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/HTML/Attributes/form">form</a></code></td> + <td></td> + <td>L’element <code><form></code> s’utilitza per a associar el control al formulari, quan aquest no hi està imbricat. El valor de l’atribut ha de ser l’atribut <code>id</code> d’un element {{HTMLElement("form")}} del mateix document. D’aquesta manera pots associar un formulari un control de formulari que n’estigui fora, encara que sigui dins d’un formulari diferent.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/HTML/Attributes/name">name</a></code></td> + <td></td> + <td>El nom de l'element; s'envia amb les dades del formulari.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/HTML/Attributes/value">value</a></code></td> + <td></td> + <td>El valor inicial de l'element.</td> + </tr> + </tbody> +</table> + +<h2 id="Resum">Resum</h2> + +<p>Aquest article ha exposat els tipus d’entrada més antics: el conjunt original introduït els primers dies de l’HTML, que és compatible amb tots els navegadors. En l'article següent analitzarem els valors més recents de l’atribut <code>type</code>, que s’han afegit en HTML5.</p> + +<p>{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">El teu primer formulari HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Com estructurar un formulari HTML</a></li> + <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Els controls de formulari bàsics originaris</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/HTML5_input_types">Els tipus d'entrada de l’HTML5</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Additional_form_controls">Altres controls de formulari </a></li> + <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Aplicar estils a formularis web</a></li> + <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Aplicació avançada d’estil a formularis </a></li> + <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">Pseudoclasses d’interfície d’usuari (UI)</a></li> + <li><a href="/en-US/docs/Learn/Forms/Form_validation">Validació del formulari de la banda del client</a></li> + <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari</a></li> +</ul> + +<h3 id="Temes_avançats">Temes avançats</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Com crear controls de formulari adaptats a client</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Enviar formularis amb JavaScript</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Taula de compatibilitat de controls de formulari de codi propietari</a></li> +</ul> diff --git a/files/ca/learn/html/forms/el_teu_primer_formulari/index.html b/files/ca/learn/html/forms/el_teu_primer_formulari/index.html new file mode 100644 index 0000000000..3f327d4494 --- /dev/null +++ b/files/ca/learn/html/forms/el_teu_primer_formulari/index.html @@ -0,0 +1,298 @@ +--- +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"><form action="/my-handling-form-page" method="post"> + +</form></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"><form action="/my-handling-form-page" method="post"> + <ul> + <li> + <label for="name">Nom:</label> + <input type="text" id="name" name="user_name"> + </li> + <li> + <label for="mail">Correu electrònic:</label> + input type="email" id="mail" name="user_mail"> + </li> + <li> + <label for="msg">Missatge:</label> + <textarea id="msg" name="user_message"></textarea> + </li> + </ul> +</form></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><input></code> en contraposició a <code><textarea></textarea></code>. Aquesta és una de les curiositats de l’HTML. L’etiqueta <code><input></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"><input type="text" value="per defecte aquest element s'omple amb aquest text"></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"><textarea> +per defecte aquest element s'omple amb aquest text +</textarea></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></form></code>:</p> + +<pre class="brush:html; notranslate"><li class="button"> + <button type="submit">Envia el teu missatge</button> +</li></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><input type="submit"></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"><style> + +</style></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"><form action="/my-handling-form-page" method="post"> + <ul> + <li> + <label for="name">Nom:</label> + <input type="text" id="name" name="user_name" /> + </li> + <li> + <label for="mail">Correu electrònic:</label> + <input type="email" id="mail" name="user_email" /> + </li> + <li> + <label for="msg">Missatge:</label> + <textarea id="msg" name="user_message"></textarea> + </li> + + ... +</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> diff --git a/files/ca/learn/html/forms/index.html b/files/ca/learn/html/forms/index.html new file mode 100644 index 0000000000..bfd01dcf91 --- /dev/null +++ b/files/ca/learn/html/forms/index.html @@ -0,0 +1,356 @@ +--- +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> diff --git a/files/ca/learn/html/forms/validacio_formularis/index.html b/files/ca/learn/html/forms/validacio_formularis/index.html new file mode 100644 index 0000000000..0b76183d7e --- /dev/null +++ b/files/ca/learn/html/forms/validacio_formularis/index.html @@ -0,0 +1,829 @@ +--- +title: Validació de formularis del costat del client +slug: Learn/HTML/Forms/Validacio_formularis +translation_of: Learn/Forms/Form_validation +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div> + +<p>Abans d’enviar dades al servidor és important assegurar-se que s’emplenen tots els controls de formulari necessaris en el format correcte. Es denomina <strong>validació de formularis del costat del client</strong>, i ajuda que les dades enviades coincideixin amb els requisits establerts en els diversos controls de formulari. Aquest article et permet conèixer els conceptes bàsics i veure exemples de validació de formularis del costat del client.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica i nocions d'<a href="/ca/docs/Learn/HTML">HTML</a>, <a href="/ca/docs/Learn/CSS">CSS</a> i <a href="/ca/docs/Learn/JavaScript">JavaScript</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Entendre què és la validació de formularis de costat del client, per què és important i conèixer-ne diverses tècniques d’implementació.</td> + </tr> + </tbody> +</table> + +<p>La validació del costat del client és una comprovació inicial i una característica important que garanteix una bona experiència d’usuari; si es detecten dades no vàlides del costat del client, l'usuari pot corregir-les immediatament. Si van al servidor i aquest les rebutja, es genera un retard perquè les dades s’envien de tornada a la banda del client perquè l'usuari les corregeixi.</p> + +<p>Tanmateix, la validació del costat del client <em>no s'ha de considerar</em> una mesura de seguretat exhaustiva. Les aplicacions sempre han de dur a terme comprovacions de seguretat de qualsevol informació que s’envia en un formulari <em>tant del costat del servidor</em> com <strong>també</strong> <em>del costat del client</em>, perquè la validació del client és molt fàcil de desactivar i qualsevol usuari maliciós pot enviar fàcilment dades incorrectes al teu servidor. Llegeix <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">La seguretat dels llocs web</a> per a fer-te una idea de què <em>podria</em> passar; implementar la validació del costat del servidor és fora de l’àmbit d’aquest mòdul, però l’has de tenir en compte.</p> + +<h2 id="Què_és_la_validació_de_formularis">Què és la validació de formularis?</h2> + +<p>Ves a qualsevol lloc web popular que tingui un formulari d’inscripció i observa que et fan comentaris quan no introdueixes les dades en el format que s’espera. Rebràs missatges com ara:</p> + +<ul> + <li>«Aquest camp és obligatori» (no es pot deixar en blanc).</li> + <li>«Si et plau, introdueix el número de telèfon en el format xxx-xxxx» (cal un format de dades específic que es consideri vàlid).</li> + <li>«Si et plau, introdueix una adreça de correu electrònic vàlida» (les dades que has introduït no tenen el format adequat).</li> + <li>«La contrasenya ha de tenir entre 8 i 30 caràcters i ha de contenir una lletra majúscula, un símbol i un número» (cal un format de dades molt específic).</li> +</ul> + +<p>Això es coneix com <strong>validació de formulari</strong>. Quan introdueixes dades, el navegador i/o el servidor web comproven que les dades estan en el format correcte i són dins de les restriccions que l’aplicació estableix. La validació que es fa en el navegador s’anomena <strong>validació del costat del client</strong>, mentre que la validació que es fa en el servidor s’anomena <strong>validació del costat del servidor</strong>. En aquest article ens centrem en la validació del costat del client.</p> + +<p>Si la informació està en el format correcte, l'aplicació permet que les dades que les dades s’enviïn al servidor i (normalment) es guarden en una base de dades; si la informació no té el format correcte, es proporciona a l'usuari un missatge d'error en què li explica què ha de corregir, i s'ha de tornar a provar.</p> + +<p>Volem fer que l’emplenament dels formularis web sigui tan fàcil com sigui possible. Aleshores, per què insistim que cal validar els nostres formularis? Hi ha tres raons principals:</p> + +<ul> + <li><strong>Volem recollir les dades correctes en el format adequat.</strong> Les aplicacions no funcionen correctament si les dades dels usuaris s’emmagatzemen en un format equivocat, si són incorrectes, o senzillament si no n’hi ha.</li> + <li><strong>Volem protegir les dades dels nostres usuaris</strong>. Obligar els usuaris a introduir contrasenyes segures facilita la protecció de la informació del seu compte.</li> + <li><strong>Volem protegir-nos</strong>. Un usuari maliciós té moltes maneres de fer un mal ús dels formularis que no disposen de protecció, i pot danyar l’aplicació (consulta <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">La seguretat dels llocs web</a>). + <div class="warning"><strong>Atenció:</strong> No et refiïs mai de les dades que passen del client al servidor. Fins i tot quan el teu formulari es valida correctament i s’evita l’entrada de dades en format incorrecte del costat del client, un usuari maliciós encara pot modificar la sol·licitud de xarxa.</div> + </li> +</ul> + +<h2 id="Els_diferents_tipus_de_validació_del_costat_del_client"><strong>Els diferents tipus de validació del costat del client</strong></h2> + +<p>Els llocs web poden presentar dos tipus diferents de validació del costat del client</p> + +<ul> + <li>La <strong>validació de formulari integrada</strong> utilitza les funcions de validació dels formularis HTML5, que ja hem comentat en altres articles d'aquest mòdul. En general, aquesta validació no requereix JavaScript. La validació de formulari integrada té un rendiment més bo que el JavaScript, però no és tan personalitzable com la validació amb JavaScript.</li> + <li>La <strong>validació amb JavaScript</strong> es codifica en llenguatge JavaScript. Aquesta validació és totalment personalitzable, però cal crear-la tota (o bé fer servir una biblioteca de fitxers).</li> +</ul> + +<h2 id="Ús_de_la_validació_de_formulari_integrada">Ús de la validació de formulari integrada</h2> + +<p>Una de les característiques més significatives dels <a href="/en-US/docs/Learn/Forms/HTML5_input_types">controls de formulari HTML5</a> és la capacitat de validar la majoria de les dades de l'usuari sense dependre de JavaScript. Això es fa gràcies als atributs de validació dels elements del formulari. Ja n'hem vist uns quants, però en fem una recapitulació:</p> + +<ul> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code>: Especifica si cal emplenar un camp de formulari abans de poder enviar el formulari.</li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code> i <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>: Especifica la longitud mínima i màxima de les dades textuals (cadenes)</li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> i <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>: Especifica els valors mínims i màxims dels tipus d'entrada numèrics.</li> + <li><code>type</code>: Especifica si les dades han de ser un número, una adreça de correu electrònic o algun altre tipus específic preestablert.</li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code>: Especifica una <a href="/ca/docs/Web/JavaScript/Guide/Regular_Expressions">expressió regular</a> que defineix un patró que han de seguir les dades introduïdes.</li> +</ul> + +<p>Si les dades que s’introdueixen en un camp de formulari segueixen les regles especificades pels atributs anteriors, es consideren vàlides. Si no és així, es consideren no vàlides.</p> + +<p>Quan un element és vàlid, es compleixen els aspectes següents:</p> + +<ul> + <li>L’element coincideix amb la pseudoclasse {{cssxref(":valid")}} de CSS, que et permet aplicar un estil específic als elements vàlids.</li> + <li>Quan l’usuari valida les dades, el navegador envia el formulari, sempre que no hi hagi res més que ho impedeixi (per exemple, JavaScript).</li> +</ul> + +<p>Quan un element no és vàlid, es verifica el següent:</p> + +<ul> + <li>L'element coincideix amb la pseudoclasse {{cssxref(":invalid")}} de CSS, i de vegades amb altres pseudoclasses de la interfície d'usuari (per exemple, {{cssxref(":out-of-range")}}), segons el tipus d'error, i això et permet aplicar un estil específic als elements no vàlids.</li> + <li>Quan l’usuari valida les dades, el navegador bloca l’enviament del formulari i mostra un missatge d’error.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Els diversos errors que impedeixen enviar el formulari inclouen {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} o {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, o {{domxref('validityState.customError','customError')}}.</p> +</div> + +<h2 id="Exemples_de_validació_de_formularis_integrada"><strong>Exemples de validació de formularis integrada</strong></h2> + +<p>En aquesta secció provarem alguns dels atributs que hem esmentat abans.</p> + +<h3 id="Un_fitxer_d’inici_senzill">Un fitxer d’inici senzill</h3> + +<p>Comencem amb un exemple senzill: una entrada que permet triar si prefereixes un plàtan o una cirera. Aquest exemple inclou una entrada de text {{HTMLElement("input")}} senzilla amb una etiqueta {{htmlelement("label")}} associada i un {{htmlelement("button")}} de validació. En pots trobar el codi d’origen a GitHub, en el fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>, i l’exemple en viu a continuació.</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">Would you prefer a banana or a cherry?</label> + <input id="choose" name="i_like"> + <button>Submit</button> +</form></pre> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +}</pre> + +<p>{{EmbedLiveSample("Un_fitxer_d’inici_senzill", "100%", 80)}}</p> + +<p>Per començar, fes una còpia del fitxer <code>fruit-start.html</code> en un directori nou del teu disc dur.</p> + +<h3 id="L’atribut_required">L’atribut required</h3> + +<p>La característica de validació HTML5 més simple és l’atribut <code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code> (obligatori). Afegeix aquest atribut a l'element si vols que una entrada sigui obligatòria. Quan es defineix aquest atribut, l'element coincideix amb la pseudoclasse {{cssxref(':required')}} de la interfície d'usuari i el formulari no s’envia; si l'entrada és buida, en el moment de validar mostra un missatge d'error. L’entrada, tot i que és buida, es considera no vàlida i coincideix amb la pseudoclasse de la interfície d'usuari {{cssxref(':invalid')}}.</p> + +<p>Afegeix un atribut <code>required</code> a la teva entrada, com es mostra a continuació.</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">Would you prefer a banana or a cherry? (requested)</label> + <input id="choose" name="i_like" required> + <button>Submit</button> +</form></pre> + +<p>Tingues en compte el CSS que s'ha inclòs en el fitxer d'exemples:</p> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:invalid:required { + background-image: linear-gradient(to right, pink, lightgreen); +} + +input:valid { + border: 2px solid black; +}</pre> + +<p>Aquest CSS afegeix una vora vermella quan l’entrada no és vàlida i una vora negra més subtil quan és vàlida. També hi afegeix un degradat de fons quan l’entrada és necessària <em>i</em> no vàlida. Prova’n el comportament nou en l'exemple següent:</p> + +<p>{{EmbedLiveSample("L’atribut_required", "100%", 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple en directe a GitHub en el fitxer <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html">fruit-validation.html</a> (consulta’n també el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html">codi d’origen</a>.)</p> +</div> + +<p>Prova de validar el formulari sense cap valor. Observa que l’entrada no vàlida pren el focus, apareix un missatge d’error per defecte («Emplena aquest camp») i el formulari no s’envia.</p> + +<p>La presència de l'atribut <code>required</code> en qualsevol element que admet aquest atribut significa que l'element coincideix amb la pseudoclasse {{cssxref(':required')}}, tant si té un valor com si no. Si {{HTMLElement("input")}} no té cap valor, l’element <code>input</code> coincideix amb la pseudoclasse {{cssxref(':invalid')}}.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Si vols oferir una bona experiència d'usuari, indica quan són obligatoris els camps de formulari. No és només una bona experiència d’usuari, sinó que ho demanen les directrius d’<a href="/ca/docs/Learn/Accessibility">accessibilitat</a> de WCAG. A més, demana només les dades que necessites realment. Per què necessites saber, per exemple, el gènere o el títol d’algú?</p> +</div> + +<h3 id="Validar_una_expressió_regular">Validar una expressió regular</h3> + +<p>Una altra característica útil de la validació és l’atribut <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>, que espera una <a href="/ca/docs/Web/JavaScript/Guide/Regular_Expressions">expressió regular</a> com a valor. Una expressió regular (<em>regex</em>) és un patró que es pot utilitzar per a establir combinacions de caràcters en cadenes de text, de manera que resulten ideals per a la validació de formularis i serveixen per a molts altres usos en JavaScript.</p> + +<p>Els <em>regex</em> són força complexos i no pretenem ensenyar-los exhaustivament en aquest article. A continuació te’n mostrem alguns exemples perquè et puguis fer una idea bàsica de com funcionen.</p> + +<ul> + <li><code>a</code>: Coincideix amb un caràcter que és <code>a</code> (ni <code>b</code>, ni <code>aa</code>, etc.).</li> + <li><code>abc</code>: Coincideix amb <code>a</code>, seguit de <code>b</code> i de <code>c</code>.</li> + <li><code>ab?c</code>: Coincideix amb <code>a</code>, seguit opcionalment d’un sol <code>b</code>, seguit de <code>c</code> ( <code>ac</code> o <code>abc</code>)</li> + <li><code>ab*c</code>: Coincideix amb <code>a</code>, opcionalment seguit de qualsevol nombre de caràcters <code>b</code>, seguit de <code>c</code>. (<code>ac</code>, <code>abc</code>, <code>abbbbbc</code>, etc.).</li> + <li><code>a|b</code>: Coincideix amb un caràcter que és <code>a</code> o <code>b</code>.</li> + <li><code>abc|xyz</code>: Coincideix exactament amb <code>abc</code> o exactament amb <code>xyz</code> (però no amb <code>abcxyz</code> o <code>a</code> o <code>y</code>, etc.).</li> +</ul> + +<p>Hi ha moltes més possibilitats, que no presentem aquí. Per a obtenir-ne una llista completa i molts exemples, consulta la nostra documentació sobre expressions regulars.</p> + +<p>Posem-ho en pràctica amb un exemple. Afegeix al teu codi HTML un atribut <a href="/ca/docs/Web/JavaScript/Guide/Regular_Expressions"><code>pattern</code></a>, d'aquesta manera:</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">Would you prefer a banana or a cherry?</label> + <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry"> + <button>Submit</button> +</form> +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid {<strong> + </strong>border: 2px solid black; +}</pre> +</div> + +<p>Això ens proporciona l’actualització següent. Prova-ho:</p> + +<p>{{EmbedLiveSample("Validar_una_expressió_regular", "100%", 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple en directe a GitHub en el fitxer <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html">fruit-pattern.html</a> (consulta’n també el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">codi d’origen</a>).</p> +</div> + +<p>En aquest exemple, l’element {{HTMLElement("input")}} accepta un dels quatre valors possibles: les cadenes «banana», «Banana», «cherry» o «Cherry». Les expressions regulars distingeixen entre majúscules i minúscules, però hem eliminat aquesta característica utilitzant un patró «Aa» extra situat entre claudàtors.</p> + +<p>En aquest punt, intenta canviar el valor de l’atribut <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> per a igualar alguns dels exemples que has vist abans, i observa com això afecta els valors que pots introduir perquè que el valor d’entrada sigui vàlid. Prova d'escriure-hi alguna cosa i observa què passa. Intenta tant com sigui possible que estiguin relacionats amb la fruita perquè els teus exemples siguin coherents.</p> + +<p>Si un valor {{HTMLElement("input")}} no buit no coincideix amb el patró de l'expressió regular, <code>input</code> coincideix amb la pseudoclasse {{cssxref(':invalid')}}.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Alguns tipus d'elements {{HTMLElement("input")}} no necessiten validar una expressió regular amb l’atribut <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>. Si especifiques el tipus <code>email</code>, per exemple, el valor d’entrada es valida amb un patró d’adreça de correu electrònic ben formada, o amb un patró que coincideix amb una llista d’adreces de correu electrònic separades per comes si té l’atribut <a href="/en-US/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a>.</p> +</div> + +<div class="blockIndicator note"> +<p><strong><strong>Nota</strong>: </strong>L'element {{HTMLElement("textarea")}} no admet l'atribut <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>.</p> +</div> + +<h3 id="Restringir_la_longitud_de_les_entrades">Restringir la longitud de les entrades</h3> + +<p>Pots restringir la longitud de caràcters de tots els camps de text creats amb {{HTMLElement("input")}} o {{HTMLElement("textarea")}} amb els atributs <a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> i <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>. Un camp no és vàlid si té un valor que té menys caràcters que el valor assignat a <a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a>, o més que el valor assignat a <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>.</p> + +<p>Els navegadors sovint no permeten que l'usuari escrigui un valor més llarg del que s'espera en els camps de text. Una experiència d’usuari encara més bona que utilitzar només <code>maxlength</code> és proporcionar també comentaris de recompte de caràcters d’una manera accessible, i deixar editar el contingut fins que sigui d’una mida més reduïda. Un exemple d'això és el límit de caràcters de Twitter. Per a això pots utilitzar JavaScript, incloses les <a href="https://github.com/mimo84/bootstrap-maxlength">solucions que fan servir <code>maxlength</code></a>.</p> + +<h3 id="Restringir_els_valors_de_les_entrades">Restringir els valors de les entrades</h3> + +<p>Per als camps d’entrada de números (és a dir, <code><a href="/en-US/docs/Web/HTML/Element/input/number"><input type="number"></a></code>), es poden utilitzar els atributs <code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> i <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>, que proporcionen un rang de valors vàlids. Un camp que conté un valor que cau fora d'aquest interval no és vàlid.</p> + +<p>Observem-ne un altre exemple. Crea una còpia nova del fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>.</p> + +<p>A continuació suprimeix el contingut de l'element <code><body></code> i substitueix-lo pel següent:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="choose">Would you prefer a banana or a cherry?</label> + <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"> + </div> + <div> + <label for="number">How many would you like?</label> + <input type="number" id="number" name="amount" value="1" min="1" max="10"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<ul> + <li>Observa que aquí hem donat al camp de <code>text</code> una longitud mínima (<code>minlength</code>) i una longitud màxima (<code>maxlength</code>) de sis, la mateixa longitud que tenen <em>banana</em> i <em>cherry</em>.</li> + <li>També hem donat al camp <code>number</code> un valor <code>min</code> d’1 i un valor <code>max</code> de 10. Els números introduïts fora d'aquest interval es presenten com no vàlids; els usuaris no poden utilitzar les fletxes d’increment/decrement per a desplaçar el valor fora d’aquest interval. Si l’usuari introdueix manualment un número que està fora d’aquest interval, les dades no són vàlides. El número no és obligatori, de manera que eliminar el valor encara dona un valor vàlid.</li> +</ul> + +<div class="hidden"> +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +} + +div { + margin-bottom: 10px; +}</pre> +</div> + +<p>Aquí tens l’execució en viu de l’exemple:</p> + +<p>{{EmbedLiveSample("Restringir_els_valors_de_les_entrades", "100%", 100)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple en viu a GitHub en el fitxer <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html">fruit-length.html</a> (o també consultar-ne el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-length.html">codi d’origen</a>.)</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: <code><input type="number"></code> (i altres tipus, com ara <code>range</code> i <code>date</code>) també poden tenir un atribut <a href="/en-US/docs/Web/HTML/Attributes/step"><code>step</code></a>, que especifica quin increment augmenta o disminueix el valor quan s'utilitzen els controls d'entrada (com ara els botons numèrics d’increment i decrement). En l'exemple anterior no hem inclòs un atribut <code>step</code>, de manera que el valor per defecte és <code>1</code>. Això vol dir que els números de coma flotant (com ara el 3,2) també es mostren com a no vàlids.</p> +</div> + +<h3 id="Exemple_complet">Exemple complet</h3> + +<p>A continuació hi ha un exemple complet que mostra l'ús de les funcions de validació integrades en HTML. En primer lloc, una mica d'HTML:</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>fieldset</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>legend</span><span class="punctuation token">></span></span>Do you have a driver's license?<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>This field is mandatory<span class="punctuation token">"</span></span> <span class="attr-name token">aria-label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>legend</span><span class="punctuation token">></span></span> + <span class="comment token"><!-- While only one radio button in a same-named group can be selected at a time, + and therefore only one radio button in a same-named group having the "required" + attribute suffices in making a selection a requirement --></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>driver<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r1<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>yes<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Yes<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>driver<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r2<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>no<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>No<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>fieldset</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>n1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>How old are you?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="comment token"><!-- The pattern attribute can act as a fallback for browsers which + don't implement the number input type but support the pattern attribute. + Please note that browsers that support the pattern attribute will make it + fail silently when used with a number field. + Its usage here acts only as a fallback --></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>number<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>12<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>n1<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span> + <span class="attr-name token">pattern</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>\d+<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>What's your favorite fruit?<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>This field is mandatory<span class="punctuation token">"</span></span> <span class="attr-name token">aria-label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t1<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruit<span class="punctuation token">"</span></span> <span class="attr-name token">list</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>l1<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> + <span class="attr-name token">pattern</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>datalist</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>l1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Banana<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Cherry<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Apple<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Strawberry<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Lemon<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Orange<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>datalist</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>What's your e-mail address?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t2<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t3<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Leave a short message<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t3<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>msg<span class="punctuation token">"</span></span> <span class="attr-name token">maxlength</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>140<span class="punctuation token">"</span></span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span><span class="punctuation token">></span></span>Submit<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> + +<p>I ara, una mica de CSS per a aplicar estil al codi HTML:</p> + +<pre class="brush: css notranslate">form { + font: 1em sans-serif; + max-width: 320px; +} + +p > label { + display: block; +} + +input[type="text"], +input[type="email"], +input[type="number"], +textarea, +fieldset { + width: 100%; + border: 1px solid #333; + box-sizing: border-box; +} + +input:invalid { + box-shadow: 0 0 5px 1px red; +} + +input:focus:invalid { + box-shadow: none; +}</pre> + +<p>Això dona la sortida següent:</p> + +<p>{{EmbedLiveSample("Exemple_complet", "100%", 420)}}</p> + +<p>Consulta una llista completa d’atributs que es poden utilitzar per a restringir els valors d’entrada i els tipus d’entrada que els admeten en els <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes">atributs relacionats amb la validació</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple en viu a GitHub, en el fitxer <a href="https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html">full-example.html</a> (o consultar-ne també el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/full-example.html">codi d’origen</a>).</p> +</div> + +<h2 id="Validació_de_formularis_amb_JavaScript"><strong>Validació de formularis amb JavaScript</strong></h2> + +<p>Has d’utilitzar JavaScript si vols controlar l’aspecte dels missatges d’error originals o fer-los compatibles amb els navegadors antics que no admeten la validació de formularis integrada en HTML. En aquesta secció veurem les diferents maneres de fer això.</p> + +<h3 id="L’API_de_validació_de_restriccions">L’API de validació de restriccions</h3> + +<p>La majoria dels navegadors admeten l'<a href="/en-US/docs/Web/API/Constraint_validation">API de validació de restriccions</a>, que consta d'un conjunt de mètodes i propietats disponibles en les interfícies DOM per als elements de formulari següents:</p> + +<ul> + <li><code><a href="/en-US/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code> (representa un element <code><a href="/en-US/docs/Web/HTML/Element/button"><button></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></code> (representa un element <code><a href="/en-US/docs/Web/HTML/Element/fieldset"><fieldset></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code> (representa un element <code><a href="/en-US/docs/Web/HTML/Element/input"><input></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> (representa un element <code><a href="/en-US/docs/Web/HTML/Element/output"><output></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> (representa un element <code><a href="/en-US/docs/Web/HTML/Element/select"><select></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code> (representa un element <code><a href="/en-US/docs/Web/HTML/Element/textarea"><textarea></a></code>)</li> +</ul> + +<p id="Constraint_validation_API_properties">L’API de validació de restriccions posa a la disposició dels elements anteriors les propietats següents.</p> + +<ul> + <li><code>validationMessage</code>: Retorna un missatge localitzat que descriu les restriccions de validació que el control no satisfà (si n'hi ha). Si el control de formulari no és candidat a validació de restriccions (<code>willValidate</code> és <code>false</code>) o si el valor de l’element satisfà les restriccions (és vàlid), retorna una cadena buida.</li> + <li><code>validity</code>: Retorna un objecte <code>ValidityState</code> que conté diverses propietats que descriuen l'estat de validesa de l'element. Pots trobar tots els detalls de les propietats disponibles a la pàgina de referència {{domxref("ValidityState")}}; a continuació se n'enumeren uns quants dels més comuns: + <ul> + <li>{{domxref("ValidityState.patternMismatch", "patternMismatch")}}: Retorna <code>true</code> si el valor no coincideix amb el {{htmlattrxref("pattern", "input")}} especificat, i <code>false</code> si hi coincideix. Si és <code>true</code>, l'element coincideix amb la pseudoclasse {{cssxref(":invalid")}} de CSS.</li> + <li>{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}}: Retorna <code>true</code> si el valor és superior al màxim especificat per l’atribut {{htmlattrxref("max", "input")}}, o <code>false</code> si és inferior o igual al màxim. Si és <code>true</code>, l'element coincideix amb les pseudoclasses {{cssxref(":invalid")}} i {{cssxref(":out-of-range")}} de CSS.</li> + <li>{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}}: Retorna <code>true</code> si el valor és inferior al mínim especificat per l’atribut {{htmlattrxref("min", "input")}}, o <code>false</code> si és superior o igual al mínim. Si és <code>true</code>, l'element coincideix amb les pseudoclasses {{cssxref(":invalid")}} i {{cssxref(":out-of-range")}} de CSS.</li> + <li>{{domxref("ValidityState.typeMismatch", "typeMismatch")}}: Retorna <code>true</code> si el valor no està en la sintaxi requerida (quan {{htmlattrxref("type", "input")}} és un correu electrònic o una url), o <code>false</code> si la sintaxi és correcta. Si és <code>true</code>, l'element coincideix amb la pseudoclasse {{cssxref(":invalid")}} de CSS.</li> + <li><code>valid</code>: Retorna <code>true</code> si l'element compleix totes les limitacions de validació i es considera que és vàlid, o <code>false</code> si falla alguna restricció. Si és <code>true</code>, l'element coincideix amb la pseudoclasse {{cssxref(":valid")}} de CSS; o amb la pseudo-classe {{cssxref(":invalid")}} de CSS en cas contrari.</li> + <li><code>valueMissing</code>: Retorna <code>true</code> si l'element té un atribut {{htmlattrxref("required", "input")}} sense cap valor, o <code>false</code> en cas contrari. Si és <code>true</code>, l'element coincideix amb la pseudoclasse {{cssxref(":invalid")}} de CSS.</li> + </ul> + </li> + <li><code>willValidate</code>: Retorna <code>true</code> si l'element es valida en enviar-se el formulari; <code>false</code> en cas contrari.</li> +</ul> + +<p id="Constraint_validation_API_methods">L'API de validació de restriccions també ofereix als elements anteriors els mètodes següents:</p> + +<ul> + <li><code>checkValidity()</code>: Retorna <code>true</code> si el valor de l'element no té problemes de validesa; <code>false</code> en cas contrari. Si l'element no és vàlid, aquest mètode també activa un esdeveniment no vàlid (<a href="/en-US/docs/Web/API/HTMLInputElement/invalid_event"><code>invalid</code> event</a>) sobre l'element.</li> + <li><code>setCustomValidity(<em>message</em>)</code>: Afegeix un missatge d'error personalitzat a l'element; si configures un missatge d’error personalitzat, es considera que l’element no és vàlid i es mostra l’error especificat. Això et permet utilitzar el codi JavaScript per a establir un error de validació diferent dels que ofereixen les restriccions de validació estàndard en HTML5. El missatge es mostra a l'usuari en informar del problema.</li> +</ul> + +<h4 id="Missatges_d’error_personalitzats"><strong>Missatges d’error personalitzats</strong></h4> + +<p>Com has vist en els exemples de restricció de validació HTML5 anteriors, cada vegada que un usuari intenta enviar un formulari no vàlid, el navegador mostra un missatge d'error. La manera com es mostra aquest missatge depèn del navegador.</p> + +<p>Aquests missatges automatitzats tenen dos inconvenients:</p> + +<ul> + <li>No hi ha una manera estàndard de canviar-ne l’aparença amb CSS.</li> + <li>Depenen de la configuració regional del navegador, que significa que pots tenir una pàgina en un idioma, però que un missatge d'error es mostri en un altre idioma, com es pot veure a la captura de pantalla de Firefox següent.</li> +</ul> + +<p><img alt="Exemple d’un missatge d’error a Firefox en francès en una pàgina en anglès" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></p> + +<p>La personalització d’aquests missatges d’error és un dels casos d’ús més comuns de l’<a href="/en-US/docs/Web/API/Constraint_validation" rel="external">API de validació de restriccions</a>. Vegem la manera de fer-ho amb un exemple senzill.</p> + +<p>Començarem amb alguns elements senzills d’HTML (no dubtis a posar-ho en un fitxer HTML en blanc; utilitza una còpia nova del fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> com a base, si vols):</p> + +<pre class="brush: html notranslate"><form> + <label for="mail">I would like you to provide me with an e-mail address: </label> + <input type="email" id="mail" name="mail"> + <button>Submit</button> +</form></pre> + +<p>I afegeix a la pàgina el JavaScript següent:</p> + +<pre class="brush: js notranslate">const email = document.getElementById("mail"); + +email.addEventListener("input", function (event) { + if (email.validity.typeMismatch) { + email.setCustomValidity(«I am expecting an e-mail address!»); + } else { + email.setCustomValidity(""); + } +});</pre> + +<p>Aquí emmagatzemem una referència a l’entrada de correu electrònic, i a continuació afegim un detector d’esdeveniments que executa el codi de <code>content</code> cada vegada que es modifica el valor dins de l’entrada.</p> + +<p>Dins del codi de <code>content</code>, comprovem si la propietat <code>validity.typeMismatch</code> de l’entrada de correu electrònic retorna <code>true</code>, que significa que el valor que conté no coincideix amb el patró d’una adreça de correu electrònic ben formada. Si és així, cridem el mètode <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a> amb un missatge personalitzat. Això fa que l’entrada no sigui vàlida, de manera que quan intentes enviar el formulari, l’enviament falla i es mostra el missatge d’error personalitzat.</p> + +<p>Si la propietat <code>validity.typeMismatch</code> retorna <code>false</code>, cridem el mètode <code>setCustomValidity()</code> amb una cadena buida. Això fa que l’entrada sigui vàlida, i el formulari s’envia.</p> + +<p>Pots provar-ho a continuació:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple en viu a GitHub en el fitxer <a href="https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html">custom-error-message.html</a> (consulta’n també el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/custom-error-message.html">codi d’origen</a>).</p> +</div> + +<h4 id="Un_exemple_més_detallat"><strong>Un exemple més detallat</strong></h4> + +<p>Ara que hem vist un exemple molt senzill; observem com podem utilitzar aquesta API per a crear una validació personalitzada una mica més complexa.</p> + +<p>En primer lloc, el codi HTML. Un cop més, no dubtis a construir-lo amb nosaltres:</p> + +<pre class="brush: html notranslate"><form novalidate> + <p> + <label for="mail"> + <span>Please enter an email address:</span> + <input type="email" id="mail" name="mail" required minlength="8"> + <span class="error" aria-live="polite"></span> + </label> + </p> + <button>Submit</button> +</form></pre> + +<p>Aquest formulari senzill utilitza l’atribut <code><a href="/en-US/docs/Web/HTML/Attributes/novalidate">novalidate</a></code>, que desactiva la validació automàtica del navegador; això permet que el nostre codi prengui el control de la validació. Però això no desactiva la compatibilitat per a l’API de validació de restriccions ni l’aplicació de pseudoclasses CSS com {{cssxref(":valid")}}, etc. Això vol dir que, tot i que el navegador no comprova automàticament la validesa del formulari abans d’enviar les dades, encara pots fer-ho tu mateix i dissenyar el formulari en conseqüència.</p> + +<p>La nostra entrada per validar és <code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code>, que està marcada com a <code>required</code> i té una longitud mínima (<code>minlength</code>) de 8 caràcters. Comprovem-ho amb el nostre codi i mostrem un missatge d'error personalitzat per a cada element.</p> + +<p>El nostre objectiu és mostrar els missatges d'error dins d'un element <code><span></code>. L'atribut <a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> està establert a <code><span></code> per a assegurar-nos que el missatge d'error personalitzat serà visible per a tothom, inclosos els usuaris que empren lectors de pantalla.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Un element clau aquí és el fet que establir l’atribut <code>novalidate</code> en el formulari impedeix el formulari de mostrar els quadres de diàleg de missatge d’error propis, i permet de mostrar els missatges d’error personalitzats en el DOM de la manera que escollim.</p> +</div> + +<p>Ara una mica de CSS bàsic per a millorar una mica l’aspecte del formulari i proporcionar informació visual quan les dades d’entrada no són vàlides:</p> + +<pre class="brush: css notranslate">body { + font: 1em sans-serif; + width: 200px; + padding: 0; + margin : 0 auto; +} + +p * { + display: block; +} + +input[type=email]{ + -webkit-appearance: none; + appearance: none; + + width: 100%; + border: 1px solid #333; + margin: 0; + + font-family: inherit; + font-size: 90%; + + box-sizing: border-box; +} + +/* Aquest és el nostre estil per als camps no vàlids */ +input:invalid{ + border-color: #900; + background-color: #FDD; +} + +input:focus:invalid { + outline: none; +} + +/* Aquest és l'estil per als nostres missatges d'error */ +.error { + width : 100%; + padding: 0; + + font-size: 80%; + color: white; + background-color: #900; + border-radius: 0 0 5px 5px; + + box-sizing: border-box; +} + +.error.active { + padding: 0.3em; +}</pre> + +<p>A continuació veurem el JavaScript que implementa la validació d'errors personalitzada.</p> + +<pre class="brush: js notranslate">// Hi ha moltes maneres de triar un node DOM; amb aquest obtenim el formulari en si i el control de formulari de tipus caixa d’entrada +// de correu electrònic, i també l’element span en què col·locarem el missatge d’error. +const form = document.getElementsByTagName('form')[0]; + +const email = document.getElementById('mail'); +const emailError = document.querySelector('#mail + span.error'); + +email.addEventListener('input', function (event) { + // Cada vegada que l’usuari escriu alguna cosa, comprovem si els + // camps del formulari són vàlids. + + if (email.validity.valid) { + // En cas que hi hagi un missatge d’error visible, si el camp + // és vàlid, n’eliminem el missatge d'error. + emailError.innerHTML = ''; // Restablim el contingut del missatge + emailError.className = 'error'; // Restablim l'estat visual del missatge + } else { + // Si encara hi ha un error, mostrem l'error correcte + ShowError(); + } +}); + +form.addEventListener('submit', function (event) { + // si el camp de correu electrònic és vàlid, enviem el formulari + + if(!email.validity.valid) { + // Si no és així, mostrem el missatge d'error corresponent + showError(); + // Aleshores, cancel·lem l’esdeveniment i evitem que s’enviï el formulari + event.preventDefault(); + } +}); + +function showError() { + if(email.validity.valueMissing) { + // Si el camp està buit + // mostra el missatge d'error següent. + emailError.textContent = 'You need to enter an e-mail address.'; + } else if(email.validity.typeMismatch) { + // Si el camp no conté una adreça de correu electrònic + // mostra el missatge d'error següent. + emailError.textContent = 'Entered value needs to be an e-mail address.'; + } else if(email.validity.tooShort) { + // Si les dades són massa curtes + // mostra el missatge d'error següent. + emailError.textContent = `el correu electrònic ha de tenir com a mínim $ {email.minLength} caràcters; n'heu introduït $ {email.value.length}. '; + } + + // Configura l’estil de manera adequada + emailError.className = 'error active'; +}</pre> + +<p>Els comentaris expliquen les coses força bé, però de manera breu:</p> + +<ul> + <li>Cada vegada que canviem el valor de l’entrada, comprovem si conté dades vàlides. Si n’hi ha, eliminem qualsevol missatge d'error que es mostri. Si les dades no són vàlides, executem <code>showError()</code> perquè es mostri l'error adequat.</li> + <li>Cada vegada que intentem enviar el formulari, tornem a comprovar si les dades són vàlides. En cas afirmatiu, enviem el formulari. Si no, executem <code>showError()</code> perquè es mostri l’error adequat i aturem l’enviament del formulari amb <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code>.</li> + <li>La funció <code>showError()</code> utilitza diverses propietats de l'objecte <code>validity</code> de l'entrada de text per a determinar de quin error es tracta, i a continuació mostra el missatge d'error que hi correspon.</li> +</ul> + +<p>Aquest és el resultat en viu:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple en viu a GitHub en el fitxer <a href="https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html">detailed-custom-validation.html</a> (consulta’n també el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/detailed-custom-validation.html">codi d’origen</a>).</p> +</div> + +<p>L'API de validació de restriccions t’ofereix una eina poderosa per a gestionar la validació de formularis i et proporciona un gran control sobre la interfície d'usuari, més enllà del que hi pots fer només amb l’HTML i el CSS.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Per obtenir més informació, consulta la nostra <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">guia de validació de restriccions</a> i la referència de l'<a href="/en-US/docs/Web/API/Constraint_validation">API de validació de restriccions</a>.</p> +</div> + +<h3 id="Validació_dels_formularis_sense_una_API_integrada">Validació dels formularis sense una API integrada</h3> + +<p>En alguns casos, com ara la compatibilitat amb navegadors antics o els <a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">controls personalitzats</a>, no podràs o no voldràs utilitzar l'API de validació de restriccions. Aleshores pots utilitzar JavaScript per a validar el teu formulari, només que l'hauràs d’escriure.</p> + +<p>Per a validar un formulari, planteja’t unes quantes preguntes:</p> + +<dl> + <dt><strong>Quin tipus de validació he de fer?</strong></dt> + <dd>Has de determinar com validar les dades: operacions amb variables de cadena, conversió de tipus, expressions regulars, etc. Tot depèn de tu.</dd> + <dt><strong>Què he de fer si el formulari no es valida?</strong></dt> + <dd>Això és clarament una qüestió de la interfície d'usuari. Has de decidir com es comporta el formulari. El formulari ha d’enviar les dades igualment? Has de destacar els camps que tenen un error? Has de mostrar missatges d’error?</dd> + <dt><strong>Com puc ajudar l’usuari a corregir dades no vàlides?</strong></dt> + <dd>Per a reduir la frustració de l’usuari és molt important proporcionar la informació més útil possible i orientar-lo en la correcció de les entrades. Has d’oferir suggeriments anticipats perquè sàpiguen què se n’espera, i missatges d’error clars. Si vols aprofitar els requisits de la interfície d'usuari de validació de formularis, aquí tens alguns articles útils: + <ul> + <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a> [Validació dels camps d’un formulari: L’enfocament de només errors]</li> + <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a> [Validació de formularis web: Bones pràctiques i tutorials]</li> + <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a> [Bones pràctiques per a suggeriments i validació de formularis web]</li> + <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a>[Validació en línia de formularis web]</li> + </ul> + <strong> </strong></dd> +</dl> + +<h4 id="Un_exemple_que_no_utilitza_lAPI_de_validació_de_restriccions"><strong>Un exemple que no utilitza l'API de validació de restriccions</strong></h4> + +<p>A continuació es mostra una versió simplificada de l'exemple anterior que funciona amb navegadors antics.</p> + +<p>L’HTML és gairebé el mateix; només n’hem tret les funcions de validació HTML.</p> + +<pre class="brush: html notranslate"><form> + <p> + <label for="mail"> + <span>Please enter an email address::</span> + <input type="text" class="mail" id="mail" name="mail"> + <span class="error" aria-live="polite"></span> + </label> + </p> + <!-- Alguns navegadors antics han de tenir l’atribut «type» + definit explícitament com «submit» en l'element «button» + <button type="submit">Submit</button> +</form></pre> + +<p>De la mateixa manera, el CSS no ha de canviar gaire; acabem de convertir la pseudoclasse {{cssxref(":invalid")}} de CSS en una classe real i hem evitat utilitzar el selector d'atributs que no funciona en Internet Explorer 6.</p> + +<pre class="brush: css notranslate">body { + font: 1em sans-serif; + width: 200px; + padding: 0; + margin : 0 auto; +} + +form { + max-width: 200px; +} + +p * { + display: block; +} + +input.mail { + -webkit-appearance: none; + + width: 100%; + border: 1px solid #333; + margin: 0; + + font-family: inherit; + font-size: 90%; + + box-sizing: border-box; +} + +/* Aquest és el nostre estil per als camps no vàlids */ +input.invalid{ + border-color: #900; + background-color: #FDD; +} + +input:focus.invalid { + outline: none; +} + +/* Aquest és l'estil dels nostres missatges d'error */ +.error { + width : 100%; + padding: 0; + + font-size: 80%; + color: white; + background-color: #900; + border-radius: 0 0 5px 5px; + box-sizing: border-box; +} + +.error.active { + padding: 0.3em; +}</pre> + +<p>Els grans canvis es produeixen en el codi JavaScript, que ha de fer molta més feina feixuga.</p> + +<pre class="brush: js notranslate">// Hi ha menys maneres de seleccionar un node DOM amb navegadors antics +const form = document.getElementsByTagName('form')[0]; +const email = document.getElementById('mail'); + +// A continuació es mostra un truc per a arribar al node següent d’elements germans en el DOM. +// Això és perillós perquè pots crear fàcilment un bucle infinit. +// En els navegadors moderns és preferible utilitzar element.nextElementSibling +let error = email; +while ((error = error.nextSibling).nodeType != 1); + +// segons l'especificació HTML5 +const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; + +// Molts navegadors antics no són compatibles amb el mètode addEventListener. +// Aquesta és una manera senzilla de tractar això; però no n’és l’única. +function addEvent(element, event, callback) { + let previousEventCallBack = element["on"+event]; + element["on"+event] = function (e) { + const output = callback(e); + + // Una crida que retorna «false» atura la cadena de devolució + // i interromp l'execució de l'esdeveniment de retorn de la crida + if (output === false) return false; + + if (typeof previousEventCallBack === 'function') { + output = previousEventCallBack(e); + if(output === false) return false; + } + } +}; + +// Ara podem reconstruir la nostra restricció de validació +// Com que no ens basem en cap pseudoclasse de CSS, hem +// d'establir explícitament la classe vàlida/invàlida en el nostre camp de correu electrònic +addEvent(window, "load", function () { + // Aquí comprovem si el camp està buit (recorda que no és un camp obligatori) + // Si no ho està, comprovem si el contingut és una adreça de correu electrònic ben formada. + const test = email.value.length === 0 || emailRegExp.test(email.value); + + email.className = test ? "valid" : "invalid"; +}); + +// Això defineix què passa quan l'usuari escriu en el camp +addEvent(email, "input", function () { + const test = email.value.length === 0 || emailRegExp.test(email.value); + if (test) { + email.className = "valid"; + error.innerHTML = ""; + error.className = "error"; + } else { + email.className = "invalid"; + } +}); + +// Això defineix què passa quan l’usuari intenta enviar les dades +addEvent(form, "submit", function () { + const test = email.value.length === 0 || emailRegExp.test(email.value); + + if (!test) { + email.className = "invalid"; + error.innerHTML = "I expect an e-mail, darling!"; + error.className = "error active"; + + // Alguns navegadors antics no admeten el mètode event.preventDefault () + return false; + } else { + email.className = "valid"; + error.innerHTML = ""; + error.className = "error"; + } +});</pre> + +<p>El resultat és el següent:</p> + +<p>{{EmbedLiveSample("Un_exemple_que_no_utilitza_lAPI_de_validació_de_restriccions", "100%", 130)}}</p> + +<p>Com pots veure, no és tan difícil construir un sistema de validació pel teu compte. La part difícil és que sigui prou genèric perquè es pugui utilitzar tant en múltiples plataformes com en qualsevol formulari que puguis crear. Disposes de moltes biblioteques de fitxers que et permeten executar una validació de formulari, com ara <a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a>.</p> + +<h2 id="Resum">Resum</h2> + +<p>De vegades, la validació de formulari del costat del client necessita JavaScript si vols personalitzar els missatges d’estil i d’error, però <em>sempre</em> requereix que pensis detingudament en l’usuari. Recorda d’ajudar sempre els usuaris a corregir les dades que et proporcionen. Per a això, assegura’t de:</p> + +<ul> + <li>Mostrar missatges d’error explícits.</li> + <li>Ser permissiu amb els formats d’entrada.</li> + <li>Assenyalar exactament on es produeix l’error, sobretot en els formularis grans.</li> +</ul> + +<p>Un cop comprovat que el formulari s'ha emplenat correctament, pots procedir a enviar-lo. A continuació exposarem l’<a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">enviament de les dades d’un formulari</a>.</p> + +<p>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p> + +<h2 id="En_aquest_mòdul"><strong>En aquest mòdul</strong></h2> + +<ul> + <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Els 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 originaris</a></li> + <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">Els tipus d'entrada de l’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">Aplicar estil a formularis web</a></li> + <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Aplicació avançada d’estil a formularis</a></li> + <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">Pseudoclasses d’interfície d’usuari (UI)</a></li> + <li><a href="/en-US/docs/Learn/Forms/Form_validation">Validació del formulari de la banda del client</a></li> + <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari</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 adaptats a client</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 de controls de formulari de codi propietari</a></li> +</ul> |