Moduli - parte 6
§ 4.10.1.7 Le differenze fra gli attributi type, autocomplete, e inputmode
Gli attributi type, autocomplete, inputmode sembrano simili, generando un po di confusione. Ad esempio, in tutti e tre i casi la stringa email rappresenta un valore valido. Questa sezione tenta di spiegare le differenze fra questi tre attributi e fornisce consigli su come usarli.
L'attributo type dell'elemento <input> determina quale tipo di controllo presentare. E' una scelta di base al pari della scelta dell'elemento da usare.
Per contro, l'attributo autocomplete, descrive cosa rappresenta il valore inserito. E' come scegliere a quale elemento una etichetta si riferisce.
Per prima cosa consideriamo un numero telefonico. Se una pagina richiede l'inserimento di un numero telefonico da parte dell'utente, la giusta impostazione del controllo è <input type=tel>. Tuttavia, quale valore autocomplete usare, dipende da qual'è il numero richiesto: nazionale, internzionale e così via.
Per esempio, una pagina che fa parte del processo di ordinazione su un sito e-commerce, per un utente che acquista un regalo da consegnare ad un amico, potrebbe richiedere sia il numero di telefono del compratore che quello dell'amico. La form potrebbe presentarsi così:
<div><pre><label>Your phone number: <input type=tel name="custtel"
autocomplete="billing tel"></label></pre></div>
<div><pre><label>Recipient's phone number: <input type=tel name="shiptel"
autocomplete="shipping tel"></label></pre></div>
Ma se il sito prevedesse solo clientela e consegne nazionali, il codice html potrebbe essere questo:
<div><pre><label>Your phone number: <input type=text name="custtel"
autocomplete="billing tel-national"></label></pre></div>
<div><pre><label>Recipient's phone number: <input type=text name="shiptel"
autocomplete="shipping tel-national"></label></pre></div>
Dove autocomplete=... tel viene modificato in autocomplete=... tel-national.
Si consideri ora la scelta del linguaggio preferito da un utente. L'impostazione corretta di autocomplete è autocomplete=language.
Tuttavia la scelta potrebbe essere fatta tramite diversi tipi di controllo:
- un text-field semplice, <input type=text>;
- una drop-down list, <select>;
- un insieme di radio-button,<input type=radio>;
Dipende solo da quale interfaccia si desideri utilizzare.
Infine, l'attributo inputmode decide il tipo di modalità di imput da usare, quando il coltrollo è un free text-field.
Consideriamo i nomi. Se una form richiede solo il nome, il controllo appropriato è <input type=text>. Se si desiderasse il nome completo, l'impostazione di autocomplete appropriata potrebbe essere autocomplete=name.
Ma se l'utente fosse giapponese, e si richiedesse sia il nome giapponese che il nome latinizzato, allora potrebbe essere utile defaultizzare il primo campo con modalità di input giapponese, ed il secondo campo con modalità di input latina:
<div><pre><label>Japanese name: <input type=text name="j"
autocomplete="section-jp name" inputmode="kana"></label></pre></div>
<div><pre><label>Romanized name: <input type=text name="e"
autocomplete="section-en name" inputmode="latin-name"></label></pre></div>
In questo esempio, la keyword "section-*" in autocomplete, dice al programma che due campi della form si aspettanto nomi diversi. Senza di essi il programma potrebbe automaticamente riempire il secondo campo con il valore del primo.
Nota
Le parti delle keywords "-jp" e "-en" sono opache per il programma; il programma non può indovinare da quale dei due campi aspettarsi il nome giapponese e da quale il nome inglese.