Introducció

Els documents que hem vist fins aquest moment ens permeten visualitzar la informació emmagatzemada en un servidor web a través d'un navegador. En aquest document detallarem com enviar informació al servidor, de forma que la comunicació sigui bidireccional: del servidor al client i del client al servidor.

Tot i que hi hagi altres formes d'enviar informació al servidor, el mètode més usual és a través d'un formulari. A internet hi ha multitud de planes que utilitzen formularis:

Registre d'un usuari
Buscadors
Creació de correus
Fòrums
Xarxes socials
....

Creació de formularis

Per a crear un formulari utilitzem l'etiqueta form . Tots els elements del formulari seran fills d'aquesta etiqueta. Cal tenir en compte que en una mateixa plana web hi poden haver varis formularis. L'estructura més simple per a crear un formulari és:

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="utf-8">
       <title>Formulari</title>
   </head>
   <body>
       <form>
           <!-- Informació associada al formulari -->
       </form>
   </body>
</html>

Enviar informació. Etiqueta button

L'etiqueta button crea un botó en la pàgina web sobre el qual l'usuari podrà clicar per tal d'executar una determinada acció.

submit : enviar la informació del formulari al servidor
reset : esborrar tota la informació introduida per l'usuari en el formulari
button: el botó no té un comportament predeterminat. El botó tindrà un codi associat.

Per a especificar quina acció ha de fer el botó utilitzem l'atribut type al qual li associem un dels 3 valors anteriors. En aquest document només utilitzarem els dos primers tipus de botó.

Nota: a vegades enlloc d'utilitzar un botó s'utilitza un link ( etiqueta a ) al qual se li aplica un disseny específic.


<!DOCTYPE html>
<html lang="en">
   <head>
        <meta charset="utf-8">
        <title>Formulari</title>       
   </head>
   <body>
       <form>
           <!-- Informació associada al formulari -->
           <button type="submit">Enviar</button>        <!-- Enviar informació al servidor -->
           <button type="reset">Esborrar</button>       <!-- Esborrar informació introduida en el formulari -->
       </form>
   </body>
</html>

Apart d'utilitzar l'etiqueta button per a enviar la informació del formulari HTML 5 permet dos sistemes més:

A través del tipus submit de l'etiqueta input
A través del tipus image de l'etiqueta input .

Mètode "get" i "post"

Quan es vol enviar la informació d'una plana web cal indicar mitjançant l'atribut method el sistema que es vol utilitzar.

Mètode "get": s'envia la informació a través de la url de la plana web o l'especificada en l'atribut action . L'usuari pot canviar la informació directament en la URL de la plana web.
Mètode "post": la informació és inclosa el el cos del formulari i enviada al servidor.

Video - HTML 5 - Mètode "get" i "post". Una introducció molt bàsica.

Mètode action

Un altre aspecte important en la creació de formularis és la de definir quina serà l'ubicació del programa per a tractar les dades enviades per a l'usuari. En el cas que no s'especifiqui aquest paràmetre, les dades s'enviaran a la mateixa plana des de la qual s'estan enviant.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Formulari</title>
    </head>
    <body>
        <form action="process.php">
            <label>Name:<input type="text" name="name" /></label>
            <button type="submit">Enviar</button>
        </form>
    </body>
</html>

Video - Com funciona l'atribut "action" de l'etiqueta "form"

Introduir informació.

En aquests moments sabem com crear i enviar la informació d'un formulari al servidor web. Ens falta la part més important: com permetre que l'usuari introdueixi la informació en la plana web. L'etiqueta més important per a introduir informació és input . Aquesta etiqueta defineix la seva funcionalitat a través dels seus atributs. D'aquests atributs el més important és el type que ens permet definir quin tipus d'informació introduirà l'usuari en el camp.

Abans d'explicar les diferents opcions per a introduir informació en la plana web és important aclarir la importància de l'etiqueta label . Si l'usuari veu només una caixa on introduir informació no sabrà ben bé què hi ha d'escriure o quina informació se li demana. Cal incloure alguna notació amb la informació a introduir per a cada un dels camps.

Etiqueta label

Si observem la imatge de l'esquerra, quina informació ens està demanant la plana web en la imatge de l'esquerra? En canvi, a la imatge de la dreta, està clar que ens demana el correu electrònic per a rebre notificacions del servidor web. A continuació s'adjunta el codi de la imatge de la dreta on es pot veure l'utilització de l'etiqueta label .


<!DOCTYPE html>
<html lang="en">
   <head>
        <meta charset="utf-8">
        <title>Formulari</title>       
   </head>
   <body>
       <form>
           <label>Enter email to receive notifications:<input type="text" /></label>
           <button type="submit">Enviar</button>
       </form>
   </body>
</html>

L'etiqueta label té una segona funcionalitat important a nivell d'accessibilitat de la plana web. Si l'usuari fa click sobre el text comprès entre l'obertura i el tancament de l'etiqueta label , el cursor es situarà dins la caixa de text per tal que l'usuari pugui començar a escriure. En aquest cas no té massa sentit, ja que el tamany de la caixa de text és suficientment gran i no presenta dificultat

Descripció	Imatge
En la imatge és molt més simple polsar sobre el text "Enter a digit ...", que no polsar sobre la "caixeta" de text, tot i que el tamany d'aquesta és correcte, ja que és proporcional a l'espai necessari per a entrar un dígit

Entrada informació - Etiqueta input

Una vegada compresa la necessitat i funcionalitat de l'etiqueta label podem començar analitzar l'etiqueta input i, concretament, l'atribut type .

L'atribut type s'utilitza per a especificar de quin tipus serà la informació introduïda. El tipus d'informació ens determina també el format en la seva visualització. Els diferents tipus d'entrada disponibles amb l'etiqueta input són:


	En la taula falta el tipus hidden

Nota:Per a la visualització dels controls hem utilitzat el navegador web "Opera" amb la seva versió 55 en un sistema Linux Debian versió 9 (Stretch). L'elecció d'aquest navegador és per la inclusió dels diferents controls associats als diferents tipus d'entrades disponibles en HTML 5.

Video: com instal·lar el navegador Opera en un sistema Linux Debian/Ubuntu

És molt important associar a l'atribut name un valor per a cada etiqueta input . Aquest atribut name ens permet recuperar el camp en el servidor i obtenir la informació introduïda per a l'usuari.

Video: importancia atribut name en camps de tipus input

Atribut required

Un dels atributs importants a l'hora d'introduir informació és la de poder indicar quins són els camps obligatoris. Podem utilitzar l'atribut required per a obligar a l'usuari a indicar un valor per a un determinat camp. Tot i això, aquesta validació no és fiable i cal fer una segona validació en el servidor. Tot i això, sí que és una bona eina per a millorar el rendiment de la nostra plana web i oferir una millor experiència d'ús a l'usuari.

Video: Per quin motiu no es poden validar dades utilitzant atribut required

Atribut type: button , reset i submit

Quan el valor de l'atribut type és button , reset o submit , la seva funcionalitat és anàloga a la de l'etiqueta button pels mateixos valors de type . Així, els dos següents codis són equivalents i tenen la mateixa funcionalitat.

<!DOCTYPE html>
<html lang="en">
    <!-- CODI UTILITZANT ETIQUETA BUTTON -->
    <head>
        <meta charset="utf-8">
        <title>Formulari</title>
    </head>
    <body>
        <form>
            <!-- Informació associada al formulari -->
            <button type="submit">Submit Query</button> <!-- Enviar informació al servidor -->
            <button type="reset">Reset</button> <!-- Esborrar informació introduida en el formulari -->
            <button type="button">Alert</button> <!-- Executar codi associat al text alert -->        
        </form>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <!-- CODI UTILITZANT ETIQUETA INPUT -->
    <head>
        <meta charset="utf-8">
        <title>Formulari</title>
    </head>
    <body>
        <form>
            <!-- Informació associada al formulari -->
            <input type="submit" /> <!-- Enviar informació al servidor -->
            <input type="reset" /> <!-- Esborrar informació introduida en el formulari -->
            <input type="button" value="Alert"/> <!-- Executar codi associat al text alert -->      
        </form>
    </body>
</html>

Atribut type: image

El tipus image és equivalent al tipus submit però permet associar una imatge al control. Quan s'utilitzi el tipus image serà obligatori especificar l'atribut alt .


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>SUBMIT</title>
    </head>
    <body>
        <form method="post" >
            <!-- elements associats al formulari -->        
            <input type="image" alt="Send data" src="verified.png" />
        </form>

    </body>
</html>

El codi anterior mostra la imatge (verified.png) en el navegador. Si l'usuari clica sobre l'imatge, les dades del formulari s'enviaran al servidor.

Atribut type: color

Quan l'etiqueta input té associat el tipus color , l'usuari podrà escollir un color utilitzant un control especial per a facilitar la seva entrada.


	Imatge corresponent al navegador Mozilla Firefox

Quan s'envia el formulari al servidor web per tal que es faci el tractament de les dades, la informació relacionada amb els camps de tipus "color" s'envia en notació hexadecimal. Així, per exemple, el color escollit en la imatge anterior s'enviaria al servidor com a #D7090F on D7 és el component vermell, 09 és el component verd i 0F és el component blau. En la imatge podem apreciar la informació en "Color name".

Nota: Aquesta funcionalitat pot ser que no estigui disponible per alguns navegadors web o en versions antigues dels mateixos. En el cas que no estigui disponible l'usuari haurà d'introduir directament el valor del color en el camp sense cap mena d'ajuda visual.

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Formulari</title>
    </head>
    <body>
        <form>
            <label>color:<input type="color" name="colorusu" /></label>
            <!-- Altres camps i informació associada al formulari -->    
        </form>
    </body>
</html>

Atribut type: date , datetime-local , month , time i week .

date i datetime-local mostren un control per a poder introduir la informació de la data o data i hora de forma gràfica.

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Formulari</title>
    </head>
    <body>
       <form>
        <label>date:<input type="date" name="datausu"/></label>
        <label>datetime-local:<input type="datetime-local" name="datahorausu" /></label>        
        <label>month:<input type="month" name="mesusu" /></label>
        <label>time:<input type="time" name="horausu" /></label>
        <label>week:<input type="week" name="setmanausu" /></label>
        <!-- Altres camps i informació associada al formulari -->    
        </form>
    </body>
</html>

Atribut type: number .

El tipus number per a l'etiqueta input mostren un control per a poder incrementar o decrementar el número polsant la tecla en direcció amunt o avall

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Formulari</title>
    </head>
    <body>
        <form>
            <label>number:<input type="number" name="numusu" /></label>
            <!-- Altres camps i informació associada al formulari -->    
        </form>
    </body>
</html>

Atribut type: email , password , search , tel , text i url

Tots aquests valors d'atribut s'utilitzen per permetre a l'usuari que introdueixi un text de forma lliure. Utilitzarem cada tipus segons la informació que hagi d'introduir l'usuari. Així, si es tracta d'un formulari per a buscar informació, utilitzarem el tipus search com a atribut type per l'etiqueta input . Si en el camp es demana una informació que no es correspongui a cap dels tipus disponibles, utilitzarem com a tipus text : qualsevol texte.

El tipus password té un comportament especial ja que emmascara la informació que introdueix l'usuari. Amb aquest tipus de camp podem ocultar la informació mentre l'usuari la introdueix.

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Formulari</title>
    </head>
    <body>
       <form>
        <label>email:<input type="email" name="correu" /></label>
        <label>password:<input type="password" name="parclau" /></label>
        <label>search:<input type="search" name="cerca" /></label>
        <label>tel:<input type="tel" name="telef" /></label>
        <label>text:<input type="text" name="infotext" /></label>
        <label>url:<input type="url" name="weburl" /></label>
        <!-- Altres camps i informació associada al formulari -->    
        </form>
    </body>
</html>

Atribut type: hidden

El tipus hidden crea un control ocult. Cal tenir en compte que la informació continguda en aquest camp s'envia al servidor.

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Formulari</title>
    </head>
    <body>
       <form>
        <label>hidden:<input type="hidden" name="ocult" /></label>
        <!-- Altres camps i informació associada al formulari -->    
        </form>
    </body>
</html>


	Visualització del codi HTML anterior

Nota: tot i que es pugui tenir la tentació d'utilitzar aquest camp per a ocultar informació a l'usuari, no es tracta d'un sistema segur. L'usuari disposa de múltiples eines en el navegador per a localitzar i esbrinar el contingut del camp.

Atribut type: range

El tipus range permet a l'usuari seleccionar mitjançant un control HTML 5 un valor numèric dins un rang de valors. Si no s'especifica cap valor mínim ni màxim, per defecte es configuren el 0 i el 100. Per a modificar el valor mínim i màxim podem utilitzar els atributs min i max . Donat que el valor exacte del número no és important, aquest no es visualitza per pantalla. Aquest control pot ser útil, per exemple, pel desenvolupament de jocs.

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Formulari</title>
    </head>
    <body>
       <form>
        <label>Range:<input type="range" min="-50" max="50" name="numaproxusu" /></label>
        <!-- Altres camps i informació associada al formulari -->    
        </form>
    </body>
</html>

Atribut type: radio

Utilitzem el control de botó d'opció (radio button) quan volem que l'usuari pugui escollir una opció entre una sèrie d'opcions. Normalment utilitzem aquest tipus de control quan hi ha poques opcions a escollir: 7 o 8 com a màxim. A diferència del control checkbox , el botó d'opció només permet desactivar una opció en el cas que se'n marqui una altra de diferent.

En un formulari poden haver-hi diferents botons d'opcions amb diferents propòsits. Per exemple, un conjunt d'opcions per a escollir el gènere (home/dona) i un altre per a escollir l'idioma ( anglès, català, castellà o francès ). Per a determinar quins botons estan relacionats entre sí utilitzem l'atribut name . Així, si dos botons d'opció tenen el mateix nom, només un dels dos es podrà activar. Si s'activa un botó de forma automàtica es desactivarà l'altre.

En el cas que no s'assocïi cap valor a l'atribut value el client enviarà el valor "on" per a l'opció seleccionada al servidor web. Aquest valor (on) ens permet determinar que s'ha escollit una opció, però no quina! Per tant, l'especificació de l'atribut value serà obligatori si es volen processar les dades en el servidor.

Un altre aspecte important dels botons d'opció és la de poder seleccionar una opció per defecte. Utilitzem l'atribut checked sense associar-li cap valor per a indicar quina serà l'opció preferida en la majoria dels casos.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>POST</title>
    </head>
    <body>
            <form method="post" >
                <label>Preferred language:
                    <input type="radio" name="language" value="ca" checked />Catalan
                </label>
                <label><input type="radio" name="language" value="fr"/>French</label>
                <label><input type="radio" name="language" value="en"/>English</label>
                <label><input type="radio" name="language" value="sp"/>Spanish</label>
                <br />
                <label>Gender: 
                    <input type="radio" name="gender" value="M" />Male
                </label>
                <label><input type="radio" name="gender" value="F" checked />Female</label>
                <button type="submit">Send</button>
            </form>       
    </body>
</html>

Video - Com funcional el control radio button (botó opcions)

Atribut type: checkbox

Aquest atribut permet escollir a l'usuari un conjunt de valors inclosos en una llista. Utilitzarem aquest control quan la llista de valors no sigui molt extensa: 7 o 8 valors com a màxim. Una altra funcionalitat habitual d'aquest tipus de camp és per a indicar que s'accepten les condicions d'ús en els formularis de registre web.

El tipus checkbox presenta una sèrie de particularitats:

El servidor només reb la informació dels camps que hagin estat seleccionats per l'usuari. Les opcions no seleccionades són eliminades pel client i no s'envien.
Si no s'associa un valor a l'atribut value , el valor del camp és "on". Assignar l'atirbut value facilita la identificació de les opcions preferides de l'usuari.
Quan hi hagi diversos camps de tipus checkbox que estiguin relacionats entre ells, assignarem tots el mateix nom i afegirem els claudators ( [ ] ) després del nom del camp (codi exemple).
Si el nom del camp inclou claudators ( [ ] ) es genera un índex per a cada opció seleccionada. Així, per exemple, si l'usuari ha seleccionat Catalan, English i Spanish, al valor "Catalan" se li assignarà el índex 0, "English" l'índex 1 i finalment "Spanish" l'índex 2. La generació d'aquest índex facilita el tractament de les dades en el servidor i , per tant, és molt important incloure'l quan hi hagi més d'una opció seleccionable.
El checkbox a diferència del tipus radio permet no seleccionar cap opció: totes les opcions deseleccionades.


<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Formulari</title>
    </head>
    <body>
       <form method="post">

                <label><input type="checkbox" name="language[]" value="catalan" />Catalan</label>
                <label><input type="checkbox" name="language[]" value="english" />English</label>
                <label><input type="checkbox" name="language[]" value="flemish" />Flemish</label>
                <label><input type="checkbox" name="language[]" value="spanish" />Spanish</label>

                <button type="submit">Send</button>
       </form>
    </body>
</html>

Video - Casella de verificació (checkbox). Utilització array/vector com a nom de control

Atribut type: file

El atribut file permet carregar i enviar al servidor web un arxiu. Podem utilitzar l'atribut accept per a determinar quins són els tipus vàlids de fitxers. En el document


<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Formulari</title>
    </head>
    <body>
       <!-- form and elements form -->
            <input type="file" name="photo" accept="image/png, image/jpeg" />
       <!-- elements form -->
   </body>
</html>

Altres mètodes per a introduir informació

Etiqueta select

L'etiqueta select ens permet escollir un valor d'una llista de valors desplegable. Per tal de poder obtenir el valor seleccionat en el servidor, serà obligatori especificar un valor per l'atribut name . Per a determinar quines són les opcions vàlides que pot seleccionar l'usuari (en la imatge els diferents païssos) utlitzem l'etiqueta option . L'etiqueta option sempre és un fill de l'etiqueta select .


<!DOCTYPE html>
<html lang="en"> 
    <head>     
        <meta charset="UTF-8"> 
        <title>Selecció valors</title> 
    </head> 
    <body> 
        <form>
                    <label>Country:
                        <select name="country"> 
                            <option value="ct" selected>Catalonia</option> 
                            <option value="fr">France</option> 
                            <option value="it">Italy</option> 
                            <option value="ja">Japan</option> 
                            <option value="sp">Spain</option> 
                        </select> 
                    </label><br>
             <input type="submit" value="Send" /> 
        </form> 
    </body> 
</html>

L'etiqueta option cal definir dos atributs importants:

value : valor que s'enviarà al servidor per a cada una de les opcions vàlides.
selected : opció predeterminada quan es carrega el control.

En relació a l'etiqueta select, apart de l'atribut name hi ha un atribut important que és multiple . Aquesta opció ens permet escollir més d'un valor a la vegada. Cal tenir en compte que amb HTML 5 no associem cap valor a aquest atribut. Si l'atribut està present l'usuari podrà escollir múltiples opcions, en cas contrari, només una opció estarà permesa.


<!DOCTYPE html>
<html lang="en"> 
    <head>     
        <meta charset="UTF-8"> 
        <title>Selecció valors</title> 
    </head> 
    <body> 
        <form>
                    <label>Country:
                        <select name="language" multiple> 
                            <option value="ct" selected>Catalan</option> 
                            <option value="fr">French</option> 
                            <option value="it">Italian</option> 
                            <option value="ja">Japanese</option> 
                            <option value="sp">Spanish</option> 
                        </select> 
                    </label><br>
            <input type="submit" value="Send" /> 
        </form> 
    </body> 
</html>

Etiqueta textarea

Tot i que poguem manipular el tamany dels controls amb l'atribut height i width , el contingut sempre està limitat a una línia: l'usuari no pot inserir salts de línia. Per a solventar aquest problema hi ha un tipus especial d'etiqueta que ens permet introduir textos "llargs": textarea . Així, aquesta és l'etiqueta típica que s'utilitza en les planes web quan ens demanen la nostra opinió, comentaris, altres motius ...

L'etiqueta textarea sempre té una etiqueta d'obertura i una de tancament, encara que no contingui cap element: no tingui cap fill. El text inclòs entre l'obertura i el tancament de l'etiqueta es mostrarà com a contingut d'entrada, tot i que l'usuari sempre el podrà esborrar o canviar.

L'etiqueta textarea té dos atributs interessants: rows i cols que ens permeten definir quants caràcters es podran visualitzar per a cada una de les línies (cols) i quantes línies es podran visualitzar a la vegada (rows). En el cas que es sobrepassin els valors d'aquests atributs, ens apareixerà una barra de desplaçament horitzontal i/o vertical segons si el valor sobrepassat és el de l'atribut cols o bé de rows .


<!DOCTYPE html>
<html lang="en"> 
    <head>     
        <meta charset="UTF-8"> 
        <title>Selecció valors</title> 
    </head> 
    <body> 
        <form>
                <label>Your opinion:
                        <textarea rows="4" cols="50">I think ...</textarea> 
                    </label><br>
            <input type="submit" value="Send" /> 
        </form> 
    </body> 
</html>

Definició de formularis en HTML