Appunti

§ 1. HTML <datalist> Tag

L'elemento <datalist> consiste in un un insieme di elementi <option> che rappresentano opzioni predefinite per altri controlli.

L'elemento <datalist> può essere utilizzato in due modi. Nel caso più semplice, l'elemento <datalist> ha per figli solo elementi <option>

Eccone l'esempio dalla specifica HTML 5.2

            <label>
               Sex:
               <input name=sex1 list=sexes1>
               <datalist id=sexes1>
               <option value="Transgender">
               <option value="Female">
               <option value="Male">
               </datalist>
            </label>

In casi più elaborati, all'elemento <datalist> possono essere forniti contenuti che possono essere visualizzati per clients che non supportanto <datalist>. In questo caso, gli elementi <option> sono forniti insieme ad un elemento <select> interno all'alemento <datalist>

Per vedere la lista cliccare nella casella "Sex:"

            <label>
               Sex 2:
               <input name=sex2 list=sexes2>
            </label>
            <datalist id=sexes2>
               <label>
               or select from the list:
               <select name=sex2>
                  <option value="TransToFemale">Trans</option>
                  <option value="TransToMale">Trans</option>
                  <option value="Female">Femmina</option>
                  <option value="Male">Maschio</option>
               </select>
               </label>
            </datalist>   

Primo problema:

Come usare un elemento datalist in una form.

Come caricare un elemento datalist con una query.

§ 2. Come usare un elemento datalist in una form

Riprendo l'esempio della form per ordinare una pizza.

Provo a sostituire i radio control per la scelta della taglia della pizza, con una datalist.

La pagina con la nuova form è: Form Ordine Pizza