From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- .../forms/basic_native_form_controls/index.html | 326 -------- files/ca/learn/forms/form_validation/index.html | 830 --------------------- .../forms/how_to_structure_a_web_form/index.html | 317 -------- files/ca/learn/forms/index.html | 357 --------- files/ca/learn/forms/your_first_form/index.html | 299 -------- 5 files changed, 2129 deletions(-) delete mode 100644 files/ca/learn/forms/basic_native_form_controls/index.html delete mode 100644 files/ca/learn/forms/form_validation/index.html delete mode 100644 files/ca/learn/forms/how_to_structure_a_web_form/index.html delete mode 100644 files/ca/learn/forms/index.html delete mode 100644 files/ca/learn/forms/your_first_form/index.html (limited to 'files/ca/learn/forms') diff --git a/files/ca/learn/forms/basic_native_form_controls/index.html b/files/ca/learn/forms/basic_native_form_controls/index.html deleted file mode 100644 index 4cc3b868b6..0000000000 --- a/files/ca/learn/forms/basic_native_form_controls/index.html +++ /dev/null @@ -1,326 +0,0 @@ ---- -title: Controls de formulari originals -slug: Learn/Forms/Basic_native_form_controls -translation_of: Learn/Forms/Basic_native_form_controls -original_slug: Learn/HTML/Forms/Controls_de_formulari_originals ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}
- -

En l’article anterior 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 ginys o widgets, 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.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica i una comprensió bàsica d’HTML.
Objectiu: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.
- -

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:

- - - -
-

Nota: 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 referència d’elements de formulari HTML i, en particular, la nostra extensa referència de tipus <input>.

-
- -

Camps d'entrada de text

- -

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.

- -
-

Nota: Els camps de text en format HTML són controls d’entrada de text pla. Això vol dir que no pots aplicar-hi una edició enriquida (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.

-
- -

Tots els controls bàsics de text comparteixen alguns comportaments comuns:

- - - -
-

Nota: L’element {{htmlelement("input")}} és únic entre els elements d’HTML perquè pot adoptar moltes formes diferents segons el valor del seu atribut type. 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.

-
- -

Camps de text d'una sola línia

- -

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 text, o si l’atribut {{htmlattrxref("type","input")}} s’omet (perquè el valor per defecte d’aquest atribut és text). El valor text 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 type="color" i el navegador no és compatible amb els selectors de color).

- -
-

Nota: Consulta exemples de tots els tipus de camp de text d’una sola línia a GitHub, en el fitxer single-line-text-fields.html (també pots consultar l’exemple en viu).

-
- -

A continuació es mostra un exemple bàsic de camp de text d'una sola línia:

- -
<input type="text" id="comment" name="comment" value="I'm a text field">
- -

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.

- -

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.

- -

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.

- -
-

Nota: 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: tipus d’entrada HTML5.

-
- -

Camps de contrasenya

- -

Un dels tipus d’entrada de text originals era el tipus de camp de text per a introduir una contrasenya (password):

- -
<input type="password" id="pwd" name="pwd">
- -

El valor de contrasenya (password) 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.

- -

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 https://...), perquè les dades se xifrin abans d’enviar-se.

- -

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 Contrasenyes insegures.

- -

Contingut ocult

- -

Un altre control de text original és el tipus d’entrada hidden. 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.

- -
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
-
- -

Quan crees aquest element, cal que hi configuris els atributs name i value. El valor es pot configurar dinàmicament amb JavaScript. El tipus d’entrada hidden no hauria de tenir cap etiqueta associada.

- -

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.

- -

Elements de selecció: caselles de selecció i botons d'opció

- -

Els elements de selecció (o checkable items, 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 check box, i el botó d'opció, o radio button. Tots dos utilitzen l’atribut checked per indicar si el control està en estat seleccionat per defecte o no.

- -

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 name, 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 on.

- -
-

Nota: Pots trobar els exemples d'aquesta secció a GitHub, en el fitxer checkable-items.html (o també consultar-ne l’exemple en viu).

-
- -

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.

- -

Caselles de verificació

- -

Una casella de verificació es crea amb l’element {{HTMLElement("input")}} i un atribut type amb el valor {{HTMLElement("input/checkbox", "checkbox")}}.

- -
<input type="checkbox" id="carrots" name="carrots" value="carrots" checked>
-
- -

Si s’hi inclou l’atribut checked, 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.

- -

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:

- -

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

- -
-

Nota: La pseudoclasse {{cssxref(':default')}} selecciona les caselles de verificació i els botons d'opció que presenten l'atribut checked en el moment de carregar-se la pàgina, encara que ja no estiguin en l’estat checked. La pseudoclasse {{cssxref(':checked')}} selecciona només els elements que estan en estat checked.

-
- -

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 exemple en acció aquí (o també pots consultar-ne el codi d’origen).

- -

Botons d'opció

- -

Un botó d'opció es crea amb l’element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor radio:

- -
<input type="radio" id="soup" name="meal" checked>
- -

É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.

- -
<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>
- -

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.

- -

Botons d'opció en Firefox 71 i Safari 13 amb Mac i Chrome 79 i en Edge 18 amb Windows 10

- -

Botons reals

- -

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:

- -
-
submit
-
Envien les dades del formulari al servidor. Per als elements {{HTMLElement("button")}}, si s’omet l'atribut type (o es posa un valor de type no vàlid), s’obté un botó d'enviament.
-
reset
-
Restableixen tots els controls de formulari als valors predeterminats.
-
button
-
No presenten cap efecte automàtic, però es poden personalitzar amb codi JavaScript.
-
- -

A més, l’element {{htmlelement("button")}} pot prendre un atribut type i imitar aquests tres tipus d'entrada. La diferència principal entre els dos elements és que els elements <button> autèntics admeten moltes més opcions d’estil.

- -
-

Nota: També es pot representar com un botó el tipus d’entrada image. El tractarem més endavant també.

-
- -
-

Nota: Pots trobar els exemples d'aquesta secció a GitHub, en els fitxers button-examples.html (o també pots consultar l’exemple en viu).

-
- -

A continuació pots trobar exemples de cada tipus d’entrada <input> de tipus botó, juntament amb el tipus de botó equivalent.

- -

submit

- -
<button type="submit">
-    Aquest és un <strong>botó Enviar</strong>
-</button>
-
-<input type="submit" value="Aquest és un botó Enviar">
- -

reset

- -
<button type="reset">
-    Aquest és un <strong>botó Reiniciar</strong>
-</button>
-
-<Input type = "reset" value = "Aquest és un botó Reiniciar">
- -

anonymous

- -
<button type="button">
-    Aquest és un <strong>botó anònim</strong>
-</button>
-
-<input type="button" value="Aquest és un botó anònim">
- -

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 <button> 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 value, i per tant només accepten contingut textual.

- -

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.

- -

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

- -

Botons imatge

- -

El control botó imatge es comporta exactament com un element {{HTMLElement("img")}}, però passa a comportar-se com un botó de validació quan un usuari hi fa clic.

- -

Un botó imatge es crea amb un element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor image. 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.

- -
<input type="image" alt="Fes-me clic!" src="my-img.png" width="80" height="30">
- -

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:

- - - -

Així, per exemple, observa que en fer clic a les coordenades (123, 456) de la imatge i enviar pel mètode get, aquests valors s’annexen a l’URL de la manera següent:

- -
http://foo.com?pos.x=123&pos.y=456
- -

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 Enviar les dades d’un formulari.

- -

Selector de fitxers

- -

Un últim tipus <input> 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 Enviar les dades d’un formulari). El control de selecció de fitxers es pot utilitzar per triar un o més fitxers que es volen enviar.

- -

Pots crear un control de selecció de fitxers amb l’element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor file. 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")}}.

- -

Exemple

- -

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.

- -
<input type="file" name="file" id="file" accept="image/*" multiple>
- -

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 accept informació sobre la captura com ara:

- -
<input type="file" accept="image/*;capture=camera">
-<input type="file" accept="video/*;capture=camcorder">
-<input type="file" accept="audio/*;capture=microphone">
- -

Atributs comuns

- -

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:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom de l'atributValor per defecteDescripció
autofocusfalseAquest 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.
disabledfalseAquest 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 disabled, l'element està habilitat.
formL’element <form> 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 id 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.
nameEl nom de l'element; s'envia amb les dades del formulari.
valueEl valor inicial de l'element.
- -

Resum

- -

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 type, que s’han afegit en HTML5.

- -

{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}

- -

En aquest mòdul

- - - -

Temes avançats

- - diff --git a/files/ca/learn/forms/form_validation/index.html b/files/ca/learn/forms/form_validation/index.html deleted file mode 100644 index 7d5b432e1c..0000000000 --- a/files/ca/learn/forms/form_validation/index.html +++ /dev/null @@ -1,830 +0,0 @@ ---- -title: Validació de formularis del costat del client -slug: Learn/Forms/Form_validation -translation_of: Learn/Forms/Form_validation -original_slug: Learn/HTML/Forms/Validacio_formularis ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
- -

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 validació de formularis del costat del client, 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.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica i nocions d'HTML, CSS i JavaScript.
Objectiu:Entendre què és la validació de formularis de costat del client, per què és important i conèixer-ne diverses tècniques d’implementació.
- -

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.

- -

Tanmateix, la validació del costat del client no s'ha de considerar 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 tant del costat del servidor com també del costat del client, 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 La seguretat dels llocs web per a fer-te una idea de què podria passar; implementar la validació del costat del servidor és fora de l’àmbit d’aquest mòdul, però l’has de tenir en compte.

- -

Què és la validació de formularis?

- -

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:

- - - -

Això es coneix com validació de formulari. 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 validació del costat del client, mentre que la validació que es fa en el servidor s’anomena validació del costat del servidor. En aquest article ens centrem en la validació del costat del client.

- -

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.

- -

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:

- - - -

Els diferents tipus de validació del costat del client

- -

Els llocs web poden presentar dos tipus diferents de validació del costat del client

- - - -

Ús de la validació de formulari integrada

- -

Una de les característiques més significatives dels controls de formulari HTML5 é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ó:

- - - -

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.

- -

Quan un element és vàlid, es compleixen els aspectes següents:

- - - -

Quan un element no és vàlid, es verifica el següent:

- - - -
-

Nota: 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')}}.

-
- -

Exemples de validació de formularis integrada

- -

En aquesta secció provarem alguns dels atributs que hem esmentat abans.

- -

Un fitxer d’inici senzill

- -

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 fruit-start.html, i l’exemple en viu a continuació.

- -
<form>
-  <label for="choose">Would you prefer a banana or a cherry?</label>
-  <input id="choose" name="i_like">
-  <button>Submit</button>
-</form>
- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 2px solid black;
-}
- -

{{EmbedLiveSample("Un_fitxer_d’inici_senzill", "100%", 80)}}

- -

Per començar, fes una còpia del fitxer fruit-start.html en un directori nou del teu disc dur.

- -

L’atribut required

- -

La característica de validació HTML5 més simple és l’atribut required (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')}}.

- -

Afegeix un atribut required a la teva entrada, com es mostra a continuació.

- -
<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>
- -

Tingues en compte el CSS que s'ha inclòs en el fitxer d'exemples:

- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:invalid:required {
-  background-image: linear-gradient(to right, pink, lightgreen);
-}
-
-input:valid {
-  border: 2px solid black;
-}
- -

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 i no vàlida. Prova’n el comportament nou en l'exemple següent:

- -

{{EmbedLiveSample("L’atribut_required", "100%", 80)}}

- -
-

Nota: Pots trobar aquest exemple en directe a GitHub en el fitxer fruit-validation.html (consulta’n també el codi d’origen.)

-
- -

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.

- -

La presència de l'atribut required 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 input coincideix amb la pseudoclasse {{cssxref(':invalid')}}.

- -
-

Nota: 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’accessibilitat 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ú?

-
- -

Validar una expressió regular

- -

Una altra característica útil de la validació és l’atribut pattern, que espera una expressió regular com a valor. Una expressió regular (regex) é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.

- -

Els regex 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.

- - - -

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.

- -

Posem-ho en pràctica amb un exemple. Afegeix al teu codi HTML un atribut pattern, d'aquesta manera:

- -
<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>
-
- - - -

Això ens proporciona l’actualització següent. Prova-ho:

- -

{{EmbedLiveSample("Validar_una_expressió_regular", "100%", 80)}}

- -
-

Nota: Pots trobar aquest exemple en directe a GitHub en el fitxer fruit-pattern.html (consulta’n també el codi d’origen).

-
- -

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.

- -

En aquest punt, intenta canviar el valor de l’atribut pattern 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.

- -

Si un valor {{HTMLElement("input")}} no buit no coincideix amb el patró de l'expressió regular, input coincideix amb la pseudoclasse {{cssxref(':invalid')}}.

- -
-

Nota: Alguns tipus d'elements {{HTMLElement("input")}} no necessiten validar una expressió regular amb l’atribut pattern. Si especifiques el tipus email, 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 multiple.

-
- -
-

Nota: L'element {{HTMLElement("textarea")}} no admet l'atribut pattern.

-
- -

Restringir la longitud de les entrades

- -

Pots restringir la longitud de caràcters de tots els camps de text creats amb {{HTMLElement("input")}} o {{HTMLElement("textarea")}} amb els atributs minlength i maxlength. Un camp no és vàlid si té un valor que té menys caràcters que el valor assignat a minlength, o més que el valor assignat a maxlength.

- -

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 maxlength é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 solucions que fan servir maxlength.

- -

Restringir els valors de les entrades

- -

Per als camps d’entrada de números (és a dir, <input type="number">), es poden utilitzar els atributs min i max, que proporcionen un rang de valors vàlids. Un camp que conté un valor que cau fora d'aquest interval no és vàlid.

- -

Observem-ne un altre exemple. Crea una còpia nova del fitxer fruit-start.html.

- -

A continuació suprimeix el contingut de l'element <body> i substitueix-lo pel següent:

- -
<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>
- - - - - -

Aquí tens l’execució en viu de l’exemple:

- -

{{EmbedLiveSample("Restringir_els_valors_de_les_entrades", "100%", 100)}}

- -
-

Nota: Pots trobar aquest exemple en viu a GitHub en el fitxer fruit-length.html (o també consultar-ne el codi d’origen.)

-
- -
-

Nota: <input type="number"> (i altres tipus, com ara range i date) també poden tenir un atribut step, 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 step, de manera que el valor per defecte és 1. Això vol dir que els números de coma flotant (com ara el 3,2) també es mostren com a no vàlids.

-
- -

Exemple complet

- -

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:

- -
<form>
-  <p>
-    <fieldset>
-      <legend>Do you have a driver's license?<abbr title="This field is mandatory" aria-label="required">*</abbr></legend>
-      <!-- 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 -->
-      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label>
-      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label>
-    </fieldset>
-  </p>
-  <p>
-    <label for="n1">How old are you?</label>
-    <!-- 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 -->
-    <input type="number" min="12" max="120" step="1" id="n1" name="age"
-           pattern="\d+">
-  </p>
-  <p>
-    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory" aria-label="required">*</abbr></label>
-    <input type="text" id="t1" name="fruit" list="l1" required
-           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
-    <datalist id="l1">
-      <option>Banana</option>
-      <option>Cherry</option>
-      <option>Apple</option>
-      <option>Strawberry</option>
-      <option>Lemon</option>
-      <option>Orange</option>
-    </datalist>
-  </p>
-  <p>
-    <label for="t2">What's your e-mail address?</label>
-    <input type="email" id="t2" name="email">
-  </p>
-  <p>
-    <label for="t3">Leave a short message</label>
-    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
-  </p>
-  <p>
-    <button>Submit</button>
-  </p>
-</form>
- -

I ara, una mica de CSS per a aplicar estil al codi HTML:

- -
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;
-}
- -

Això dona la sortida següent:

- -

{{EmbedLiveSample("Exemple_complet", "100%", 420)}}

- -

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 atributs relacionats amb la validació.

- -
-

Nota: Pots trobar aquest exemple en viu a GitHub, en el fitxer full-example.html (o consultar-ne també el codi d’origen).

-
- -

Validació de formularis amb JavaScript

- -

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ò.

- -

L’API de validació de restriccions

- -

La majoria dels navegadors admeten l'API de validació de restriccions, que consta d'un conjunt de mètodes i propietats disponibles en les interfícies DOM per als elements de formulari següents:

- - - -

L’API de validació de restriccions posa a la disposició dels elements anteriors les propietats següents.

- - - -

L'API de validació de restriccions també ofereix als elements anteriors els mètodes següents:

- - - -

Missatges d’error personalitzats

- -

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.

- -

Aquests missatges automatitzats tenen dos inconvenients:

- - - -

Exemple d’un missatge d’error a Firefox en francès en una pàgina en anglès

- -

La personalització d’aquests missatges d’error és un dels casos d’ús més comuns de l’API de validació de restriccions. Vegem la manera de fer-ho amb un exemple senzill.

- -

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 fruit-start.html com a base, si vols):

- -
<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>
- -

I afegeix a la pàgina el JavaScript següent:

- -
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("");
-  }
-});
- -

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 content cada vegada que es modifica el valor dins de l’entrada.

- -

Dins del codi de content, comprovem si la propietat validity.typeMismatch de l’entrada de correu electrònic retorna true, 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 setCustomValidity() 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.

- -

Si la propietat validity.typeMismatch retorna false, cridem el mètode setCustomValidity() amb una cadena buida. Això fa que l’entrada sigui vàlida, i el formulari s’envia.

- -

Pots provar-ho a continuació:

- -

{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}

- -
-

Nota: Pots trobar aquest exemple en viu a GitHub en el fitxer custom-error-message.html (consulta’n també el codi d’origen).

-
- -

Un exemple més detallat

- -

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.

- -

En primer lloc, el codi HTML. Un cop més, no dubtis a construir-lo amb nosaltres:

- -
<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>
- -

Aquest formulari senzill utilitza l’atribut novalidate, 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.

- -

La nostra entrada per validar és <input type="email">, que està marcada com a required i té una longitud mínima (minlength) de 8 caràcters. Comprovem-ho amb el nostre codi i mostrem un missatge d'error personalitzat per a cada element.

- -

El nostre objectiu és mostrar els missatges d'error dins d'un element <span>. L'atribut aria-live està establert a <span> per a assegurar-nos que el missatge d'error personalitzat serà visible per a tothom, inclosos els usuaris que empren lectors de pantalla.

- -
-

Nota: Un element clau aquí és el fet que establir l’atribut novalidate 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.

-
- -

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:

- -
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;
-}
- -

A continuació veurem el JavaScript que implementa la validació d'errors personalitzada.

- -
// 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';
-}
- -

Els comentaris expliquen les coses força bé, però de manera breu:

- - - -

Aquest és el resultat en viu:

- -

{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}

- -
-

Nota: Pots trobar aquest exemple en viu a GitHub en el fitxer detailed-custom-validation.html (consulta’n també el codi d’origen).

-
- -

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.

- -
-

Nota: Per obtenir més informació, consulta la nostra guia de validació de restriccions i la referència de l'API de validació de restriccions.

-
- -

Validació dels formularis sense una API integrada

- -

En alguns casos, com ara la compatibilitat amb navegadors antics o els controls personalitzats, 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.

- -

Per a validar un formulari, planteja’t unes quantes preguntes:

- -
-
Quin tipus de validació he de fer?
-
Has de determinar com validar les dades: operacions amb variables de cadena, conversió de tipus, expressions regulars, etc. Tot depèn de tu.
-
Què he de fer si el formulari no es valida?
-
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?
-
Com puc ajudar l’usuari a corregir dades no vàlides?
-
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: - -
-
- -

Un exemple que no utilitza l'API de validació de restriccions

- -

A continuació es mostra una versió simplificada de l'exemple anterior que funciona amb navegadors antics.

- -

L’HTML és gairebé el mateix; només n’hem tret les funcions de validació HTML.

- -
<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>
- -

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.

- -
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;
-}
- -

Els grans canvis es produeixen en el codi JavaScript, que ha de fer molta més feina feixuga.

- -
// 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";
-  }
-});
- -

El resultat és el següent:

- -

{{EmbedLiveSample("Un_exemple_que_no_utilitza_lAPI_de_validació_de_restriccions", "100%", 130)}}

- -

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 Validate.js.

- -

Resum

- -

De vegades, la validació de formulari del costat del client necessita JavaScript si vols personalitzar els missatges d’estil i d’error, però sempre 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:

- - - -

Un cop comprovat que el formulari s'ha emplenat correctament, pots procedir a enviar-lo. A continuació exposarem l’enviament de les dades d’un formulari.

- -

{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

- -

En aquest mòdul

- - - -

Temes avançats

- - diff --git a/files/ca/learn/forms/how_to_structure_a_web_form/index.html b/files/ca/learn/forms/how_to_structure_a_web_form/index.html deleted file mode 100644 index 6ba3fe8f1c..0000000000 --- a/files/ca/learn/forms/how_to_structure_a_web_form/index.html +++ /dev/null @@ -1,317 +0,0 @@ ---- -title: Com estructurar un formulari web -slug: Learn/Forms/How_to_structure_a_web_form -translation_of: Learn/Forms/How_to_structure_a_web_form -original_slug: Learn/HTML/Forms/Com_estructurar_un_formulari_web ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}
- -

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.

- - - - - - - - - - - - -
Requisits previs:Coneixements bàsics d'informàtica i una fonaments bàsics de l’HTML.
Objectiu:Aprendre a estructurar els formularis HTML i donar-los semàntica perquè compleixin criteris d’usabilitat i accessibilitat.
- -

La flexibilitat dels formularis els converteix en una de les estructures més complexes pel que fa al codi HTML; 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’accessibilitat del formulari.

- -

L'element <form>

- -

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 (hooks) especials per a facilitar-ne l’ús.

- -

Ja ho hem vist en l’article anterior.

- -
Atenció: 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.
- -

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 form. Això es va introduir per a permetre unir explícitament un control amb un formulari encara que no hi estigui imbricat.

- -

Avancem una mica i observem els elements estructurals que trobaràs en un formulari.

- -

Els elements <fieldset> i <legend>

- -

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.

- -

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 Jaws i NVDA llegiran el contingut de la llegenda abans de llegir el text de l’etiqueta de cada control.

- -

Aquí hi ha un petit exemple:

- -
<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>
- -
-

Nota: Pots trobar aquest exemple en el fitxer fieldset-legend.html (o consultar-ne l’exemple en viu).

-
- -

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.

- -

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.

- -

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 escoltar com l’interpreta un lector de pantalla. Si sona estrany, prova de millorar l'estructura del formulari.

- -

L'element <label>

- -

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:

- -
<label for="name">Nom:</label> <input type="text" id="name" name="user_name">
- -

Amb l'etiqueta <label> associada correctament amb l’element <input> per l’atribut for (que conté l'atribut id de l'element <input>), un lector de pantalla llegirà una cosa així com «Nom, editar text».

- -

Hi ha una altra manera d’associar un control de formulari amb una etiqueta: introduir el control de formulari dins de <label> i associar-l’hi implícitament.

- -
<label for="name">
-  Nom: <input type="text" id="name" name="user_name">
-</label>
- -

Fins i tot en aquests casos, però, es considera una bona pràctica establir-hi l’atribut for per garantir que totes les tecnologies d’assistència entenen la relació entre l'etiqueta i el control.

- -

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.

- -

També pots clicar les etiquetes!

- -

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ó.

- -

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 taste_cherry:

- -
<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>
- -
-

Nota: Pots trobar aquest exemple en el fitxer checkbox-label.html (o consultar l’exemple en viu).

-
- -

Etiquetes múltiples

- -

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")}}.

- -

Considerem l'exemple següent:

- -
<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>
- -

{{EmbedLiveSample("Etiquetes_múltiples", 120, 120)}}

- -

El paràgraf de la part superior estableix una regla per als elements obligatoris. La regla s'ha d'incloure abans 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í: «estrella». Si s'hi passa el ratolí per sobre, hauria d'aparèixer «obligatori», que s'aconsegueix amb l'atribut title. 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 aria-label, que els lectors de pantalla llegeixen sempre.

- -

Les variants anteriors augmenten l’efectivitat a mesura que hi avances:

- - - -
-

Nota: 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.

-
- -
-

Nota: Pots trobar aquest exemple a GitHub en el fitxer required-labels.html (o consulta l’exemple en viu). 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.

-
- -

Estructures HTML habituals que es fan servir als formularis

- -

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.

- -

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.

- -

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.

- -

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ó.

- -

Aprenentatge actiu: construir l’estructura d’un formulari

- -

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 (Els controls de formulari bàsics originals). 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è.

- -
    -
  1. Per començar, fes una còpia local del fitxer de plantilla en blanc i del CSS del nostre formulari de pagament en un directori nou del teu ordinador.
    2. -
  2. Aplica el CSS a l’HTML afegint la línia següent a l’element {{htmlelement("head")}} de l’HTML: - 
    <link href="payment-form.css" rel="stylesheet">
    -
    3. -
  3. A continuació, afegeix l’element extern {{htmlelement("form")}} per a crear el teu formulari: - 
    <form>
-
-</form>
    -
    4. -
  4. Afegeix un títol d’encapçalament encapçalament i un paràgraf a les etiquetes <form> per a informar els usuaris com es marquen els camps obligatoris: - 
    <h1>Forma de pagament</h1>
-<p>Els camps obligatoris van seguits de <strong><abbr title = "obligatori">*</abbr></strong>.</p>
    -
    5. -
  5. 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: - 
    <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>
    -
    6. -
  6. La segona secció (<section>) del nostre formulari és la informació de pagament. Hi ha tres controls diferents, juntament amb les seves etiquetes, cadascun inclòs en un element <p>. El primer és un menú desplegable ({{htmlelement("select")}}) que selecciona el tipus de targeta de crèdit. El segon és un element <input> del tipus tel, que introdueix un número de targeta de crèdit; tot i que podríem haver utilitzat el tipus number, no volem la interfície d'usuari que s'hi aplica per defecte. L'últim és un element <input> del tipus date, 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 tipus d’entrades en HTML5.
    -
    - Introdueix el següent en la secció anterior: - 
    <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>
    -
    7. -
  7. L’última secció que afegim és molt més senzilla, perquè només conté un element {{htmlelement("button")}} de tipus submit, que envia les dades del formulari. Afegeix això al final del formulari: - 
    <p> <button type="submit">Validar el pagament</button> </p>
    -
    8. -
- -

A sota pots veure en acció el formulari acabat (també el pots trobar a GitHub; consulta el codi d’origen a payment-form.html i executa’l en viu):

- -

{{EmbedLiveSample("A_payment_form","100%",620, "", "en-US/Learn/Forms/How_to_structure_a_web_form/Example")}}

- -

Resum

- -

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.

- -

Consulta també

- - - -

{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}

- -

En aquest mòdul

- - - -

Temes avançats

- - diff --git a/files/ca/learn/forms/index.html b/files/ca/learn/forms/index.html deleted file mode 100644 index 964d71c754..0000000000 --- a/files/ca/learn/forms/index.html +++ /dev/null @@ -1,357 +0,0 @@ ---- -title: HTML forms guide -slug: Learn/Forms -tags: - - Featured - - Formularis - - Guía - - HTML - - Web -translation_of: Learn/Forms -original_slug: Learn/HTML/Forms ---- -

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!

- -

Articles

- -
    -
  1. El meu primer formulari HTML
    2. -
  2. Com estructurar un formulari HTML
    3. -
  3. Formularis widgets nadius
    4. -
  4. CSS amb formularis HTML -
      -
    1. Estil en formularis HTML
      2. -
    2. Estils avançats en formularis HTML
      3. -
    3. Taula de propietats compatibles per formularis widgets
      4. -
    -
    5. -
  5. Enviar y recuperar dades del formulari
    6. -
  6. Validació de dades del formulari
    7. -
  7. Contruir formularis widgets personalitzats
    8. -
  8. Enviament de formularis amb JavaScript -
      -
    1. Utilitzant l'objecte FormData
      2. -
    -
    9. -
  9. Formularis HTML en navegadors antics
    10. -
- -

Documentació HTML

- -

Elements HTML

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementInterfície DOM relacionatDescripció
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}L'element button representa un botó que es premi.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}L'element datalist conté un conjunt d'elements {{ HTMLElement("option") }} que representen les opcions possibles per al valor d'altres elements de formulari.
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}El fieldset s'utilitza per agrupar diversos elements formulari dins d'un formulari.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}L'element form representa una secció del document que conté l'element interactiu que permet a un usuari enviar informació a un servidor web.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}L'element input s'utilitza per crear controls interactius per als formularis.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}L'element keygen existeix per facilitar la generació de material clau, i l'enviament de la clau pública com a part d'un formulari HTML
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}L'element label representa un títol d'un article en una interfície d'usuari
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}L'element legend representa una llegenda per al contingut del seu pare {{ HTMLElement("fieldset") }}.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}L'element metre representa o bé un valor escalar dins d'un rang conegut o un valor fraccionari.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}l'element optgroup crea un grup d'opcions dins d'un element {{ HTMLElement("select") }} element.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}l'element HTML option  s'utilitza per crear un control que representa un element dins d'un element {{ HTMLElement("select") }}, o un {{ HTMLElement("optgroup") }} o un {{ HTMLElement("datalist") }}.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}L'element output representa el resultat d'un càlcul.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}L'element progress s'utilitza per veure el progrés de la finalització d'una tasca.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}L'element select representa un control que presenta un menú d'opcions.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}L'element textarea representa un control d'edició de text pla multilínia.
- -
-

Nota: Tots els elements formulari, com tots els elements d'HTML, suportan la interfície DOM {{domxref("HTMLElement")}}.

-
- -

Atributs HTML

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

Referència normativa

- - diff --git a/files/ca/learn/forms/your_first_form/index.html b/files/ca/learn/forms/your_first_form/index.html deleted file mode 100644 index 95e79c8da4..0000000000 --- a/files/ca/learn/forms/your_first_form/index.html +++ /dev/null @@ -1,299 +0,0 @@ ---- -title: El teu primer formulari -slug: Learn/Forms/Your_first_form -translation_of: Learn/Forms/Your_first_form -original_slug: Learn/HTML/Forms/El_teu_primer_formulari ---- -
{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}
- -

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ó.

- - - - - - - - - - - - -
Requisits previs:Coneixements bàsics d'informàtica i fonaments bàsics d’HTML.
Objectiu: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.
- -

Què són els formularis web?

- -

Els formularis web 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 Enviar les dades d’un formulari web 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).

- -

L’HTML d’un formulari web està format per un o més controls de formulari (de vegades anomenats ginys o, en anglès, widgets), a més d’alguns elements addicionals que ajuden a estructurar el formulari general, que sovint s’anomenen formularis HTML. 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.

- -

Els controls de formulari també es poden programar per a forçar la introducció de formats o valors específics (validació del formulari) 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.

- -

Disseny del formulari

- -

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.

- -

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:

- - - -

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

- -

Una manera aproximada de fer un esbós de formulari

- -

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.

- -

Aprenentatge actiu: Creació del nostre formulari HTML

- -

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")}}.

- -

Abans d’avançar, fes una còpia local de la nostra plantilla HTML senzilla i hi introduiràs el formulari HTML.

- -

L’element {{HTMLelement("form")}}

- -

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

- -
<form action="/my-handling-form-page" method="post">
-
-</form>
- -

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 action i method:

- - - -
-

Nota: Observa com funcionen aquests atributs en el nostre article Enviar les dades d’un formulari web, que trobaràs més endavant.

-
- -

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

- -

Els elements {{HTMLelement("label")}}, {{HTMLelement("input")}} i {{HTMLelement("textarea")}}

- -

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:

- - - -

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

- -
<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>
- -

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

- -

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 for per a tots els elements {{HTMLelement ("label")}}, que pren com a valor l'identificador del control de formulari id al qual està associat; així és com un formulari s'associa a la seva etiqueta.

- -

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 Com estructurar un formulari web.

- -

En l’element {{HTMLelement("input")}}, l’atribut més important és type. 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 Els controls de formulari bàsics originals.

- - - -

Per últim, però no per això menys important, cal destacar la sintaxi de <input> en contraposició a <textarea></textarea>. Aquesta és una de les curiositats de l’HTML. L’etiqueta <input> é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 value de la manera següent:

- -
<input type="text" value="per defecte aquest element s'omple amb aquest text">
- -

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:

- -
<textarea>
-per defecte aquest element s'omple amb aquest text
-</textarea>
- -

L’element {{HTMLelement("button")}}

- -

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 </form>:

- -
<li class="button">
-  <button type="submit">Envia el teu missatge</button>
-</li>
- -

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

- - - -
-

Nota: També pots utilitzar l’element {{HTMLElement("input")}} amb el type corresponent i crear un botó, per exemple <input type="submit">. 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.

-
- -

Nocions bàsiques d’aplicació d’estil a formularis

- -

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.

- -
-

Nota: Si creus que el teu codi HTML no és correcte, compara’l amb el nostre exemple acabat: consulta el fitxer first-form.html (també pots consultar l’exemple en viu).

-
- -

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.

- -

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:

- -
<style>
-
-</style>
- -

Afegeix a l'etiqueta style el CSS següent:

- -
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;
-}
- -

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

- -
-

Nota: Pots trobar la nostra versió a GitHub, en el fitxer first-form-styled.html (o consultar l’exemple en viu).

-
- -

Enviar les dades del formulari al servidor web

- -

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 action i method.

- -

Proporcionem un nom (name) 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.

- -

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

- -
<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>
-
-  ...
-
- -

En el nostre exemple, el formulari enviarà 3 blocs de dades anomenats «user_name», «user_email» i «user_message». Aquestes dades s’enviaran a l’URL «/my-handling-form-page» pel mètode post de HTTP .

- -

De la banda del servidor, l'script a l'URL «/my-handling-form-page» 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 Enviar les dades d’un formulari web que trobaràs més endavant.

- -

Resum

- -

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

- -

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

- -

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.

- -

{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}

- -

En aquest mòdul

- - - -

Temes avançats

- - -- cgit v1.2.3-54-g00ecf