CREACIÓ DE

PÀGINES WEB AMB

HTML 5 I CSS 3
 FORMULARIS
Element <select> - Menú d’opcions
Representa un control que mostra un menú d'opcions. Les
opcions contingudes al menú són representades per
elements <option>. Cada opció de menú està definida per
un element <option> anidat dins del <select>. Cada
<option> ha de tenir un atribut value que contingui el valor
per enviar al servidor quan seleccioneu aquesta opció. Si
no s'hi inclou cap atribut value, el valor per defecte és el
text contingut dins de l'element. Podeu incloure un atribut
selected en un <option> perquè se seleccione per defecte
quan es carrega la pàgina. Exemple:
 FORMULARIS
Element <select> - Menú d’opcions
<label>Escoge la mascota que más te guste:
<select name="mascota" id="mascota">
<option value="">--Selecciona una opción--</option>
<option value="perro">Perro</option>
<option value="gato">Gato</option>
<option value="hamster">Hamster</option>
<option value="loro">Loro</option>
</select>
</label>
 FORMULARIS
Element <select> - Menú d’opcions

Atributs possibles:
- Selected: Incloent-lo en un element <option> selecciona
aquesta opció per defecte.
- Multiple: Amb l’element <select> permet triar més d’una
opció al mateix temps.
- Size: Pots especificar el número d’opcions que es
mostren al mateix temps.
- Required: Obligatorietat de contestació.
 FORMULARIS
Element <input> - Selector d’arxius (type="file")
Els formularis poden enviar fitxers a un servidor. El control
de selecció de fitxers es pot utilitzar per triar un o més
fitxers per enviar.
Per crear un control de selecció de fitxers, podem utilitzar
l'element <input> amb el vostre atribut type establert en
file. És possible restringir els tipus de fitxer que s'accepten
utilitzant l'atribut accept. A més, podeu permetre que
l'usuari trie més d'un fitxer afegint l'atribut multiple. En este
exemple, es crea un control de selecció de fitxers que
demana fitxers d'imatges i l'usuari pot triar múltiples fitxers:
 FORMULARIS
Element <input> - Selector d’arxius (type="file")
<input type="file" name="file" accept="image/*"
multiple="" />
 FORMULARIS
Element <input>-Camp de correu electrònic (type="email")
Aquest tipus de camp es defineix utilitzant el valor email en
l'atribut type de l'element <input>.
S’obliga a l'usuari a escriure dins del camp una adreça de
correu electrònic vàlida. Qualsevol altre contingut fa que el
navegador mostre un missatge d'error quan s'envia el
formulari.
També permet usar l’atribut multiple per introduir més d’un
correu electrònic. Exemple:
 FORMULARIS
Element <input>-Camp de correu electrònic (type="email")
<label>
Introduce un correo electrónico válido:
<input type="email" name="correo"
placeholder="prueba@prueba.com" required="" />
</label>
 FORMULARIS
Element <input> - Camp de URL (type="url")
Es pot crear un tipus especial de camp per introduir URLs
utilitzant el valor url per a l'atribut type.
Aquest tipus afegeix restriccions de validació al camp. El
navegador informarà d'un error si no es va introduir el
protocol (com a http: o https:), o si d'alguna manera l'URL
és clarament incorrecta. Hem de tenir en compte que
només perquè la URL tingui un format correcte, no vol dir
necessàriament que l'adreça a què fa referència existeixi.
Vegem un exemple:
 FORMULARIS
Element <input> - Camp de URL (type="url")
<label>
Introduce una URL:
<input type="url" name="url" placeholder="https://..."
required="" />
</label>
 FORMULARIS
Element <input> - Camp número de telèfon (type="tel")
Es pot crear un camp especial per introduir números de
telèfon utilitzant tel com a valor de l'atribut type.
A causa de la gran varietat de formats de número de
telèfon existents, aquest tipus de camp no estableix cap
tipus de restricció sobre el valor introduït per l’usuari (això
significa que permet incloure lletres, etc…). Aquest tipus és
útil no només per ser utilitzat per a números de telèfon,
sinó també quan sigui útil un teclat numèric o per introduir
altres tipus de dades. Exemple:
 FORMULARIS
Element <input> - Camp número de telèfon (type="tel")
<label>
Introduce un número de teléfono:
<input type="tel" name="telefono" placeholder="123 456
789"/>
</label>
 FORMULARIS
EXERCICI 1
Creeu una pàgina web on creeu un formulari amb els
camps vists en aquesta classe (menú d’opcions, selector
d’arxius, camp de correu electrònic, camp d’URL i camp de
número de telèfon) i verifiqueu els resultats al vostre
navegador. No oblideu incloure la resta de les etiquetes
HTML bàsiques.