Avventuriamoci negli input HTML5

Nuovi valori per input

Maggiori personalizzazioni

Migliorato controllo

C’è veramente da divertirsi!!!

Gli elementi <input> prima

Presentazione fornita da html5andmore.info presente anche su
ShareSlide
 Avventuriamoci negli input HTML5

Gli elementi <input> prima

Soliti e vecchi
Soliti
elementi
elementi
Completa retro
compatibilità

Andiamo a vedre qualcosa di nuovo!

Inseriamo un Indirizzo Email

Presentazione fornita da html5andmore.info presente anche su
ShareSlide
 Avventuriamoci negli input HTML5

Inseriamo un Indirizzo Email

Tradotto in type=”text”
Con la semplice modifica Come viene trasformato
Come
dell’attributo type possiamo questo elemento quando non
creare questo tipo di campo. è suportato da un browser.

Al momento i maggiori vantaggi

Se supportato vengono offerte
sono presenti per browser mobili,
seconda della
certe soluzioni a seconda della
tipologia di browser. ma il futuro annuncia validazioni
per tutti!
tutti!

Presentazione fornita da html5andmore.info presente anche su

ShareSlide
 Avventuriamoci negli input HTML5

Inseriamo un Indirizzo Email

Pe
qu rson a
n e st l iz
r ee o e za
hs c lem ta
u c e nt g ra zi
a to o ea
ie r
ta st
o la ne !
c
Ec l’iP ho
l
de

Al momento i maggiori vantaggi

sono presenti per browser mobili,
mobili,
ma il futuro annuncia validazioni
tutti!
per tutti!

Inseriamo un Indirizzo Internet

Presentazione fornita da html5andmore.info presente anche su
ShareSlide
 Avventuriamoci negli input HTML5

Inseriamo un Indirizzo Internet

Permette di validare un
Permette un indirizzo
indirizzo
di HTML5 èè
La semplicità di
internet, o URL, direttamente dal
sbalorditiva! Un
Un valore diverso
diverso e
basa su
campo perchè si basa su 33
lo stesso campo si si trasforma!
semplici principi.
semplici

un indirizzo internet avrà

Saranno presenti dei punti Avrà una estensione
sicuramente un http://

Ma come visto precedentemente per l’input con

con valore
valore email,
questo nuovo elemento sarà utile anche per i dispositivi mobili!

Presentazione fornita da html5andmore.info presente anche su

ShareSlide
 Avventuriamoci negli input HTML5

Inseriamo un Indirizzo Internet

Ag
sl a giu n
a sto usa s h o ge nd
il
t
i er
ast on te
ti . co o b o
l a al c m tto n
ch
v o
a
lt tta
a e ri i c om
n a a d sul e
a u s i ta n la
r
co ho n e oi
n
A ll’iP pi
ù
de

Ma come visto precedentemente per l’input con

con valore
valore email,
questo nuovo elemento sarà utile anche per i dispositivi mobili!

Diamo i numeri!
Presentazione fornita da html5andmore.info presente anche su
ShareSlide
 Avventuriamoci negli input HTML5

Diamo i numeri!

Con i suoi vari attributi, del

del tutto opzionali, type=”number” identifica
identifica ilil campo
campo come
come
maggior controllo
ci fornisce un maggior controllo sulla numerico;
numerico;
quantità massima e minima accettata e min=”0” imposta
imposta ilil minimo
minimo accettabile
accettabile aa zero;
zero;
anche altro! max=”100” imposta
imposta ilil massimo
massimo accettabile
accettabile aa
100;
100;
step=”10” insieme
insieme aa min
min definiscono
definiscono un
un lasso
lasso
numerico accettabile;
numerico accettabile;
value=”30” ilil classico
classico valore
valore di
di default.
default.

In Opera
In Opera si
si disattiva
disattiva se
se raggiunto
raggiunto ilil max
max

Cliccando su
Cliccando su questi
questi bottoni
bottoni si
si incrementa
incrementa ee Ma altro ci aspetta
Ma aspetta nei browser
browser
decrementa aa seconda
decrementa seconda del
del valore
valore didi step.
step. mobili!

Presentazione fornita da html5andmore.info presente anche su

ShareSlide
 Avventuriamoci negli input HTML5

Diamo i numeri!
Mo
a iu st ra
i er a sto nu m te rà nd o u
t ast on te e ri. nel l’ na ta
l a al c in
o
a
lt tta s er stier
a v a im e a c
un i a d n to h e
r a e s de ci
n co ho n i
A ll’iP
de

Ma altro ci aspetta
Ma aspetta nei browser
browser
mobili!

Numeri con slide

Presentazione fornita da html5andmore.info presente anche su
ShareSlide
 Avventuriamoci negli input HTML5

Numeri con slide

Basta cambiare ilil type in range ee I vari attributi hanno le stesse

questo bellissimo
bellissimo elemento
elemento vedrà
vedrà funzionalità presentati per il
funzionalità
la luce. type=”number”.

Visto che se non supportato verrà

trasformato in un campo testo,
potete iniziare ad usarlo fin da
subito!
Trascinando qui
Trascinando qui potrete
potrete impostare
impostare un
un
nuovo valore.
nuovo valore.

Scegliamo un colore
Presentazione fornita da html5andmore.info presente anche su
ShareSlide
 Avventuriamoci negli input HTML5

Scegliamo un colore

Anche stavolta, cambiamo

cambiamo
Basta soluzioni Javascript che non
valore ed
semplicemente un valore ed un
un
fanno altro che appesantire la
elemento completamente nuovo
nuovo
pagina!
in nostro soccorso!
arriva in

Al momento l’unico browser in

grado di supportare questo
elemento è Opera, ma visto che
elemento che
altrimenti si traduce in un text non
vedo perché non dovreste già
usarlo.

Campi di ricerca
Presentazione fornita da html5andmore.info presente anche su
ShareSlide
 Avventuriamoci negli input HTML5

Campi di ricerca

nuovo elemento
Questo nuovo elemento aiuterà
aiuterà
Un campo didi ricerca che porta con
certamente la stragrande
se alcuni vantaggi!
maggioranza dei siti web.

Angoli Arrotondati Miglioramento dell’usabilità

Cliccando sulla
Cliccando sulla xx cancellerete
cancellerete l’intero
l’intero
campo.
campo.

Scegliete una data

Presentazione fornita da html5andmore.info presente anche su
ShareSlide
 Avventuriamoci negli input HTML5

Scegliete una data

Potrà essere personalizzato in

Elemento molto
Elemento molto versatile e di
diversi modi cambiandone ilil valore
grande utilità. type.

Basta JavaScript,
JavaScript, qui è tutto
browser!

Un calendario
Un calendario pronto
pronto da
da utilizzare!
utilizzare!

Conclusioni
Presentazione fornita da html5andmore.info presente anche su
ShareSlide
 Avventuriamoci negli input HTML5

Conclusioni

Ma visto che tutti

gli elementi non
riconosciuti
Come è possibile
Come possibile diventano text,
vedere la potrete
compatibilità sperimentare
necessita di molti di essi!
essere migliorata

Se vi stupisce il poco supporto di

Potrete utilizzare librerie come Modernizr per controllare
controllare
FireFox, con
con la versione 4 sono
sono state
state
se il browser supporta o meno gligli elementi e modificare
introdotte molte cose! Le vedremo
introdotte
il vostro layout di conseguenza!
insieme in futuro.

Presentazione fornita da html5andmore.info presente anche su

ShareSlide
 Perché non venite a trovarci?

Una vostra visita farà sempre piacere dalle parti di

html5andmore.info,
html5andmore.info e sicuramente lasciare un commento sul nostro
sito sarà il modo più veloce per contattarci, ma magari voi preferite:

Per raggiuncerci invece su questi network vi basterà invece cercare

HTML5 and More, e là ci troverete!

Presentazione fornita da html5andmore.info presente anche su

ShareSlide