HTML5 ha introdotto nuovi elementi anche per i moduli o form, 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.
<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.
<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.
Crittografia: <keygen>
Questo il risultato:
A seconda del browser utilizzato è possibile operare delle scelte sul grado di sicurezza.
<output>…<output>
L’elemento output esegue dei calcoli e ne mostra il risultato.
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:
questo sotto per i browser che accettano range:
<input type=”range” name=”a” value=”50″>100 +
<input type=”number” name=”b” value=”50″>=
<output name=”x” for=”a b”></output>
</form>
Provate questi esempi di output con il browser Opera o Safari, e resterete piacevolmente sorpresi.
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.