You are on the editable version of MDN Web Docs

View as an MDN Web Docs user: https://developer.mozilla.org/ca/docs/Learn/HTML/Forms/Controls_de_formulari_originals

En l’article anterior hem etiquetat un exemple de formulari web funcional, hem introduït alguns controls de formulari i elements estructurals comuns, però sobretot, ens hem centrat en l'accessibilitat. A continuació analitzarem amb detall la funcionalitat dels diferents controls de formulari, també anomenats ginys o widgets, i estudiarem totes les opcions que hi ha disponibles per a recollir diferents tipus de dades. En aquest article, veurem el conjunt original de controls de formulari que hi ha disponibles en tots els navegadors des dels primers dies.

Prerequisits: Coneixements bàsics d'informàtica i una comprensió bàsica d’HTML.
Objectiu: Comprendre amb detall el conjunt de controls de formulari originals que hi ha disponibles als navegadors per a la recollida de dades, i com implementar-los amb HTML.

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

Nota: Les característiques que comentem en aquest article són compatibles amb tots els navegadors, però no amb tots els controls de formulari. En els dos articles següents expliquem els controls de formulari que s’han afegit a l’HTML5 més recentment. Si vols una referència més avançada, has de consultar la nostra referència d’elements de formulari HTML i, en particular, la nostra extensa referència de tipus <input>.

Camps d'entrada de text

Els camps d’entrada de text <input> són els controls del formulari més bàsics. Són una manera molt còmoda de permetre a l’usuari introduir qualsevol tipus de dades, i ja n’hem vist alguns exemples senzills.

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

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

  • Es poden etiquetar amb readonly (l'usuari no pot modificar el valor d'entrada, però aquest s’envia igualment 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 element placeholder; és el text que apareix dins la caixa d’entrada de text que s’ha d’utilitzar i que en descriu breument l’objectiu.
  • Se’n poden restringir les propietats size (la mida física de la caixa) i maxlength (el nombre màxim de caràcters que es poden introduir a la caixa).
  • Són compatibles amb la funció de revisió ortogràfica (utilitzant l'atribut spellcheck), si el navegador hi és compatible.

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

Nota: Consulta exemples de tots els tipus de camp de text d’una sola línia a GitHub, en el fitxer single-line-text-fields.html (també pots consultar l’exemple en viu).

A continuació es mostra un exemple bàsic de 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 de controls d’entrada de text predeterminat, amb el focus i desactivat en Firefox 71 i Safari amb macOS i en Chrome 79 i Edge 18 amb Windows 10.

Captura de pantalla que mostra els estils de l’atribut en els estats predeterminat, amb el focus i desactivat per a un control d’entrada de text en 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 adreces URL o números. Les tractarem en l’article següent: tipus d’entrada HTML5.

Camps de contrasenya

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

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

El valor de contrasenya (password) no afegeix cap restricció especial al text que s’introdueix al camp, però n’amaga el valor (per exemple, amb punts o asteriscs) i impedeix que altres usuaris el puguin llegir.

Tingues en compte que es tracta només d’una funció d’interfície d’usuari; si no és que envies el formulari d’una manera segura, s’enviarà un text pla, i això no és aconsellable per 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 les pàgines que incloguin formularis en una connexió segura (és a dir, una adreça https://...), perquè les dades se xifrin abans d’enviar-se.

Els navegadors reconeixen les implicacions de seguretat de l'enviament de dades del formulari per una connexió no segura i disposen de missatges d’advertiments per a dissuadir els usuaris d'utilitzar formularis no segurs. Per a obtenir més informació sobre el que implementa Firefox, consulta l’article Contrasenyes insegures.

Contingut ocult

Un altre control de text original és el tipus d’entrada hidden. S'utilitza per a crear un control de formulari que és invisible per a l'usuari, però que 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 que indiqui quan s’ha fet una comanda. Com que és un control ocult, l’usuari no el pot veure ni editar-ne el valor de manera intencionada, mai no rep el focus i un lector de pantalla tampoc no el detecta.

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

Quan crees aquest element, cal que hi configuris els atributs name i value. El valor es pot configurar dinàmicament amb JavaScript. El tipus d’entrada hidden no hauria de tenir cap etiqueta associada.

Amb HTML5 es van afegir altres tipus d'entrada de text, com search, url i tel. Es tracten en el tutorial següent: tipus d’entrada HTML5.

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

Els elements de selecció (o checkable items, en anglès) són controls dels quals pots canviar l’estat fent-hi clic a sobre o en les etiquetes que hi estan associades. Hi ha dos tipus d’elements de selecció: la casella de selecció, o check box, i el botó d'opció, o radio button. Tots dos utilitzen l’atribut checked per indicar si el control està en estat seleccionat per defecte o no.

Val la pena assenyalar que aquests controls no es comporten exactament igual que altres controls de formulari. Per a la majoria de controls de formulari, un cop validat el formulari s’envien tots els controls que tenen un atribut name, fins i tot si no se n’ha omplert el valor. En el cas dels elements de selecció, els valors s’envien només si estan seleccionats. Si no ho estan, no s'envia res, ni tan sols el nom. Si estan seleccionats però no tenen cap valor, el nom s'envia amb el valor on.

Nota: Pots trobar els exemples d'aquesta secció a GitHub, en el fitxer checkable-items.html (o també consultar-ne l’exemple en viu).

Per a assolir una usabilitat/accessibilitat màxima, es recomana delimitar cada llista d’elements que estan relacionats entre si dins d'un element <fieldset> amb un element <legend> que ofereixi una descripció general de la llista. Cada parella d'elements <label>/<input> hauria d’estar continguda en un element de llista (o similar) propi. L'element associat <label> se situa en general immediatament a continuació 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>. Observa els exemples estructurals que et presentem en l’enllaç anterior.

Caselles de verificació

Una casella de verificació es crea amb l’element <input> i un atribut type amb el valor checkbox.

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

Si s’hi inclou l’atribut checked, la casella de verificació es marca automàticament en carregar-se la pàgina. Si s’hi fa clic, en la casella de verificació o en l’etiqueta associada, la casella de verificació canvia entre els estats activat o desactivat.

Les captures de pantalla següents mostren les caselles de verificació en els estats per defecte, amb el focus i desactivat en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10:

Caselles de verificació en els estats per defecte, amb el focus i desactivat en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10

Nota: La pseudoclasse :default selecciona les caselles de verificació i els botons d'opció que presenten l'atribut checked en el moment de carregar-se la pàgina, encara que ja no estiguin en l’estat checked. La pseudoclasse :checked selecciona només els elements que estan en estat checked.

A causa de la característica activada-desactivada que presenten les caselles de verificació, es consideren botons de commutació i molts desenvolupadors i dissenyadors han estès l’estil per defecte de la casella de selecció per a crear botons que semblen interruptors. Pots consultar-ne un exemple en acció aquí (o també pots consultar-ne el codi d’origen).

Botons d'opció

Un botó d'opció es crea amb l’element <input> i l’atribut type establert en el valor radio:

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

És possible associar diversos botons de ràdio. Si comparteixen el mateix valor de l’atribut name, es considera que estan en el mateix grup de botons. Només és possible marcar un botó d’un grup determinat cada vegada; això vol dir que quan se’n clica un, tots els altres es desmarquen automàticament. Quan el formulari s’envia, només s’envia el valor del botó d'opció seleccionat. Si no se'n selecciona cap, es considera que el conjunt de botons d'opció està en un estat desconegut i no s’envia cap valor amb el formulari. Quan s’ha clicat un dels botons d'opció d’un mateix grup de botons, no és possible desmarcar tots els botons sense reiniciar 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ó en els estats no marcat i marcat, amb el focus i desactivats: en Firefox 71 i Safari 13 amb MacOs i Chrome 79 i en Edge 18 amb Windows 10.

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

Botons reals

En realitat, els botons d'opció no són botons, malgrat el nom. Ara anirem una mica més enllà i veurem botons autèntics! Hi ha tres tipus d’entrada que proporcionen botons:

submit
Envien les dades del formulari al servidor. Per als elements <button>, si s’omet l'atribut type (o es posa un valor de type no vàlid), s’obté un botó d'enviament.
reset
Restableixen tots els controls de formulari als valors predeterminats.
button
No presenten cap efecte automàtic, però es poden personalitzar amb codi JavaScript.

A més, l’element <button> pot prendre un atribut type i imitar aquests tres tipus d'entrada. La diferència principal entre els dos elements és que els elements <button> autèntics admeten moltes més opcions d’estil.

Nota: També es pot representar com un botó el tipus d’entrada image. El tractarem més endavant també.

Nota: Pots trobar els exemples d'aquesta secció a GitHub, en els fitxers button-examples.html (o també pots consultar l’exemple en viu).

A continuació pots trobar exemples de cada tipus d’entrada <input> de tipus botó, 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, tant si fas servir un element <button> com un element <input>. Però, com pots veure en els exemples, els elements <button> et permeten aplicar HTML al contingut inclòs entre les etiquetes <button> d'obertura i de 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 accepten contingut textual.

Els exemples següents mostren els tipus d’entrada per defecte dels botons en els estats predeterminat, amb el focus i desactivat: en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10.

Tipus d’entrada per defecte dels botons en els estats predeterminat, amb el focus i desactivat: en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10

Botons imatge

El control botó imatge es comporta exactament com un element <img>, però passa a comportar-se com un botó de validació quan un usuari hi fa clic.

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

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

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

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

Així, per exemple, observa que en fer clic a les coordenades (123, 456) de la imatge i enviar pel mètode get, aquests valors s’annexen a l’URL de la manera següent:

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

Aquesta és una manera molt còmoda de construir un «mapa interactiu». La manera d’enviar i recuperar aquests valors es detalla en l’article Enviar les dades d’un formulari.

Selector de fitxers

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

Pots crear un control de selecció de fitxers amb l’element <input> i l’atribut type establert en el valor file. Pots restringir els tipus de fitxers que se seleccionen amb l’atribut accept. A més, pots deixar que l’usuari triï més d’un fitxer si hi afegeixes l’atribut multiple.

Exemple

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

<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 i afegir a l’atribut accept informació sobre la captura com ara:

<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 a definir controls de formulari tenen atributs específics propis. Això no obstant, hi ha un conjunt d’atributs comuns a tots els elements de formulari. Ja n'has conegut uns quants, però a continuació et presentem una llista d’aquests atributs comuns, perquè els tinguis com a referència:

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

Resum

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

En aquest mòdul

Temes avançats

Document Tags and Contributors

Contributors to this page: UOCccorcoles, editorUOC
Last updated by: UOCccorcoles,