Com estructurar un formulari web

This translation is incomplete. Please help translate this article from English

Ara que ja coneixem els conceptes bàsics, veurem amb més detall els elements que s’utilitzen per proporcionar estructura i significat a les diferents parts d’un formulari.

Prerequisits: Coneixements bàsics d'informàtica i una comprensió bàsica d’HTML.
Objectiu: Entendre com estructurar els formularis HTML i donar-los semàntica perquè siguin útils i accessibles.

La flexibilitat dels formularis els converteix en una de les estructures més complexes del codi HTML; pots crear qualsevol tipus de formulari bàsic mitjançant elements i atributs de formulari. Si fas servir una estructura correcta quan creïs un formulari HTML, et garantitzarà que el formulari sigui usable i accessible.

L'element <form>

L’element <form> defineix formalment un formulari i els atributs que determinen el comportament del formulari. Cada vegada que vulguis crear un formulari HTML, has de començar mitjançant aquest element, nidificant tot el contingut que hi ha al seu interior. Moltes tecnologies d'assistència i complements del navegador poden descobrir elements <form> i implementar ganxos especials per fer-los més fàcils d'utilitzar.

Ja ho hem vist a l’article anterior.

Atenció: Està totalment prohibit nidificar un formulari dins d’un altre formulari. La nidificació pot fer que els formularis es comportin de manera imprevisible, per la qual cosa és una mala idea.

Sempre és possible utilitzar un control de formulari fora d'un element <form>. Si ho fas, de manera predeterminada, aquest control no tindrà res a fer amb cap formulari, tret que ho associïs a un formulari mitjançant l'atribut form. Això es va introduir per permetre-te unir explícitament un control amb un formulari encara que no estigui imbricat al seu interior.

Avancem i mirem els elements estructurals que trobaràs imbricats en un formulari.

Els elements <fieldset> i <legend>

L’element <fieldset> és una manera convenient de crear grups de ginys que comparteixen el mateix propòsit, amb les mateixes finalitats d’estil i semàntiques. Pots etiquetar un <fieldset> incloent un element <legend> just a sota de l'etiqueta d'obertura <fieldset>. El contingut de text de <legend> descriu formalment el propòsit de <fieldset> que s'inclou dins.

Moltes tecnologies d'assistència utilitzaran l'element <legend> com si fos una part de l'etiqueta de cada control dins de l'element <fieldset> corresponent. Per exemple, alguns lectors de pantalla com Jaws i NVDA llegirà el contingut de la llegenda abans que l’etiqueta de cada control.

Aquí hi ha un petit exemple:

<form>
  <fieldset>
    <legend>Mida de 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 a fieldset-legend.html (veure en directe).

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 d’aquest exemple és un dels més importants. Cada vegada que tinguis un conjunt de botons d'opció, els hauràs de nidificar dins d’un element <fieldset>. Hi ha altres casos d'ús i, en general, també es pot utilitzar l'element <fieldset> per a la secció d'un formulari. L’ideal seria que els formularis llargs ocupessin diverses pàgines, però si un formulari s’allarga i només pot ocupar una sola pàgina, posar les diferents seccions relacionades dins de diferents camps millora la usabilitat.

Degut a la seva influència sobre la tecnologia d’assistència, l’element <fieldset> és un dels elements clau per crear formularis accessibles; tanmateix, és la teva responsabilitat no abusar-ne. Si és possible, cada cop que creeï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 a l’article anterior, l’element <label> és la forma formal de definir una etiqueta per a un giny de formulari en HTML. Aquest és l’element més important si vols crear formularis accessibles: quan s’implementen correctament, els lectors de pantalla llegiran l’etiqueta d’un element de formulari juntament amb qualsevol instrucció relacionada, a més d’ésser útil per als usuaris sense discapacitat. Prenguem aquest exemple, que vam veure a l’article anterior:

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

Amb <label> associada correctament amb <input> a través del seu 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: nidificar el control de formulari dins de <label>, associant-lo implícitament.

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

Fins i tot en aquests casos, però, establir l’atribut for per assegurar que totes les tecnologies d’assistència entenguin la relació entre l'etiqueta i el giny es considera la millor pràctica.

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é es pot clicar sobre les etiquetes!

Un altre avantatge de configurar correctament les etiquetes és que pots fer clic o tocar les etiquetes per activar el giny corresponent. Això és útil per a controls com les entrades de text, on pots fer clic a l’etiqueta i també a l’entrada per enfocar-la, però és especialment útil 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 fer-lo el més fàcil d’activar.

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 a checkbox-label.html (mira-ho en directe).

Etiquetes múltiples

Estrictament parlant, pot posar diverses etiquetes en un sol giny, però això no és una bona idea ja que algunes tecnologies d'assistència poden tenir problemes a l'hora de manejar-los. En el cas de tenir múltiples etiquetes, hauràs d’incloure un giny i les seves etiquetes dins d’un únic element <label>.

Considerem l'exemple següent:

<p>Els camps obligatoris van seguits de  <abbr title="required"> * </abbr>. </p>

<!-- Així que això: --->
<div>
  <label for="username">Nom:</label>
  <input type="text" name="username">
  <label for="username"><abbr title="required" 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="required" aria-label="required">*</abbr>
  </label>
</div>

<!-- Però això és probablement el millor: -->
<div>
  <label for="username">Nom: <abbr title="required" aria-label="required">*</abbr></label>
  <input id="username" type="text" name="username">
</div>

El paràgraf de la part superior estableix una regla per als elements obligatoris. S'ha d'incloure la regla abans d'utilitzar-la perquè els usuaris estàndard i els usuaris amb tecnologies assistives, com ara lectors de pantalla, puguin saber què vol dir abans de trobar un element obligatori. Tot i que això ajuda a informar als usuaris què significa un asterisc, no ens podem confiar. Un lector de pantalla llegirà un asterisc com a «estrella». Si s'hi passa el ratolí per sobre, hauria d'aparèixer «obligatori», que s'aconsegueix mitjançant l'atribut title. Els títols que es llegeixen en veu alta depenen de la configuració del lector de pantalla, per la qual cosa és més fiable incloure també l’atribut aria-label, que sempre els lectors de pantalla sempre llegeixen.

Les variants anteriors augmenten la seva efectivitat a mesura que s'avança:

  • En el primer exemple, l’etiqueta no es llegeix del tot amb l’entrada: només es llegeix «editar text en blanc», a més les etiquetes reals es llegeixen per separat. Els múltiples elements <label> confonen el lector de pantalla.
  • En el segon exemple, les coses són una mica més clares: l’etiqueta llegida juntament amb l’entrada és «necessita el text d’edició del nom de l’estrella del nom» i les etiquetes encara es llegeixen per separat. Les coses encara són una mica confuses, però aquesta vegada és una mica millor, perquè <input> té una etiqueta associada.
  • El tercer exemple és el millor: l’etiqueta real es llegeix conjuntament i l’etiqueta que es llegeix amb l’entrada és «text necessari per editar el nom».

Nota: Pots obtenir resultats lleugerament diferents, segons el teu lector de pantalla. Aquest ha estat provat amb VoiceOver (i NVDA es comporta de manera similar). Ens agradaria escoltar també les teves experiències.

Nota: Pots trobar aquest exemple a GitHub com a required-labels.html (veure en directe). No provis l'exemple amb 2 o 3 de les 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 utilitzades amb 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 HTML per estructurar un formulari web.

Com es pot veure en els exemples, és una pràctica habitual delimitar una etiqueta i el seu giny amb un element <li> dins d'un element de llista <ul> o <ol>. Els elements <p> i <div> també s'utilitzen de forma habitual. Es recomana crear una llista per estructurar diverses caselles de verificació o botons d'opció.

A més de l’element <fieldset>, també és habitual utilitzar títols HTML (per exemple, <h1>, <h2>) i seccionar (per exemple, <section>) per estructurar formes complexes.

Per sobre de tot, et correspon a tu trobar un estil de codificació còmode que doni lloc a formes accessibles i usables. Cada secció separada de la funcionalitat hauria de contenir-se en un element <section> separat, amb elements <fieldset> per contenir botons d'opció.

Aprenentatge actiu: construir una estructura de formulari

Posem en pràctica aquestes idees i construïm un formulari una mica més implicat: un formulari de pagament. Aquest formulari contindrà diversos tipus de control que encara no comprendràs. No et preocupis; veuràs el seu funcionament al següent article (Controls bàsics de formularis nadius). Per ara, llegeix detingudament les descripcions mentre segueixes les instruccions següents i comences a comprendre quins elements utilitzem per estructurar el 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. Aplica el CSS a l’HTML afegint la línia següent a l’element HTML <head>:
    <link href="payment-form.css" rel="stylesheet">
  3. A continuació, crea el teu formulari afegint l’element <form> exterior:
    <form>
    
    </form>
  4. A les etiquetes <form>, afegeix un encapçalament i un paràgraf per informar als usuaris de 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. A continuació, afegirem una secció més gran de codi al formulari, a sota de l’entrada anterior. Aquí veuràs que estem delimitant els camps d’informació de contacte dins d’un element <section> diferent. A més, tenim un conjunt de dos botons d'opció, cadascun dels quals estem col·locant dins del seu propi element de llista (<li>). També tenim dos text estàndard <input> i els seus elements <label> associats, cadascun contingut dins d'un element <p> i un camp per 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. La segona <section> del nostre formulari és la informació de pagament. Tenim tres controls diferents juntament amb les seves etiquetes, cadascun inclòs en un element <p>. El primer és un menú desplegable (<select>) per seleccionar el tipus de targeta de crèdit. El segon és un element <input> del tipus tel, per introduir un número de targeta de crèdit; tot i que podríem haver utilitzat el tipus number, no desitgem el número de la interfície d'usuari. L'últim és un element <input> del tipus date, per introduir la data de caducitat de la targeta; aquest apareixerà amb un giny de selector de dates en els navegadors compatibles i es convertirà en una entrada de text normal als navegadors no compatibles. Aquests tipus d’entrada més nous es reintrodueixen als tipus d’entrada HTML5.

    Introdueix el següent a 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. L’última secció que afegirem és molt més senzilla, ja que només conté un element <button> de tipus submit, per enviar les dades del formulari. Afegeix això al final del formulari:
    <p> <button type="submit">Validar el pagament </button> </p>

Pots veure el formulari finalitzat a l’acció següent (també el pots trobar a GitHub; consulta la font a payment-form.html i executa-ho en directe):

Resum

Ara tens tot el coneixement que necessites per estructurar adequadament els teus formularis web. Abordarem moltes de les funcions que s’introdueixen aquí en els pròxims articles, l’article següent explica amb més detall l’ús de tots els diferents tipus de ginys de formulari que voldràs utilitzar per recopilar informació dels teus usuaris.

Mira també

En aquest mòdul

Temes avançats