{"id":208,"date":"2019-01-21T20:33:25","date_gmt":"2019-01-21T18:33:25","guid":{"rendered":"http:\/\/tutorial.bernatcortina.cat\/?page_id=208"},"modified":"2019-01-21T20:33:25","modified_gmt":"2019-01-21T18:33:25","slug":"formularis","status":"publish","type":"page","link":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/","title":{"rendered":"Formularis"},"content":{"rendered":"

Els formularis HTML s\u00f3n un dels punts principals d’interacci\u00f3<\/b> entre un usuari i un lloc web o aplicaci\u00f3. Permeten als usuaris enviar informaci\u00f3. La majoria de les vegades s’envia informaci\u00f3 a un servidor web, per\u00f2 la p\u00e0gina web tamb\u00e9 pot interceptar per usar pel seu costat.<\/p>\n

Un formulari <form<\/b>> \u00e9s b\u00e0sicament un contenidor per a controls. Cada control en un formulari est\u00e0 pensat per recol\u00b7lectar informaci\u00f3 ingressada pels usuaris, en formes que poden anar des de l\u00ednies de text a pujada de arxius, passant per opcions, dates, contrasenyes i molt m\u00e9s. Una vegada que els usuaris han omplert el formulari amb les dades, poden enviar de tornada al servidor perqu\u00e8 l’agent processador administri la informaci\u00f3 recol\u00b7lectada.<\/p>\n

\"\"<\/p>\n

Per\u00f2 aquest model no diu res sobre com i on ser\u00e0 processat el formulari. Aquesta informaci\u00f3 pot ser especificada amb atributs com ara: action, que indica la ubicaci\u00f3 de l’agent processador; method que determina el m\u00e8tode utilitzat per empaquetar el formulari abans de ser enviat a l’agent processador; i target, que indica on seran mostrats els resultats del proc\u00e9s.<\/p>\n

Per no entrar en el m\u00f3n del php o javascript i seguir nom\u00e9s amb HTML, definirem el valor de l\u2019atribut action com a \u201cmailto:adre\u00e7a@de.correu\u201d. Aix\u00ed podrem veure qu\u00e8 i com envia el formulari.<\/i><\/p>\n

\"\"<\/p>\n

Element Input<\/h1>\n

En l’element <input>, l’atribut m\u00e9s important \u00e9s type. Aquest atribut \u00e9s molt important perqu\u00e8 defineix la forma en qu\u00e8 l’element <input> es comporta.<\/p>\n

El valor per defecte \u00e9s text, que representa un camp de text b\u00e0sic d’una l\u00ednia que accepta qualsevol tipus de text sense cap control o validaci\u00f3.<\/p>\n

Valors que pot adoptar l\u2019element input: text, password, submit, reset, radio, checkbox, button. Incorporats amb l\u2019HTML5<\/i>: color, date, datetime-local, email, file, month, number, range, search, tel, time, url, week<\/p>\n

Exemples: https:\/\/www.w3schools.com\/html\/html_form_input_types.asp<\/a><\/p>\n

Controls de text<\/h1>\n

Els controls de text proveeixen els mitjans necessaris per recol\u00b7lectar informaci\u00f3 textual.<\/p>\n

Camp de text<\/h2>\n

Un camp de text d’una sola l\u00ednia, que permet l’ingr\u00e9s d’una \u00fanica l\u00ednia de text, \u00e9s un dels molts controls que es declaren amb l’element input<\/b>. En aquest cas, l’element input ha de tenir el valor “text” en el seu atribut type<\/b>.<\/p>\n

Amb nom\u00e9s aix\u00f2, el control ja \u00e9s visible, per\u00f2 es necessita un nom (en l’atribut name) si hi ha la intenci\u00f3 de recol\u00b7lectar la informaci\u00f3 ingressada per l’usuari en aquest control. El valor de l’atribut name identificar\u00e0 les dades ingressades per l’usuari en el control.<\/p>\n

\"\"<\/p>\n

Camp de text multil\u00ednia<\/h2>\n

Aquest tipus de control \u00e9s molt similar a l’anterior, per\u00f2 t\u00e9 la particularitat de permetre l’ingr\u00e9s de m\u00faltiples l\u00ednies de text. Un camp de text multilinea \u00e9s habitualment representat com una caixa, prou alta com per contenir m\u00e9s d’una l\u00ednia de text alhora. Aquesta representaci\u00f3, usualment proveeix un mecanisme de despla\u00e7ament per permetre als usuaris veure tot el text ingressat, especialment quan \u00e9s prou llarg com per excedir els l\u00edmits de la caixa.<\/p>\n

Un camp de text multil\u00ednia s’insereix amb l’element textarea<\/b>. Com anteriorment, l’atribut name proveeix un nom per al control que ajudar\u00e0 a l’agent processador a identificar la informaci\u00f3 enviada per l’usuari.<\/p>\n

\"\"<\/p>\n

Controls d\u2019opci\u00f3<\/h1>\n

Aquests controls permeten als usuaris seleccionar una o m\u00e9s opcions d’una llista de valors predefinits. Els controls d’opci\u00f3 poden ser presentats amb diferents estils i mecanismes de inteacci\u00f3 amb l’usuari, depenent principalment de l’element utilitzat.<\/p>\n

Una llista d’opcions pot declarar-se de tres formes: amb caselles de verificaci\u00f3, amb botons d’opci\u00f3 i amb llistes.<\/p>\n

Caselles de verificaci\u00f3<\/h2>\n

Una casella de verificaci\u00f3 \u00e9s un tipus particular d’opci\u00f3 que pot ser seleccionada o desseleccionada mitjan\u00e7ant la interacci\u00f3 de l’usuari. Aix\u00f2 permet als autors recol\u00b7lectar informaci\u00f3 com prefer\u00e8ncies, acceptaci\u00f3 de termes i condicions, categories, o qualsevol altra cosa que pugui ser resposta mitjan\u00e7ant “s\u00ed” i “no”. Una cosa que aquest control t\u00e9 de particular \u00e9s que, tot i que pot ser declarat com a part d’un grup tem\u00e0tic, cada casella \u00e9s independent de totes les altres en el formulari.<\/p>\n

Les caixes de selecci\u00f3 s\u00f3n representades per l’element input, quan t\u00e9 el valor “checkbox<\/b>” en l’atribut type. Aqu\u00ed el valor de l’atribut name tamb\u00e9 \u00e9s important, identificant cada opci\u00f3.<\/p>\n

\"\"<\/p>\n

Botons d\u2019opci\u00f3<\/h2>\n

Mentre que les caixes de selecci\u00f3 s\u00f3n independents i poden ser declarades per si mateixes, els botons d’opci\u00f3 necessiten ser agrupats<\/b> per tal de tenir sentit. Els grups de botons d’opci\u00f3 tenen una particularitat que juga un paper important en la seva conducta: nom\u00e9s una opci\u00f3 pot ser seleccionada per vegada en tot el grup<\/b>. Aix\u00f2 significa, entre altres coses, que quan selecciones una opci\u00f3, l’opci\u00f3 que estava anteriorment seleccionada es desselecciona.<\/p>\n

Un bot\u00f3 d’opci\u00f3 tamb\u00e9 es declara amb l’element input, per\u00f2 amb el valor “r\u00e0dio<\/b>” en el seu atribut type. Aqu\u00ed les coses es tornen una mica diferents a com eren amb les caselles de verificaci\u00f3, pel fet que el valor de l’atribut name necessita ser compartit<\/b> per totes les opcions en un mateix grup. En altres paraules, aquest \u00e9s el mecanisme que es requereix utilitzar per crear un grup de botons d’opci\u00f3.<\/p>\n

El \u00a0prop\u00f2sit de l\u2019atribut value<\/b> \u00e9s identificar les opcions d’un grup, el seu valor ha de ser diferent per a cada opci\u00f3.<\/p>\n

Exemple. Es declara un grup de botons d\u2019opci\u00f3, on nom\u00e9s una sola opci\u00f3 pot ser seleccionada.<\/p>\n

\"\"<\/p>\n

Llistes<\/h2>\n

Aquest atribut canvia radicalment la conducta d’una llista, fent possible la selecci\u00f3 d’una sola opci\u00f3 a la vegada o de moltes.<\/p>\n

L’estructura d’una llista est\u00e0 composta, principalment, per dos elements: select<\/b>, que actua com a contenidor per a les opcions; i option<\/b>, que representa una de les moltes opcions que el control pot presentar.<\/p>\n

Quan l’atribut m\u00faltiple<\/b> es troba absent<\/b>, un control de llista es comporta com un grup de botons d’opci\u00f3, on nom\u00e9s una opci\u00f3 pot ser seleccionada per vegada<\/b>.<\/p>\n

\"\"<\/p>\n

Quant l’atribut multiple<\/b> \u00e9s present<\/b>, la llista es comporta com un conjunt de caselles de verificaci\u00f3, on no nom\u00e9s una sin\u00f3 moltes opcions poden ser seleccionades a la vegada<\/b>.<\/p>\n

Aquesta configuraci\u00f3 requereix que un parell de claud\u00e0tors sigui annexat al valor que l’autor tri\u00ef per l’atribut name<\/b>.<\/p>\n

Exemple. Una llista d’opcions que poden ser seleccionades sense restriccions. Tamb\u00e9 fa \u00fas de l’atribut value a les opcions, per evitar l’\u00fas de valors innecess\u00e0riament llargs<\/i>.<\/p>\n

\"\"<\/p>\n

Botons<\/h1>\n

Un bot\u00f3 \u00e9s un tipus especial de control que ha estat dissenyat per interactuar amb l’usuari d’una manera singular: una acci\u00f3<\/b> \u00e9s executada cada vegada que l’usuari ho pressiona. Hi ha una \u00e0mplia gamma de botons, cadascun amb les seves peculiaritats en relaci\u00f3 a les seves capacitats i la seva conducta.<\/p>\n

Botons d\u2019enviament<\/h2>\n

Un bot\u00f3 d’enviament t\u00e9 l’acci\u00f3 per omissi\u00f3 d’enviar el formulari<\/b> al qual pertany quan \u00e9s activat. A menys que un altre mecanisme d’enviament sigui prove\u00eft, la pres\u00e8ncia d’aquest bot\u00f3 \u00e9s necess\u00e0ria si hi ha la intenci\u00f3 de permetre als usuaris enviar el formulari.<\/p>\n

Els botons d’enviament s\u00f3n inserits amb l’element input<\/b>, tenint el valor “submit<\/b>” en el seu atribut type. L’atribut value<\/b> \u00e9s important en aquest control, ja que el seu valor \u00e9s mostrat a manera d’etiqueta dins del bot\u00f3.<\/p>\n

\"\"<\/p>\n

Botons de reinici<\/h2>\n

Igual que els botons d’enviament, els de reinici tamb\u00e9 tenen una acci\u00f3 predefinida. Per\u00f2 en aquest cas, l’acci\u00f3 per omissi\u00f3 consisteix en el reinici<\/b> de la informaci\u00f3 dels camps del formulari als seus valors inicials. Aquesta acci\u00f3 elimina tots els canvis que hagi realitzat l’usuari als valors dels controls.<\/p>\n

\"\"<\/p>\n

Agrupaci\u00f3 de controls<\/h1>\n

A vegades, quan un formulari \u00e9s gran, la segmentaci\u00f3 podria jugar un paper en la millora de l’organitzaci\u00f3 i la facilitat d’\u00fas<\/b>.<\/p>\n

Aquest \u00e9s el motiu pel qual HTML proveeix l’element fieldset<\/b>, el qual actua com un contenidor de controls<\/b>. Amb aquest element, els autors poden fer divisions al formulari i organitzar els controls tem\u00e0ticament.<\/p>\n

\"\"<\/p>\n

Un grup fieldset pot a m\u00e9s tenir un t\u00edtol<\/b> per identificar la composici\u00f3 o el prop\u00f2sit del conjunt de controls que cont\u00e9. Aquest t\u00edtol pot ser prove\u00eft per l’element legend<\/b>, el qual ha de ser declarat com a primer fill del grup fieldset.<\/p>\n

\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"

Els formularis HTML s\u00f3n un dels punts principals d’interacci\u00f3 entre un usuari i un lloc web o aplicaci\u00f3. Permeten als usuaris enviar informaci\u00f3. La majoria de les vegades s’envia informaci\u00f3 a un servidor web, per\u00f2 la p\u00e0gina web tamb\u00e9 pot interceptar per usar pel seu costat. Un formulari <form> \u00e9s b\u00e0sicament un contenidor per a … <\/p>\n

Continua llegint \u00abFormularis\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":65,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-208","page","type-page","status-publish","hentry"],"yoast_head":"\nFormularis | HTML & CSS<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Formularis | HTML & CSS\" \/>\n<meta property=\"og:description\" content=\"Els formularis HTML s\u00f3n un dels punts principals d’interacci\u00f3 entre un usuari i un lloc web o aplicaci\u00f3. Permeten als usuaris enviar informaci\u00f3. La majoria de les vegades s’envia informaci\u00f3 a un servidor web, per\u00f2 la p\u00e0gina web tamb\u00e9 pot interceptar per usar pel seu costat. Un formulari <form> \u00e9s b\u00e0sicament un contenidor per a … Continua llegint \u00abFormularis\u00bb\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML & CSS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bernatcortina\" \/>\n<meta property=\"og:image\" content=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-24.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@bernatcortina\" \/>\n<meta name=\"twitter:label1\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minuts\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/\",\"url\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/\",\"name\":\"Formularis | HTML & CSS\",\"isPartOf\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-24.png\",\"datePublished\":\"2019-01-21T18:33:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/#breadcrumb\"},\"inLanguage\":\"ca\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/#primaryimage\",\"url\":\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-24.png\",\"contentUrl\":\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-24.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inici\",\"item\":\"https:\/\/tutorial.bernatcortina.cat\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Formularis\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/#website\",\"url\":\"https:\/\/tutorial.bernatcortina.cat\/\",\"name\":\"HTML & CSS\",\"description\":\"Fonaments d'HTML i full d'estils\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tutorial.bernatcortina.cat\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ca\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Formularis | HTML & CSS","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/","og_locale":"ca_ES","og_type":"article","og_title":"Formularis | HTML & CSS","og_description":"Els formularis HTML s\u00f3n un dels punts principals d’interacci\u00f3 entre un usuari i un lloc web o aplicaci\u00f3. Permeten als usuaris enviar informaci\u00f3. La majoria de les vegades s’envia informaci\u00f3 a un servidor web, per\u00f2 la p\u00e0gina web tamb\u00e9 pot interceptar per usar pel seu costat. Un formulari <form> \u00e9s b\u00e0sicament un contenidor per a … Continua llegint \u00abFormularis\u00bb","og_url":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/","og_site_name":"HTML & CSS","article_publisher":"https:\/\/www.facebook.com\/bernatcortina","og_image":[{"url":"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-24.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@bernatcortina","twitter_misc":{"Temps estimat de lectura":"7 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/","url":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/","name":"Formularis | HTML & CSS","isPartOf":{"@id":"https:\/\/tutorial.bernatcortina.cat\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/#primaryimage"},"image":{"@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/#primaryimage"},"thumbnailUrl":"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-24.png","datePublished":"2019-01-21T18:33:25+00:00","breadcrumb":{"@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/#primaryimage","url":"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-24.png","contentUrl":"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-24.png"},{"@type":"BreadcrumbList","@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/formularis\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inici","item":"https:\/\/tutorial.bernatcortina.cat\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/"},{"@type":"ListItem","position":3,"name":"Formularis"}]},{"@type":"WebSite","@id":"https:\/\/tutorial.bernatcortina.cat\/#website","url":"https:\/\/tutorial.bernatcortina.cat\/","name":"HTML & CSS","description":"Fonaments d'HTML i full d'estils","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tutorial.bernatcortina.cat\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"}]}},"_links":{"self":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages\/208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/comments?post=208"}],"version-history":[{"count":0,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages\/208\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages\/65"}],"wp:attachment":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/media?parent=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}