D27: XHTML i CSS. Introducció als estàndards i accessibilitat web

Formularis

No és necessari navegar gaire per internet per trobar pàgines web en les que es demanen dades. Potser les primeres pàgines que van fer ús d'aquesta possibilitat van ser les dels sistemes de cerca. Els formularis usats per aquests sistemes són en general, bastant senzills, només és necessari un element, caixa de text, on sigui possible introduir la paraula o frase a cercar.

Els formularis són la manera més popular de fer pàgines web interactives. De la mateixa manera que un formulari en paper, un formulari en una pàgina web permet a l'usuari introduir la informació que se li demana.

Hi ha formularis més complexos on s'ofereix als usuaris la possibilitat de realitzar suggeriments, oferir comentaris o enviar qualsevol altre tipus d'informació. En general, aquests formularis ocupen una pàgina sencera i estan formats per diversos elements.

Etiquetes

`<form> ... </form>`

L'etiqueta <form> és una etiqueta que envolta tot el formulari. D'acord amb les especificacions de l'XHTML aquesta etiqueta és imprescindible per a crear elements per a ser mostrats en una pàgina web.

L'etiqueta <form> es pot situar a qualsevol lloc del document XHTML, però sempre dintre del <body>. Totes les etiquetes d'introducció de dades, de selecció i d'àrees de text han d'estar incloses dintre de <form> ... </form>. L'etiqueta <form> té els següents atributs:

action (requerit): aquest atribut li diu al navegador on esta localitzat el CGI que processarà tot el formulari. Normalment es tracta d'un script o programa que està allotjat en el servidor web, però es pot utilitzar el correu electrònic per enviar els resultats dels formularis. Per exemple:
```
 <form action="mailto:identificador@xtec.cat"> 
```
L'única vegada que es pot obviar aquest atribut és quan s'utilitza un clic o altres mètodes per accedir al formulari.
method: el method és la forma que utilitzarà el navegador per comunicar-se amb el servidor web i enviar-li la informació del formulari. Aquest atribut pot ser o bé get o bé post.
- post: aquest és el mètode més comú, i envia al servidor la informació del formulari com un bloc de dades, mitjançant protocols HTTP. L'usuari només veu l'adreça del formulari web a la barra d'adreces web.
- get: aquest mètode enviar una petició al servidor i les dades del formulari són afegides a la informació de l'URL a continuació d'un signe d'interrogació. Per exemple, això és el que veu l'usuari a la seva barra d'adreces web:
```
http://www.server.com/cgi-bin/test.pl?name=value
```
  El signe ? es el delimitador que ens permet separar la consulta de la URL.
  
  Hi ha un parell de grans diferències entre get i put que són realment importants:
  1. Si es té en compte que molts usuaris afegeixen com a preferides les pàgines que són el resultat de l'enviament de formularis, llavors cal usar el mètode get, ja que no hi ha manera de marcar com adreça d'interès una pàgina que ha estat retornada com a resultat d'un post. Per exemple una aplicació web que retorna una llista de resultats després d'una cerca, segurament els usuaris voldran desar la pàgina com una adreça d'interès. Per altra banda, si es tracta d'una aplicació web que processa ordres, segurament no es voldrà que els usuaris puguin marcar la pàgina.
  2. Una situació en la que no s'haurà d'utilitzar mai el mètode get és quan les dades en el formulari són privades, com targes de crèdit o contrasenyes. Ja que l'adreça URL és visible, la informació privada es pot trobar amb facilitat per altres usuaris si busquen en l'historial del navegador o si la pàgina queda desada com adreça d'interès. Encara més, si s'utilitza un element <textarea>, s'hauria d'utilitzar el mètode post, ja que segurament s'envien moltes dades.
  Finalment, les peticions del mètode get tenen un límit de 256 caràcters, mentre que el mètode post no té límit en la mida del paquet de dades que s'envia.
```
 <form method="post" action="mailto:identificador@xtec.cat"> 
```
enctype: aquest atribut indica el format en que les dades són enviades al servidor. En general, s'utilitza en formularis on hi ha una opció de pujar fitxers. El valor per defecte és:application/x-www-form-urlencoded
```
<form method="post" 
action="mailto:identificador@xtec.cat" 
enctype="text/plain">
```

`<fieldset> ... </fieldset>`

Aquesta etiqueta emmarca un grup d'elements d'un formulari que estan relacionats de forma lògica. El navegador dibuixa una caixa al voltant del conjunt de camps per indicar que estan relacionats. Per exemple, un formulari pot contenir uns camps sobre dades personals com el nom, cognoms, adreça de correu, etc.; alguns camps que sol·liciten la opinió; i d'altres per "altres comentaris". <fieldset> pot usar-se per agrupar els camps.

<fieldset> 
<p> Nom: <input name="nom" > Cognoms: <input name="cognom" /> </p>
<p> Adreça electrònica: < input name="mail" /> </p>
<p> Contrasenya <input name="senya" type="password" /> </p> 
</fieldset>

Nom:
Cognoms:

Adreça electrònica:
Contrasenya

`<input> ... </input>`

L'etiqueta <input /> indica als usuaris que han d'introduir dades en el formulari per trametre-les als servidor web. Hi ha deu tipus específics d'aquesta etiqueta, cal triar el tipus d'etiqueta input més adequat i col·locar-lo en el lloc adient.

Aquest element, és un element buit i per això es tanca amb />, i no amb l'etiqueta </input>.

<input type="tipus d'etiqueta" />

En tots els elements presents a l'etiqueta <input /> l'atribut name és obligatori excepte en el cas dels botons submit i reset.

Text

Aquest element permet als lectors escriure qualsevol informació de text dintre del quadre. El quadre de text és el tipus més comú de l'etiqueta <input />, i per fer l'HTML més fàcil, és el tipus per defecte, això vol dir que serà el que apareixerà mentre no s'especifiqui cap altre tipus de <input />.

<input type="text" name="" />

Button

L'element button es un tipus d'input que us permet crear botons personalitzats que no tenen, per defecte, l'acció dels botons d'enviar i reinicialitzar. Els principals atributs d'aquesta etiqueta són:

type= " tipus ", que pren el valor, per defecte, de submit, reset i button.
name= " nom ", assigna un nom identificador únic al botó.
value= " tex ", defineix el text que apareixerà en el botó.

<input type="button" name="" value="" />

Hi ha dos tipus de botons amb unes funcions específiques ja predeterminades:

Submit: per tal que un formulari sigui enviat cal algun tipus de botó d'enviament. Aquest camp envia la informació del formulari al servidor web quan es prem. El valor per defecte varia segons el navegador: Submit, per Internet Explorer o bé Submit Query per el navegador Netscape. Si es vol canviar cal utilitzar l'atribut value="".
```
 <input type="submit" name="" value="" /> 
```
Reset: aquest tipus de botó, per defecte, neteja el formulari i el torna a la seva forma original, amb entrades buides, o bé amb els valors establerts per defecte. Aquesta reinicialització la realitza el navegador, no el servidor. Aquest botó tindrà per defecte el valor Reset, si es vol que aparegui un altre valor cal canviar-lo utilitzant l'atribut value="".
```
<input type="reset" name="" value="" /> 
```
Image: amb el tipus d'input d'image, es té encara un altra opció per a un botó en els formularis. La imatge té el funcionament semblant al d'un botó. Es pot utilitzar qualsevol tipus d'imatge en els formularis.
```
<input type="image" name="boto" src="../../img/formulari4.png" alt="botó" /> 
```

Checkbox

Aquest element permet donar als lectors un llistat d'ítems amb quadres de verificació per poder triar. Si així es determina, la tria pot ser de més d'un element, o bé pot ser usat com a botó de "si/no", on només hi ha una resposta possible. Si al formulari hi ha un grup de quadres de verificació, es poden agrupar tots donant-los-hi el mateix nom encara que els valors s'enviaran al formulari per separat.

<input type="checkbox" name="" />

Radio

Aquesta opció permet als lectors la tria d'un element d'entre diversos. De la mateixa manera que el tipus d'input, checkbox, les diferents opcions es poden agrupar sota el mateix name. Si el lector tria un valor, tots els altres queden descartats.

<input type="radio" name="" />

Password

El camp de la contrasenya, password, s'assembla molt a un camp de text. Tanmateix, quan s'escriu, les lletres queden amagades. Això permet oferir una mica més de seguretat pel que fa a les contrasenyes en els formularis. Cal recordar, però, que en cap cas les contrasenyes s'envien encriptades. Així que no no és bo refiar-se gaire en la seguretat d'aquesta important informació secreta.

<input type="password" name="" />

File

Aquest tipus d'input permet als lectors pujar arxius al servidor web. Cal tenir present, però, el CGI per permetre la càrrega d'arxius per part dels usuaris de la web.

<input type="file" title="" name="" />

Hidden

Els camps amagats, hidden, són utilitzat per a "estalviar feina" en un formulari. En general, s'utilitzen en formularis que tenen més d'una pàgina i hi ha informació que cal passar d'una pàgina l'altra. Aquests camps no es mostren a la web, però la informació és enviada alhora amb altres camps d'informació.

<input type="hidden" name="" />

Altres elements

No tots els elements d'un formulari són elements <input />. N'hi ha d'altres com <textarea> per escriure més d'una línia de text, i <select> per als menús.

Textarea

L'element <textarea> crea una àrea de text multi-línia en la que es pot escriure. Si les línies de text introduïdes són més que les de l'àrea de text, apareixerà una barra de desplaçament al costat dret.

Qualsevol text situat entre les etiquetes <textarea> ... </textarea> serà el text inicial en l'àrea de text de control del navegador.

<textarea name="" rows="" cols=""></textarea>

Select

L'element <select> crea un control de menú desplegable en la pàgina web, tot i que l'aparença pot variar depenent del navegador que s'estigui utilitzant. El menú proporciona als lectors un forma de triar d'entre un conjunt d'opcions. Aquest element es combina amb l'element <option> per crear el menú. L'element select tanca tot el grup d'opcions amb l'etiqueta </select>.

<select name=""> 
<option value=""> </option> 
<option value=""> </option> 
<option value=""> </option> 
<option value=""> </option> 
<option value=""> </option> 
</select>

Option

L'element <option> treballa amb l'element <select> per crear un menú desplegable. És convenient utilitzar un element <option> per cada ítem del menú. El text contingut entre les dues etiquetes <option> ... </option> és el que s'utilitza per la descripció de cada ítem del menú. Cada opció del menú també inclou un valor que representa l'ítem del menú.

<select name=""> 
<option value=""> </option> 
<option value=""> </option> 
<option value=""> </option> 
<option value=""> </option> 
<option value=""> </option> 
</select>

Tornar a l'inici de la pràctica

Mòdul 6: Taules i formularis