back to top

Nuovi elementi in HTML5 – datalist, keygen ed output

In questa lezione vedremo cosa sono e come utilizzare gli elementi datalist, keygen ed output.

datalist

Definizione formale

L’elemento datalist raggruppa un insieme di opzioni che rappresentano quelle predefinite per altri controlli. I contenuti (testuali) dell’elemento hanno lo scopo di agire come fallback per i vecchi browsers; questo contenuti sono inframezzati dalle opzioni (relative). L’elemento non ha un significato visuale, per cui dovrebbe essere reso invisibile. Ogni elemento datalist è agganciato ad un elemento input attraverso l’attributo list dell’input stesso. Le varie options incluse in datalist (quando non vuote) debbono ognuna possedere una label ed un valore.

Un esempio:

<label>Regione di appartenza:
<input type="text" name="region" list="region">
  <datalist id="region">
    <option value="Lombardia">Lombardia</option>
    <option value="Umbria">Umbria</option>
    <option value="Campania">Campania</option>
    <option value="Sicilia">Sicilia</option>
  </datalist>
</label>

keygen

Definizione formale

L’elemento keygen rappresenta un generatore di chiavi doppie. Quando il form cui appartiene viene inviato al server la chiave privata viene salvata nel "repository" locale e la chiave pubblica inviata al server.

Possiede i seguenti attributi:

  • autofocus
  • challenge: se specificato viene "impacchettato" e spedito insieme alla chiave
  • disabled
  • form: associa il keygen al form relativo
  • keytype: enumerazione relativa al tipo di chiave (rsa ad esempio, che rappresenta il default qualora keytype non fosse dichiarato). Il draft non da indicazioni su quali keytypes debbano essere accettati dagli user-agents, paradossalmente uno specifico user-agent potrebbe non supportarne affatto.
  • name

La specifica non fornisce indicazioni precise di quello che il server potrebbe fare della chiave inviata, l’unico esempio che propone è lo scenario in cui al client viene ritornato un certificato a scopo di autenticazione.

Un esempio minimale:

<form id="unform" action="server.php" method="post">
  <keygen name="chiavesicurezza" keytype="rsa" />
</form>

output

Definizione formale

L’elemento output rappresenta il risultato di una elaborazione.

Possiede i seguenti attributi:

  • for: permette di stabilire una relazione esplicita tra il risultato dell’elaborazione e gli elementi che hanno portato al calcolo o che in qualche modo l’hanno influenzato. Deve consistere in una lista di token (gli ID degli elementi coinvolti) separati da spazi.
  • form: associa in modo esplicito l’output al relativo form.
  • name

Vi porto all’attenzione un semplice esempio presente nel draft:

<!doctype html>
<html>
<head>
  <title>Un semplice calcolatore</title>
</head>
<body>
  <form onsubmit="return false;" oninput="output.value = add_1.valueAsNumber + add_2.valueAsNumber">
    <input name="add_1" id="add_1" type="number" step="any"> +
    <input name="add_2" id="add_2" type="number" step="any"> =
    <output name="output" for="add_1 add_2"></output>
  </form>
</body>
</html>

Notate l’evento oninput del form e gli attributi type settati alla stringa "number", li analizzeremo nella prossima lezione.

output

N.B.: output non deve necessariamente contenere il risultato di una operazione numerica, potrebbe contenere i risultati di una query o qualsiasi altro contenuto generato da una elaborazione.

Pubblicitร 

In questa guida...