CREACIÓ DE

PÀGINES WEB AMB

HTML 5 I CSS 3
 FORMULARIS
Element <input> - Selector de color (type="color")
Els colors també solen ser difícils de manejar ja que hi ha
moltes maneres d'expressar-los: valors RGB (decimal o
hexadecimal), valors HSL, paraules clau, etc.
Es pot crear un control de tipus color utilitzant l'element
<input> amb el vostre atribut type amb valor color:
<label>
Seleccioneu un color: <input type="color" name="color" />
</label>
 FORMULARIS
Element <input> - Selector de color (type="color")
Si el navegador admet aquest tipus de camp, en fer-hi clic
s'utilitzarà la funcionalitat d'elecció de color
predeterminada del sistema operatiu. Pots observar el
resultat amb el següent exemple:
Seleccioneu un color
Al fer clic sobre el selector s’obri un quadre per seleccionar
el color.
 FORMULARIS
Element <input> - Camp de cerca (type="search")
Els camps de cerca s'utilitzen per crear caixes de cerca a
pàgines web i aplicacions. Aquest tipus de camp es
defineix utilitzant el valor search al vostre atribut type.
Sovint els camps search es mostren amb vores redones; i
de vegades també es mostra una «Ⓧ», per netejar el
camp de qualsevol valor quan es clica sobre ell.
Es poden guardar els valors d'un camp search i reutilitzar-
se a múltiples pàgines del mateix lloc web per oferir
autocompletat. Aquesta característica sol passar de forma
automàtica a la majoria de navegadors moderns.
 FORMULARIS
Element <input> - Camp de cerca (type="search")
Exemple: <input type="search" name="buscar"
placeholder="Buscar" required="" />
 FORMULARIS
Element <button> - Botons en el formulari
L'etiqueta d'HTML <button> representa un element de
tipus botó que pot ser utilitzat en formularis oa qualsevol
part de la pàgina que necessiti un botó simple i estàndard
per iniciar una acció en prémer-hi. Per defecte, els botons
HTML es presenten amb un estil similar a totes les
plataformes.
Es pot canviar el comportament per defecte d'un botó
mitjançant l'atribut type. Els possibles valors que podem
utilitzar són:
 FORMULARIS
Element <button> - Botons en el formulari
- Submit: El botó envia les dades del formulari al servidor.
Aquest és el valor per defecte si no s'especifica l'atribut
amb el formulari o si l'atribut conté un valor buit o no vàlid.
- Reset: El botó restableix tots els controls als valors
inicials. S'hauria d'usar només quan calgui, ja que pot
provocar que un usuari perda les dades.
- Button: El botó no té un comportament predeterminat i no
fa res quan es pressiona. Utilitzant codi JavaScript podem
iniciar diverses accions per respondre als esdeveniments
que genere aquest element.
 FORMULARIS
Element <button> - Botons en el formulari
Exemple dels 3 tipus de botons:
<p> <label>Introduce un comentario: <input type="text"
name="comentario" required="" /> </label> </p>
<p> <button type="submit">Este es un botón de tipo
"submit"</button> </p>
<p> <button type="reset">Este es un botón de tipo
"reset"</button> </p>
<p> <button type="button">Este es un botón de tipo
"button"</button> </p>
 FORMULARIS
Element <button> - Botons en el formulari

Els elements <button> us permeten utilitzar codi HTML

entre les etiquetes <button> d'obertura i tancament, que es
el text que apareixerà dins del botó.
 FORMULARIS
EXERCICI 1
Creeu una pàgina web on creeu un formulari amb els
camps vists en aquesta classe (selector de color i camp de
cerca) i amb els tres tipus de botons que hem vist.
Verifiqueu els resultats al vostre navegador. No oblideu
incloure la resta de les etiquetes HTML bàsiques.