CREACIÓ DE

PÀGINES WEB AMB

HTML 5 I CSS 3
 FORMULARIS
En aquest tema vorem instruccions i exemples que us
ajudaran a aprendre els conceptes bàsics dels formularis
web, que són una de les principals eines per interactuar
amb els usuaris. En general, s'utilitzen per recopilar dades
o per permetre'ls controlar una interfície d'usuari.
Els formularis web són un dels punts d'interacció principals
entre un usuari i un lloc web o aplicació. Els formularis
permeten als usuaris la introducció de dades, que
generalment s'envien a un servidor web per al seu
processament i emmagatzematge o s'utilitzen al costat del
client per provocar una actualització de la interfície.
 FORMULARIS
A les properes classes crearem formularis web funcionals.
Per això, presentarem primer alguns controls de formulari i
elements estructurals comuns, i ens centrem també en les
millors pràctiques d'accessibilitat. A continuació, veurem
amb detall les funcions dels diferents controls de formulari,
o elements, i estudiarem totes les diferents opcions de què
es disposa per a la recopilació de diferents tipus de dades.
En aquesta part, veurem el conjunt original de controls de
formulari, disponible a tots els navegadors des dels
primers dies de la web.
 FORMULARIS
Element <form>
Tots els formularis comencen amb un element <form>, com
aquest:
<form action="contactar.php" method="get"> </form>
Tots els seus atributs són opcionals, però és una pràctica
estàndard establir sempre almenys els atributs action i
method:
- Action defineix la ubicació (URL) on s'envien les dades.
- Method defineix amb quin mètode HTTP s'envien (get o
post).
 FORMULARIS
Element <label>
Ens permet definir una etiqueta per controlar un formulari
HTML. Aquest és l'element més important si voleu crear
formularis accessibles perquè quan s'implementen
correctament, els lectors de pantalla llegeixen l'etiqueta
d'un element de formulari juntament amb les instruccions
relacionades.
<label>
Nombre: <input type="text" name="nombre" />
</label>
 FORMULARIS
Element <label>
Un altre avantatge de configurar correctament les etiquetes
és que podeu fer clic a l'etiqueta per activar el control de
formulari corresponent. Això és útil per a controls com
entrades de text, on podeu fer clic tant a l'etiqueta com a
l'entrada de text per proporcionar el focus al control de
formulari, però és útil especialment per a botons d'opció i
caselles de verificació, perquè la zona d'aquest control pot
ser xicoteta, i pot ser útil per facilitar-ne l'activació.
 FORMULARIS
Element <input>
Són els controls de formulari més bàsics, i permeten a
l’usuari introduir qualsevol tipus de dades. Poden prendre
moltes maneres diferents segons el valor del seu atribut
“type”. S'utilitza per crear la majoria dels tipus de controls
de formulari, que inclouen camps de text d'una sola línia,
controls per a la data i l'hora, i també controls sense
introducció de text, com ara caselles de verificació,
selectors d'opció i selectors de color, i fins i tot botons.
Tots els controls de text bàsics comparteixen alguns
comportaments comuns:
 FORMULARIS
Element <input>
Poden tenir un placeholder: es tracta d'un text que apareix
dins de la caixa d'entrada de text i que es fa servir per
descriure breument el propòsit de la caixa de text.
Poden presentar una limitació de mida (la mida física de la
caixa de text) i de l'extensió mínima i màxima (el nombre
mínim/màxim de caràcters que es poden posar a la caixa
de text).
Permeten correcció ortogràfica (utilitzant l'atribut
spellcheck), si el navegador l'admet.
 FORMULARIS
Element <input> - Camps de text d’una línia (type="text")
Un camp de text d'una sola línia es crea utilitzant un
element <input> el valor d'atribut “type” del qual s'estableix
en “text”, o ometent per complet l'atribut “type” (“text” és el
valor predeterminat).
<label> Nombre (de 5 a 10 caracteres):
<input type="text" name="nombre" required
placeholder="Escriba aquí su nombre"></label><br/>
<label> Comentario: <input type="text" name="comentario"
required placeholder="Escriba aquí su comentario">
</label><br />
 FORMULARIS
Element <input> - Camps de text d’una línia (type="text")
 FORMULARIS
Element <input> - Camps de text d’una línia (type="text")
required minlength="5" maxlength="10" size="15"
Atributs:
- required: Fa que el camp en qüestió siga obligatori
d’omplir.
- minlength: Longitud mínima que ha de tindre el text.
- maxlength: Longitud màxima que ha de tindre el text.
- size: Tamany del camp de text a omplir.
 FORMULARIS
Element <input> Camp de contrasenya (type="password")
Un dels tipus d'entrada originals era el tipus de camp de
text password:
<label>
Contrasenya: <input type="password"
name="contrasena"> </label>
El valor de la contrasenya no afegeix restriccions especials
al text que s'introdueix, però amaga el valor que
s'introdueix al camp (per exemple, amb punts o asteriscs)
per impedir que altres puguen llegir-lo.
 FORMULARIS
Element <input> Camp de contrasenya (type="password")

A menys que envieu el vostre formulari en mode segur,

s'enviarà com a text pla, el que és dolent des del punt de
vista de la seguretat perquè algú amb males intencions
podria interceptar les teves dades i robar les teves
contrasenyes.
 FORMULARIS
Element <textarea> Camp de varies línies
L'element <textarea> representa un control d'edició de text
de diverses línies, útil quan voleu permetre que els usuaris
introdueixin una quantitat considerable de text.
<label>Cuéntanos tu historia:
<textarea name="historia" rows="5">
Era una noche oscura y tormentosa...
</textarea>
</label>
 FORMULARIS
Element <textarea> Camp de varies línies

Es poden usar els atributs rows i cols per especificar el

tamany exacte per al camp. També estem usant un
contingut predeterminat entre les etiquetes <textarea> ja
que aquest no admet l’atribut value.
 FORMULARIS
Element <input> Caselles de verificació (type="checkbox")
Les caselles de selecció es creen establint l'atribut type de
l'element <input> amb el valor checkbox. Els elements
d'aquest tipus se solen representar com a caselles que es
marquen en activar-se.
<label>
<input type="checkbox" name="zanahorias"
value="zanahorias" checked >
¿Te gustan las zanahorias?
</label>
 FORMULARIS
Element <input> Caselles de verificació (type="checkbox")

En incloure l'atribut checked, la casella de selecció es

marca automàticament quan es carrega la pàgina. Quan
feu clic a la casella de selecció o a l'etiqueta associada, la
casella de selecció s'activa o es desactiva.
 FORMULARIS
Element <input> Botons d’opcions (type="radio")
Es crea un botó d'opció establint l'atribut type de l'element
<input> al valor ràdio. Els elements d'aquest tipus
generalment s'utilitzen en grups (col·leccions de botons del
mateix tipus que descriuen un conjunt d'opcions
relacionades). Només podeu seleccionar un botó d'opció
en un grup determinat alhora.
 FORMULARIS
Element <input> Botons d’opcions (type="radio")
<label>
<input type="radio" name="comida" value="sopa"
checked="" />Sopa
</label><br />
<label>
<input type="radio" name="comida" value="curry" />Curry
</label><br />
<label>
<input type="radio" name="comida" value="pizza" />Pizza
</label><br />
 FORMULARIS
Element <input> Botons d’opcions (type="radio")
Si comparteixen el mateix valor d'atribut name, es
considera que són al mateix grup de botons. Només un
botó dins un grup pot estar activat a cada moment. Això vol
dir que quan un se selecciona, tots els altres es
desseleccionen automàticament. Quan envieu el formulari,
només s'envia el valor del botó d'opció seleccionat. Si cap
no està seleccionat, es considera que el conjunt complet
de botons d'opció està en un estat desconegut i no s'envia
cap valor amb el formulari.
 FORMULARIS
EXERCICI 1
Creeu una pàgina web on creeu un formulari amb els
camps vists fins ara (camp de text d’una línia, camp de
contrasenya, camp de text de varies línies, caselles de
verificació i botons d’opcions) i verifiqueu els resultats al
vostre navegador. No oblideu incloure la resta de les
etiquetes HTML bàsiques.