Moduli - parte 5
§ 4.10.1.6 Migliorare l'usabilità su dispositivi mobili
Alcuni dispositivi, in particolare quelli con la tastiera on-screen, possono rendere disponibili diverse modalità di input. Per esempio, quando si scrive sul numero di una una carta di credito, l'utente potrebbe desiderare di vedere solo le cifre 0-9, mentre per il nome potrebbe desiderare di rendere maiuscoli tutti i caratteri.
L'attributo inputmode consente di selezionare le appropriate modalità di input.
Ecco cosa succede assegnando l'attributo inputmode="latin-name" al campo Nome Cliente e inputmode="latin-prose" al campo Note. Il campo Telefono è già di type=tel ed il campo E-mail di tipo type=tel:
<form method="post"
enctype="application/x-www-form-urlencoded"
action="echoParametri.php">
<div><pre><label>Nome cliente: <input name="custname" required
autocomplete="name" inputmode="latin-name"></label></pre></div>
<div><pre><label> Telefono: <input type=tel name="custtel"
autocomplete="tel"></label></pre></div>
<div><pre><label> E-mail: <input type=email name="custemail"
autocomple="email"></label></pre></div>
<fieldset>
<legend> Taglia </legend>
<div><label> <input type=radio name=size value="piccola" required> Piccola</label></div>
<div><label> <input type=radio name=size value="media" required> Media</label></div>
<div><label> <input type=radio name=size value="grande" required> Grande</label></div>
<fieldset>
<fieldset>
<legend> Ingredienti </legend>
<div><label> <input type=checkbox name="topping[]" value="Bacon"> Bacon</label></div>
<div><label> <input type=checkbox name="topping[]" value="Funghi"> Funghi</label></div>
<div><label> <input type=checkbox name="topping[]" value="Cipolla"> Cipolla</label></div>
<div><label> <input type=checkbox name="topping[]" value="Carciofini"> Carciofini</label></div>
<fieldset>
<fieldset>
<legend> Consegna </legend>
<div><pre><label>Orario:<input type=time min="11:00" max="23:00" step="900"
name="delivery" required></label></pre></div>
<div><pre><label>Istruzioni particolari:<textarea name="comments" maxlength=30>
</textarea></label></pre></div>
<div><pre><button>Invia</button></pre></div>
</form>
Come abilitare le impostazioni di compilazione automatica su alcuni browser
In Chrome: Seleziona Impostazioni, Avanzate, Password e moduli, Impostazioni di compilazione automatica.
In Firefox: Seleziona Opzioni, Privacy, Cronologia, Impostazioni cronologia: utilizza impostazioni personalizzate,
In Internet Explorer: Seleziona Opzioni, Opzioni Internet, Contenuto, Completamento automatico, Impostazioni, Moduli.
Form Ordine Pizza
Nota
Il processamento eseguito dallo script, specificato con l'attributo action, è la visualizzazione dei parametri inseriti nella form. Ecco il codice. echoParametriPost.php