El teu primer formulari

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 <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: <form>, <label>, <input>, <textarea> i <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 <form>

Tots els formularis comencen amb un element <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 <section> o <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:

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

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 <form> anterior al teu element HTML <body>.

Els elements <label>, <input> i <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 <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 <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 <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 <input>, l’atribut més important és type. Aquest atribut és molt important perquè defineix la manera com apareix l’element <input>, i com es comporta. Trobaràs més informació més endavant, en l’article Els controls de formulari bàsics originals.

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

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, <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 <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 <textarea>, l'has de posar entre les etiquetes d'obertura i tancament de l'element <textarea>, com en el cas següent:

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

L’element <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 <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 <button> també accepta un atribut type, que a la vegada accepta un d'aquests tres valors: submit, reset o button.

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

Nota: També pots utilitzar l’element <input> amb el type corresponent i crear un botó, per exemple <input type="submit">. L’avantatge principal de l’element <button> és que l’element <input> només admet text, mentre que l’element <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 <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 <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:

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.

En aquest mòdul

Temes avançats