Logo de Mosaic
El text central d'HTML
Formularis HTML: conceptes bàsics

20. Formularis HTML: conceptes bàsics

Jenifer Hanen. 8 de juliol del 2008. Publicat a: estructura, trametre, semàntic, entrada, accessible

Tothom ha vist un formulari. Tothom n'ha utilitzat algun. Però n'heu codificat algun?

Un formulari en línia és qualsevol àrea en la qual es pot introduir informació en una pàgina web; per exemple, introduint text o números en un quadre de text, marcant una casella de selecció, seleccionant un botó d'opció o escollint una opció d'una llista. Llavors, el formulari es tramet al lloc web prement el botó de trametre.

Al web trobareu formularis per tot arreu: per a introduir noms d'usuari i contrasenyes en una pantalla d'accés, per a fer comentaris en blocs, per a escriure el vostre perfil en una xarxa social o per a especificar la informació de facturació en un lloc de compres.

Crear un formulari és molt senzill, però què cal saber sobre els formularis perquè siguin conformes amb els estàndards del web? De moment, si heu anat seguint el programa d'estudis d'estàndards del web d'Opera, probablement ja tindreu molt clar que és molt important seguir sempre aquests estàndards. El codi necessari per a crear un formulari accessible i conforme amb els estàndards no suposa més feina que la creació d'un formulari malgirbat.

Així, doncs, començarem amb el formulari més bàsic i senzill que podríem utilitzar i llavors ja l'anirem complicant; en aquest apartat explicaré tots els conceptes bàsics que cal conèixer per a crear unes estructures de formularis elegants i accessibles amb l'HTML.

Els continguts d'aquest apartat són els següents:

20.1. Pas u: El codi bàsic

Començarem amb un formulari de comentari molt i molt bàsic, el tipus de formulari que utilitzaríeu en un lloc web per a permetre que la gent pugui donar la seva opinió sobre alguna cosa com ara un article que hàgiu escrit, o per a permetre que pugui enviar-vos un missatge sense saber la vostra adreça electrònica. El codi és el següent:

<form>
Name: <input type="text" name="name" id="name" value="" />
Email: <input type="text" name="email" id="email" value="" />
Comments: <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
<input type="submit" value="submit" />
</form>

Si introduïu aquest codi en un document HTML i llavors obriu aquest document en un navegador, el que veureu és el que apareix a la figura 1.

El primer exemple de formulari

Figura 1. El primer exemple de formulari bàsic.

Arxiu font: "step-1-form.html"

Proveu-ho; introduïu aquest codi en el vostre document HTML de mostra i carregueu-lo en un navegador, o aneu a la pàgina del primer exemple de formulari bàsic per a navegar fins al formulari en una altra pàgina. Intenteu jugar una mica amb els diferents controls del formulari per a veure tot el que hi podeu fer.

Si llegiu el codi, hi veureu una etiqueta <form> d'obertura, una etiqueta </form> de tancament i algunes altres coses entre aquestes dues. L'element conté dos camps de text en els quals el lector de la pàgina pot introduir el seu nom i la seva adreça electrònica, i una àrea de text que es pot omplir amb un comentari per a trametre'l al propietari del lloc web.

Què hi tenim, doncs, aquí?

20.2. Pas dos: Afegir-hi estructura i comportament

Així, doncs, heu clicat l'enllaç del formulari #1 anterior, l'heu omplert i heu clicat el botó Trametre; per què no ha passat res? I per què té tan mal aspecte i apareix tot en una línia? La resposta és que encara no l'heu estructurat ni heu definit cap lloc on trametre les dades que recull el formulari.

Tornem a la taula de dibuix per crear un formulari nou:

<form id="contact-form" action="script.php" method="post">
  <input type="hidden" name="redirect" value="http://www.opera.com" />
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" name="name" id="name" value="" />
    </li>
    <li>
      <label for="email">Email:</label>
      <input type="text" name="email" id="email" value="" />
    </li>
    <li>
      <label for="comments">Comments:</label>
      <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
    </li>
    <li>
      <input type="submit" value="submit" />
      <input type="reset" value="reset" />
    </li>
  </ul>
</form>

Quan l'obriu en un navegador, aquest formulari té l'aspecte que es pot veure a la figura 2:

El segon exemple de formulari

Figura 2. El segon exemple de formulari; el seu aspecte és millor, però encara no és perfecte.

Podeu jugar amb aquest formulari millorat a: "step-2-form.html"

Aquí he afegit algunes coses al formulari bàsic. Vegem-ho per a saber què és el que he fet:

El segon formulari té un aspecte una mica millor, però encara el podem seguir millorant una mica més. Ja ha arribat el moment d'afegir-hi alguns altres detalls abans d'aplicar-hi estils.

20.3. Pas tres: Afegir-hi semàntica, estil i una mica més d'estructura

Ara acabaré el que he començat al principi d'aquest apartat amb la versió definitiva del meu formulari d'exemple:

<form id="contact-form" action="script.php" method="post"> 
  <fieldset>
    <legend>Contact Us:</legend>
    <ul>
      <li>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" value="" />
      </li>
      <li>
        <label for="email">Email:</label>
        <input type="text" name="email" id="email" value="" />
      </li>
      <li>
        <label for="comments">Comments:</label>
        <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
      </li>
      <li>
        <label for="mailing-list">Would you like to sign up for our mailing list?
		</label>
        <input type="checkbox" checked="checked" id="mailing-list" value="Yes,
 		sign me up!" />
      </li>
      <li>
        <input type="submit" value="submit" />
        <input type="reset" value="reset" />
      </li>
    </ul>
  </fieldset>
</form>

Quan es mostra en un navegador, aquest formulari té l'aspecte que es pot veure a la figura 3:

El tercer i definitiu exemple de formulari

Figura 3. El formulari d'exemple definitiu en tota la seva esplendor.

Podeu veure la versió real d'aquest formulari en un navegador i jugar-hi a: "step-3-form".

Els dos últims elements principals que he afegit a aquest formulari són fieldset (conjunt de camps) i legend (llegenda). Cap d'aquests és obligatori, però són molt útils per a formularis més complexos i per a la presentació.

L'element fieldset us permet organitzar el formulari en mòduls semàntics. En un formulari més complex, podríeu per exemple utilitzar diferents fieldset per a contenir informació de l'adreça, informació de facturació, informació sobre les preferències del client... L'element legend permet donar un nom a cadascuna de les seccions fieldset.

També he aplicat una mica de CSS a aquest formulari per a donar estil a l'etiquetatge estructural. Això s'aplica al tercer formulari d'exemple amb un full d'estils extern; per veure els estils, aneu a la pàgina d'exemple. Les dues coses més importants que volia que fes el CSS bàsic eren afegir marges per a alinear les etiquetes i els quadres d'introducció de dades, i eliminar els pics de la llista desordenada. Aquest és el CSS que resideix al full d'estils extern:

#contact-form fieldset {width:40%;}
#contact-form li {margin:10px; list-style: none;}
#contact-form input  {margin-left:45px; text-align: left;}
#contact-form textarea {margin-left:10px; text-align: left;}

Què fa aquest CSS? La primera línia defineix l'estil de la vora del conjunt de camps per tal que no ocupi tota la pàgina; també podeu definir que no hi hagi cap vora amb {border: none;} en cas que no en vulgueu. La segona línia afegeix un marge de 10 píxels als elements li per posar una mica d'espai visual entre cadascun dels elements de la llista. Les línies tercera i quarta defineixen un marge esquerre en els elements input i textarea per tal que no quedin a la mateixa alçada que les etiquetes i s'alineïn adequadament. Si voleu més informació sobre els estils d'un formulari, consulteu l'apartat sobre els estils dels formularis d'aquest currículum d'estàndards web o bé l'article de Nick Rigby a A List Apart, "Prettier Accessible Forms". També podreu trobar més informació sobre els marges i les vores més endavant en aquest curs.

Resum

En aquest apartat he explicat els tres passos més bàsics per a crear un formulari conforme amb els estàndards del web. El món dels formularis inclou moltes més coses que no he explicat aquí i que, en cas que vulgueu, haureu d'explorar pel vostre compte. Hi ha les tecles d'accés, les caselles de selecció i els botons d'opció, els botons de tramesa i reinicialització personalitzats i els quadres de selecció.

En el formulari anterior del pas tres he afegit una casella de selecció (checkbox) per tal de mostrar que es poden fer servir els atributs addicionals de l'element input per a recollir informació que queda més enllà de la introducció de text en una única línia o de la introducció de text en una àrea de múltiples línies. Els valors dels atributs de botó checkbox i radio es poden fer servir per a afegir-hi la possibilitat de fer preguntes curtes i donar al lector una llista d'opcions entre les quals podrà escollir (les caselles de selecció permeten seleccionar diverses opcions, mentre que els botons d'opció només en permeten seleccionar una). Els botons d'opció poden ser molt útils en un formulari d'enquesta.

L'element select, que tampoc s'ha tractat en aquest apartat, es pot utilitzar per a un menú desplegable amb opcions (per exemple, una llista de països o d'estats/províncies).

Preguntes de repàs

Ja és hora que escriviu el codi del vostre formulari de contacte.

  1. Creeu un formulari de contacte senzill que demani a l'usuari el seu nom, l'adreça electrònica i un comentari.

  2. Afegiu-hi una casella de selecció que demani al lector si es vol unir a la vostra llista de correu.

  3. Utilitzeu el CSS per a aplicar estils al formulari: definiu una amplada per al formulari, alineeu les etiquetes a l'esquerra, poseu un color de fons a la pàgina, etc.

Lectures complementàries

Cameron Adams, "Accessible, stylish form layout".
http://www.themaninblue.com/writing/perspective/2004/03/24/

Brian Crescimanno, "Sensible Forms: A Form Usability Checklist".
http://www.alistapart.com/articles/sensibleforms/

Simon Willison, "Easier form validation with PHP".
http://simonwillison.net/2003/Jun/17/theHolyGrail/

Les especificacions. No qualsevol especificació antiga, sinó L'ESPECIFICACIÓ W3C.

Si mai patiu d'insomni i un vas de llet calenta, o comptar xais no us solucionen el problema, llegiu les especificacions completes de l'HTML a w3.org. És molt més barat i més efectiu que qualsevol altre remei. Que [inseriu aquí el nom de la deïtat] beneeixi els enginyers de tot el món.

Els amables integrants de W3.org han definit les diferències entre "GET" i "POST" i quan s'han d'utilitzar:

I tot l'agraïment del món per al Sr. Rigby:
http://alistapart.com/articles/prettyaccessibleforms

Logo Creative Commons
Els continguts recollits en aquest article estan subjectes a una llicència Creative
Commons Reconeixement, No comercial - Compartir Igual 3.0 No adaptada
.
: Anar a l'índex :