Controls de formulari originals

This translation is in progress.

A l’article anterior, vam marcar un exemple de formulari web funcional, vam introduir alguns controls de formulari i elements estructurals comuns, però sobretot ens vam centrar en l'accessibilitat. A continuació, analitzarem en detall la funcionalitat dels diferents controls de formulari, o widgets, i estudiarem totes les opcions disponibles per recollir diferents tipus de dades. En aquest article, veurem el conjunt original de controls de formulari, disponibles a tots els navegadors des dels primers dies.

Prerequisits: Coneixements bàsics d'informàtica i una comprensió bàsica d’HTML.
Objectiu: Comprendre en detall el conjunt original de controls nadius de formulari disponibles als navegadors per a la recollida de dades i com implementar-los mitjançant HTML.

Ja coneixes alguns elements de formulari, com <form>, <fieldset>, <legend>, <textarea>, <label>, <button> i <input>. Aquest article cobreix:

Nota: Les característiques comentades en aquest article són compatibles amb tots els navegadors, però no és el cas amb tots els controls de formulari. Cobrim els controls de formulari més nous afegits en HTML5 en els dos articles següents. Si vols una referència més avançada, has de consultar la nostra referència d’elements de formularis HTML i, en particular, la nostra extensa referència de tipus <input>.

Camps d'entrada de text

Els camps de text <input> són els ginys del formulari més bàsics. Són una forma molt convenient de permetre a l’usuari introduir qualsevol tipus de dades, i ja hem vist alguns exemples senzills.

Nota: Els camps de text en format HTML són controls senzills d’entrada de text. Això vol dir que no pots utilitzar-los per realitzar una edició rica (negreta, cursiva, etc.). Tots els ginys de formulari que trobis amb text enriquit són ginys de formulari personalitzats creats amb HTML, CSS i JavaScript.

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

  • Es poden marcar com a readonly (l'usuari no pot modificar el valor d'entrada però es continua enviant amb la resta de dades del formulari) o disabled (el valor d'entrada no es pot modificar i no s'envia mai amb la resta de dades del formulari).
  • Poden tenir un placeholder; aquest és el text que apareix dins de la caixa d’entrada de text que s’ha d’utilitzar per descriure breument l’objectiu de la mateixa caixa.
  • Es poden restringir dins de size (la mida física de la caixa) i maxlength (el nombre màxim de caràcters que es poden introduir a la caixa).
  • Poden beneficiar-se de la revisió ortogràfica (utilitzant l'atribut spellcheck), si el navegador és compatible.

Nota: L’element <input> és únic entre els elements HTML perquè pot adoptar moltes formes diferents segons el valor del seu atribut type. S'utilitza per crear la majoria de tipus de ginys de formulari, incloent camps de text d'una sola línia, controls d'hora i de data, controls sense entrada de text com 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 mitjançant un element <input>, on el seu valor d'atribut type està definit en text o ometent l'atribut type (el valor per defecte és text). El valor text d’aquest atribut és també el valor alternatiu que utilitza el navegador si no pot distingit el valor que s'especifica per a l’atribut type (per exemple, si especifiques type="color" i el navegador no és compatible amb els selectors de color).

Nota: Pots trobar exemples de tots els tipus de camp de text d’una sola línia a GitHub a single-line-text-fields.html (mirar també en directe).

A continuació, es mostra un exemple bàsic del 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 d’introducció de text predeterminats, focalitzats i desactivats a Firefox 71 i Safari a macOS i a Chrome 79 i Edge 18 a Windows 10.

Captura de pantalla de l’atribut desactivat i predeterminat: estils d’enfocament en una entrada de text a 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 type que aplica restriccions de validació específiques i altres funcions, per exemple a l'hora d'introduir direccions URL o números. Abordarem les que hi ha al següent article: tipus d’entrada HTML5.

Camp de contrasenya

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

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

El valor de contrasenya (password) no afegeix cap restricció especial al text introduït, però amaga el valor introduït al camp (per exemple, amb punts o asteriscs) per impedir que altres usuaris ho puguin llegir.

Tingues en compte que es tracta només d’una funció d’interfície d’usuari; a menys que enviïs el formulari de forma segura, s’enviarà un text senzill, cosa que no és aconsellable de cara 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 qualsevol pàgina que inclogui formularis mitjançant una connexió segura (és a dir, a una adreça https://...), de manera que les dades es xifrin abans de ser enviades.

Els navegadors reconeixen les implicacions de seguretat de l'enviament de dades del formulari a través d'una connexió insegura i tenen advertiments per dissuadir els usuaris d'utilitzar formularis insegurs. Per obtenir més informació sobre el que implementa Firefox al respecte, mira Contrasenyes insegures.

El contingut ocult

Un altre control de text original és el tipus d’entrada hidden. S'utilitza per crear un control de formulari que és invisible per a l'usuari, però encara 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 indicant quan es va fer una comanda. Com que està ocult, l’usuari no pot veure ni editar el valor de manera intencionada, mai no tindrà focus i un lector de pantalla tampoc ho detectarà.

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

Si crees aquest element, cal que configuris els seus atributs name i value. El valor es pot configurar dinàmicament mitjançant JavaScript. El tipus d’entrada hidden no ha de tenir cap etiqueta associada.

Altres tipus d'entrada de text, com search, url i tel, es van afegir amb HTML5. Es tractaran al següent tutorial: tipus d’entrada HTML5.

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

Els elements comprovables són controls d’estat els quals pots canviar fent clic sobre ells o les seves etiquetes associades. Hi ha dos tipus d’elements comprovables: la casella de selecció i el botó d'opció. Tots dos utilitzen l’atribut checked per indicar si el giny anirà verificat de manera predeterminada o no.

Val la pena assenyalar que aquests ginys no es comporten exactament igual que altres ginys de formulari. Per a la majoria de ginys de formulari, un cop enviat el formulari s’envien tots els ginys que tenen un atribut name, fins i tot si no s’ha omplert cap valor. En el cas dels elements comprovables, els seus valors s’envien només si es comproven. Si no es comproven, no s'envia res, ni tan sols el seu nom. Si es comproven però no tenen cap valor, el nom s'envia amb el valor on.

Nota: Pots trobar els exemples d'aquesta secció a GitHub com a checkable-items.html (mira-ho també en directe).

Per aconseguir la màxima usabilitat/accessibilitat, es recomana envoltar cada llista d’elements relacionats entre si dins d'un element <fieldset>, amb un element <legend> que ofereixi una descripció general de la llista. Cada parella individual d'elements <label>/<input> hauria de contenir-se al seu propi element de llista (o similar). L'element associat <label> se situa generalment immediatament després 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 <legend>. Mira els exemples enllaçats anteriorment per obtenir exemples estructurals.

Casella de verificació

Les caselles de verificació es creen mitjançant l’element <input> amb un atribut type ajustat al valor checkbox.

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

Si s’inclou l’atribut checked, la casella de selecció es marca automàticament quan es carrega la pàgina. En fer clic a la casella de selecció o a la seva etiqueta associada, s'activa o es desactiva.

Les captures de pantalla següents mostren les caselles de verificació per defecte, centrades i desactivades a Firefox 71 i Safari 13 a macOS i Chrome 79 i Edge 18 a Windows 10:

Marques de control per defecte, centrades i desactivades a Firefox 71 i Safari 13 a Mac i Chrome 79 i Edge 18 a Windows 10

Nota: Qualsevol casella de selecció i botons d'opció amb l'atribut checked a la càrrega coincideix amb la pseudoclasse :default, fins i tot si ja no es comproven. Qualsevol element revisat coincideix amb la pseudoclasse :checked.

A causa de la naturalesa activa-inactiva de les caselles de selecció, les consideren botons de commutació, molts desenvolupadors i dissenyadors han expandit l'estil de la casella de selecció per defecte per crear botons que semblen commutadors. Pots veure un exemple en acció aquí (mira també el codi font).

Botó d'opció

Un botó d'opció es crea mitjançant l’element <input> amb el seu atribut type establert al valor radio:

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

Es poden unir diversos botons de ràdio. Si comparteixen el mateix valor per al seu atribut name, es considerarà que es troben al mateix grup de botons. Només es pot marcar un botó d’un grup determinat alhora; això vol dir que, quan es clica un d’ells, tots els altres es desmarquen automàticament. Quan s’envia el formulari, només s’envia el valor del botó d'opció seleccionat. Si no se'n clica cap, es considera que el conjunt de botons d'opció es troba en un estat desconegut i no s’envia cap valor amb el formulari. Una vegada que es clica un dels botons d'opció d’un mateix grup de botons, no és possible que l’usuari desmarqui tots els botons sense restablir 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ó no marcats i marcats, els centrats i els desactivats: a Firefox 71 i Safari 13 a MacOs i Chrome 79 i Edge 18 a Windows 10.

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

Botons reals

El botó d'opció en realitat no és un botó, malgrat el seu nom; avancem i mirem els botons reals! Els botons poden produir tres tipus d’entrada:

submit
Envia les dades del formulari al servidor. Per als elements <button>, ometent l'atribut type (o un valor de type no vàlid) resulta en un botó d'enviament.
reset
Restableix tots els ginys de formulari als valors predeterminats.
button
Botons que no tenen cap efecte automàtic però es poden personalitzar mitjançant codi JavaScript.

A més, l’element <button> pot prendre un atribut type per imitar aquests tres tipus d'entrada. La diferència principal entre tots dos és que els elements <button> reals són molt més estilosos.

Nota: El tipus d’entrada image també es mostra com a botó. També ho cobrirem més endavant.

Nota: Pots trobar els exemples d'aquesta secció a GitHub com a button-examples.html (mira-ho també en directe).

A continuació, pots trobar exemples de cada tipus de botó <input>, 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 si fas servir un element <button> o un element <input>. Com pots veure als exemples, però, els elements <button> et permeten utilitzar HTML al teu contingut, que s'insereix entre les etiquetes <button> d'obertura i tancament. En canvi, els elements <input> són elements buits; el contingut que s’hi mostra s’insereix dins de l’atribut value, i per tant només accepta text com a contingut.

Els exemples següents mostren els tipus d’entrada de botons predeterminats, enfocats i desactivats: a Firefox 71 i Safari 13 a macOS i Chrome 79 i Edge 18 a Windows 10.

Tipus d'entrada predeterminats, enfocats i desactivats de botons a Firefox 71 i Safari 13 a Mac i Chrome 79 i Edge 18 a Windows 10

Botó d'imatge

El control botó d'imatge es mostra exactament com un element <img>, tret quan l'usuari hi faci clic, que passarà a comportar-se com un botó d'enviament.

Es crea un botó d'imatge mitjançant un element <input> amb el seu atribut type establert en el valor image. Aquest element admet exactament el mateix conjunt d’atributs que l’element <img>, a més de tots els atributs compatibles amb altres botons de formulari.

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

Si s’utilitza el botó d’imatge per enviar el formulari, aquest control no envia el seu valor, sinó que s’envien les coordenades X i Y del clic a la imatge (les coordenades són relatives a la imatge, és a dir, que la part superior esquerra de la imatge representa la coordenada (0, 0)). Les coordenades s’envien com a dos parells clau/valor:

  • La clau de valor X és el valor de l’atribut name seguit de la cadena «.x».
  • La clau de valor Y és el valor de l’atribut name seguit de la cadena «.y»

Així, per exemple, quan facis clic a la imatge a les coordenades (123, 456) i s’enviï mitjançant el mètode get, podràs veure els valors adjunts a l’URL de la manera següent:

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

Aquesta és una manera molt convenient de construir un «mapa en calent». La manera d’enviar i recuperar aquests valors es detalla a l’article Enviar dades de formulari.

Selector de fitxers

Hi ha un últim tipus <input> que ens va arribar amb l'HTML inicial: el tipus d’entrada del fitxer. Els formularis poden enviar fitxers a un servidor (aquesta acció específica també es detalla a l’article Enviar dades de formulari). El giny del selector de fitxers es pot utilitzar per triar un o més fitxers per enviar.

Per crear un giny de selecció de fitxers, utilitza l’element <input> amb el seu atribut type configurat en file. Els tipus de fitxers que s’accepten es poden limitar amb l’atribut accept. A més, si vols deixar que l’usuari triï més d’un fitxer, pots fer-ho afegint l’atribut multiple.

Exemple

En aquest exemple, es crea un selector de fitxers que sol·licita fitxers d’imatges gràfiques. L'usuari té la possibilitat de seleccionar diversos fitxers en aquest cas.

<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 afegint informació de captura a l’atribut accept com:

<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 definir els controls de formulari tenen alguns dels seus propis atributs específics. No obstant això, hi ha un conjunt d’atributs comuns a tots els elements de formulari. Ja n'has conegut alguns , però a continuació es mostra una llista d’aquests atributs comuns, per a la teva referència:

Nom de l'atribut Valor per defecte Descripció
autofocus false Aquest atribut booleà permet especificar que l'element hauria de tenir automàticament un focus d'entrada quan es carrega la pàgina. Només un element associat al formulari en un document pot tenir aquest atribut especificat.
disabled false Aquest atribut booleà indica que l'usuari no pot interactuar amb l'element. Si no s'especifica aquest atribut, l'element hereta la seva configuració de l'element que conté, per exemple, <fieldset>; si no hi ha cap element que conté l'atribut disabled establert, l'element està habilitat.
form L’element <form> al qual s’associa el giny, s’utilitza si no està imbricat dins d’aquest formulari. El valor de l’atribut ha de ser l’atribut id d’un element <form> del mateix document. D’aquesta manera, pots associar un control de formulari a un formulari que es troba fora, encara que es trobi dins d’un element de formulari diferent.
name El nom de l'element; s'envia amb les dades del formulari.
value El valor inicial de l'element.

Conclusió

Aquest article ha exposat els tipus d’entrada més antics: el conjunt original introduït els primers dies d’HTML, que és compatible amb tots els navegadors. A l'article següent, analitzarem els valors més recents de l’atribut type que s’han afegit a HTML5.

En aquest mòdul

Temes avançats