El teu primer formulari

This translation is in progress.

Aquest articles t'ofereix la teva primera experiència de creació d’un formulari web, incloent el disseny d’un formulari senzill amb els controls de formulari HTML adequats i altres elements HTML, com afegir algun estil molt senzill mitjançant CSS i com s'envien les dades a un servidor. A mida que avancem en el mòdul anirem ampliant aquesta informació.

Prerequisits: Coneixements bàsics d'informàtica i una comprensió bàsica d’HTML.
Objectiu: Familiaritzar-se amb els formularis web, per a què serveixen, com dissenyar-los i els elements bàsics HTML que 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 generalment s’envien a un servidor web per al seu processament i emmagatzematge (mira Enviar dades de formulari més endavant al mòdul) o que permeten al client actualitzar de forma immediata la interfície d’alguna manera (per exemple, afegir un altre element de la 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), 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 alguns altres elements que també s'han de conèixer.

Els controls de formulari també es poden programar per fer complir formats o valors específics que s’han d’introduir (validació del formulari) i es poden combinar amb etiquetes de text que descriuen el seu propòsit tant per als usuaris estàndard com els que tenen discapacitats visuals.

Dissenyar el formulari

Abans de començar a codificar, sempre és millor fer un pas enrere i prendre's 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 demanar a l'usuari que 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 a les persones i perdre els usuaris. Fes que sigui senzill i concís: demana només les dades que necessitis.

El disseny de formularis és un pas important a l’hora de crear un lloc web o aplicació. Aquest article no cobreix l’experiència dels usuaris dels formularis, però si vos aprofundir en aquest tema, pots llegir els articles següents:

En aquest article, crearem un formulari simple de contacte. Fem un esbós.

La forma aproximada de construir un esbós

El nostre formulari contindrà tres camps de text i un botó. Demanem a l’usuari el seu nom, el seu correu electrònic i el missatge que vol enviar. En prémer el botó s’enviaran les seves dades a un servidor web.

Aprenentatge actiu: La implantació del nostre formulari HTML

D’acord, en primer lloc creem l’HTML per al nostre formulari. Utilitzarem els següents elements HTML: <form>, <label>, <input>, <textarea> i <button>.

Abans d’avançar, fes una còpia local de la nostra plantilla HTML simple: introduiràs el formulari HTML aquí.

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ò específicament per contenir formularis; també admet alguns atributs específics per configurar el comportament del formulari. Tots els seus atributs són opcionals, però és pràctica estàndard 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 del formulari quan es validen.
  • L'atribut method defineix amb quin mètode HTTP enviar les dades (normalment get o post).

Nota: Veurem com funcionen aquests atributs al nostre article Enviar les dades del formulari que trobaràs més endavant.

Per ara, afegeix l'element <form> anterior al teu element HTML <body>.

Els elements <etiqueta>, <input> i <textarea>

El nostre formulari de contacte no és complex: la porció d’entrada de 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 implementar aquests ginys 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 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 a l'article). Per a l'usabilitat i l'accessibilitat, incloem una etiqueta explícita per a cada control de formulari. 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 s'associa un formulari a la seva etiqueta.

És molt útil fer-ho: associa l’etiqueta amb el control del formulari, permetent als usuaris de ratolí, trackpad i dispositius tàctils fer clic a l’etiqueta per 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 a Com estructurar un formulari web.

A l’element <input>, l’atribut més important és l’atribut type. Aquest atribut és extremadament important perquè defineix la manera com apareix i es comporta l’element <input>. Més endavant, trobaràs més informació a l’article Controls de formularis originals bàsics.

  • 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 realitzarà algunes comprovacions de validació de les dades mecanografiades per l'usuari. També crea un disseny de teclat més adequat per introduir adreces de correu electrònic (per exemple, amb un símbol @ per defecte) i fa que aparegui en dispositius amb teclats dinàmics, com els telèfons intel·ligents. Més endavant trobaràs més informació sobre la validació del formulari a l'article de validació del formulari 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 del HTML. L’etiqueta <input> és un element buit, el 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é un impacte en una característica específica dels formularis: la manera de definir el valor per defecte. Per definir el valor predeterminat d'un element <input> has d'utilitzar l'atribut value així:

<input type="text" value="by default this element is filled with this 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 <botó>

L'etiquetatge del nostre formulari és gairebé complet; només haurem d’afegir un botó per permetre a l’usuari enviar les seves dades un cop emplenat el formulari. Això es fa mitjançant 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 per l'atribut action de l'element <form>.
  • Un clic en un botó reset restableix immediatament tots els controls del formulari al seu valor predeterminat. Des d’un punt de vista de l'experiència d'usuari, es considera una mala pràctica, per la qual cosa hauràs d’evitar fer servir aquest tipus de botons tret que realment tinguis un bon motiu per incloure’n un.
  • Un clic sobre un botó button no fa res! Això sembla una tonteria, però és molt útil per crear botons personalitzats; pots definir la funció escollida amb JavaScript.

Nota: També pots utilitzar l’element <input> amb el type corresponent per produir un botó, per exemple <input type="Enviar">. L’avantatge principal de l’element <button> és que l’element <input> només permet text mentre que l’element <button> permet contingut HTML complet, permetent botons més complexos i creatius.

Aplicar un estil bàsic al formulari

Ara que has acabat d'escriure el codi HTML del teu formulari, intenta guardar-lo i mirar-lo en un navegador. De moment, veuràs que es veu bastant lleig.

Nota: Si no creus tenir el codi HTML correcte, prova de comparar-lo amb el nostre exemple acabat: mira first-form.html (també el pots consultar en directe).

Les formes són notòriament difícils d’estilar perquè quedin boniques. En aquest article no ensenyarem a dissenyar l’estil de forma detallada, de manera que de moment només aconseguirem afegir una mica de CSS perquè quedi perfecte.

Abans de res, afegeix un element <style> a la teva pàgina, dins de l'encapcelament HTML. Ha de quedar així:

<style>

</style>

A l'etiqueta style, afegeix 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 assegurar 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 {
  /* Alinear els camps de text multilínies amb les seves etiquetes */
  vertical-align: top;

  /* Proporcionar espai per escriure algun text */
  height: 5em;
}

.button {
  /* Alinear 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 i torna a carregar-lo i veuràs que el teu formulari hauria de veure's molt menys lleig.

Nota: Pots trobar la nostra versió a GitHub a first-form-styled.html (veure-la en directe).

Enviar les dades del formulari al servidor web

L’última part, i potser la més complicada, és gestionar les dades del formulari al servidor. L’element <form> defineix on i com enviar les dades gràcies als 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 servidor; informen al navegador sobre quin nom ha de donar a cadascuna de les dades i, per part del servidor, permeten manejar cada dada per 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 a cada giny del formulari que recopilarà una informació específica. Vegem de nou alguns codis 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 peces de dades anomenades «user_name», «user_email» i «user_message». Aquestes dades s’enviaran a l’URL «/my-handling-form-page» mitjançant el mètode post de HTTP .

Al costat del servidor, l'script a l'URL «/my-handling-form-page» rebrà les dades com a llista de 3 elements clau/valor continguts a la sol·licitud HTTP. La teva manera de gestionar aquest script depèn de les teves dades. Cada llenguatge de servidor (PHP, Python, Ruby, Java, C#, etc.) té el seu propi mecanisme de maneig de dades de formularis. Està fora de l’àmbit d’aquesta guia aprofundir en aquest tema, però si vols saber-ne més, hem proporcionat alguns exemples als nostres articles Enviar dades de formulari que trobaràs més endavant.

Resum

Enhorabona, has creat el teu primer formulari web. S'hauria de veure així:

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