Il sito per imparare gratuitamente a fare pagine Web

Elementi Forms di HTML5

Questa guida è stampabile in modo agevole dalla sua apposita voce: "Download PDF", presente nel menù laterale:
 


Andrea Bianchi © www.web-link.it   Guida HTML 5 - Ver. 1.1.1 

Nuovi elementi per Form.

HTML5 ha introdotto nuovi elementi anche per i moduli o forms, a dire la verità di alcuni se ne sentiva davvero il bisogno visto che per ottenere quello che adesso è possibile fare specificando un semplice attributo prima lo si otteneva con diverse righe di codice javascript. Vorrei ricordare che in questa guida vengono mostrati soltanto quelli che sono una novità per i forms di HTML5, dando per scontato che voi conosciate già anche gli altri di HTML precedenti, se così non fosse, su web-link ci sono guide per tutti i livelli di conoscenza, principianti compresi, grazie alle quali sarà possibile comprendere al meglio lo scopo ed il significato di questi nuovi elementi introdotti da HTML5.

Di seguito la descrizione con esempi dei nuovi elementi usabili nei forms. Nelle attuali versioni di alcuni browser non tutti sono riconosciuti.

 

<datalist>...</datalist>

L'elemento <datalist> propone una lista di dati che è possibile selezionare con un click per inserirli in un campo input, potrebbe essere considerato anche un attributo oltre che ad un elemento vero e proprio dal momento che funziona solo se vi è un input a cui fare riferimento.

Nell'esempio sono stati inseriti alcuni nomi di nazioni, provate ad iniziare a digitare il nome della vostra, se è presente nella lista (datalist) questa vi viene proposta permettendovi di selezionarla, con un doppio click si mostrano tutte le voci, non viene obbligata la scelta, è infatti possibile inserire anche un nome non presente nella datalist.

<input list="nazione">
<datalist id="nazione">

<option value="Italia">
<option value="Francia">
<option value="Inghilterra">
<option value="Germania">
<option value="Spagna">
<option value="America">
</datalist>

Questo il risultato:

Provate ad inserire una lettera, poi due, e così via, noterete come le proposte della lista cambiano fino a lasciare soltanto quella che ha i requisiti giusti.



su
 

<keygen>

L'elemento <keygen> permette un modo sicuro per autenticare un utente. Questo elemento genera due chiavi crittografate nel momento dell'invio dati, una pubblica ed una privata. La chiave privata viene memorizzata nel dispositivo client mentre la chiave pubblica viene invece inviata al server e può essere poi riutilizzata in futuro per autenticare l'utente in possesso dell'altra chiave privata.

Nome Utente: <input type="text">
Crittografia: <keygen>

Questo il risultato:

Nome Utente: Crittografia:

A seconda del browser utilizzato è possibile operare delle scelte sul grado di sicurezza.



su
 

<output>...<output>

L'elemento output esegue dei calcoli e ne mostra il risultato.

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
A<input type="number" name="a" value="50">+
B<input type="number" name="b" value="50">=
<output name="x" for="a b"></output>
</form>

Questo il risultato:

A + B =

questo sotto per i browser che accettano range:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50">100 +
<input type="number" name="b" value="50">=
<output name="x" for="a b"></output>
</form>
0 100 + =

Provate questi esempi di output con il browser Opera o Safari, e resterete piacevolmente sorpresi.



su

Nella prossima lezione vedremo invece i nuovi type applicabili ad input, sempre relativi ai Form o Moduli di html

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Forum di web-link


Andrea Bianchi