Elementi di input in un documento XHTML Mobile Profile
Tutti i precedenti elementi di input sono creati con il tag <input>. Per inviare i dati al server, gli elementi <input> sono associati al tag <form>. L' elemento <form> verrà trattato in maniera più dettagliata in una successiva lezione del presente tutorial.
L' attributo "type" dell' elemento <input> definisce il tipo di elemento in XHTML MP.
L' attributo "name" indica il nome dell' elemento stesso. Il nome sarà usato per richiamare i dati dell' utente sul server.
Campo di testo
I campi di testo sono usati per ottenere dati alfanumerici dall' utente. Il seguente markup crea un campo di testo in XHTML MP:
Il valore predefinito di "type" è text. Sarebbe opportuno specificarlo, anche se non è necessario, come è stato fatto per l' esempio precedente.
L' attributo maxlength del tag input limita il numero dei caratteri che un utente potrebbe scrivere nel campo di testo. Per esempio, un utente può inserire al massimo 10 caratteri,come riportato nel codice seguente:
Si può settare un valore di default per il campo di testo usando l' attributo value per il tag <input>. Per esempio, il campo di testo conterrà "Michele Rossi" all'apertura della pagina se al precedente codice si aggiunge:
Per mostrare quanto appena scritto qui sopra, ho raccolto in una unica screen le due caratteristiche (value e maxlength) oltre ad aggiungere un pulsante di Invio. Nel browser WAP viene visualizzato tutto in maniera corretta, come si può vedere dall' immagine successiva:
È buona norma configurare un campo di testo come se fosse una maschera di input. Una maschera di input restringe il tipo ed il numero di caratteri che un utente può inserire. La modalità di input (numerica o alfanumerica) dei tasti del dispositivo mobile, sarà configurata automaticamente secondo il valore che le viene assegnato.
In WML 1.x, l' attributo format dell' elemento <input> è usato per configurare una maschera di input. Tuttavia, l' attributo format non esisterà più in XHTML MP. Per indicare un campo di input, si deve usare la proprietà wap-input-format dei WAP CSS. Per esempio, il successivo codice CSS specifica che un utente può scrivere al massimo dieci caratteri numerici nel campo di testo. Il dispositivo mobile commuterà automaticamente la relativa tastiera alla modalità di input numerica affinchè l' utente immetta i caratteri.
-wap-input-format:"10N"
}
Campo password
Tutti i caratteri sono visualizzati attraverso un asterisco (*) in un campo di testo di tipo password. Questa è la maggior differenza tra un campo di testo ed un campo di tipo password. Il seguente codice di markup crea un campo password in XHTML MP:
Nel browser WAP il campo di tipo password si vedrà come l' immagine successiva:
Campo nascosto
Un campo nascosto non è visualizzato sullo schermo dei dispositivi mobili. È usato per conservare alcune informazioni che sono richieste dall' applicazione mobile Internet. Il seguente codice crea un campo nascosto in XHTML MP:
L' attributo "value" definisce il valore di default da inviare al server. Esempio:
Checkbox
Il seguente codice crea un checkbox in XHTML MP:
Checkbox dello stesso gruppo dovrebbero avere lo stesso nome, come questo:
<input type="checkbox" name="xhtml_mp_capitolo" value="2"/>
<input type="checkbox" name="xhtml_mp_capitolo" value="3"/>
L' attributo "value" definisce il valore che deve essere inviato al server quando il checkbox è selezionato. Per esempio, se il primo ed il secondo checkbox nel codice precedente sono selezionati, i valori 1 e 2 possono essere richiamati con il parametro dal nome "xhtml_mp_capitolo" sul server.
I Checkbox non sono selezionati di default. Un checkbox sarà inizialmente selezionato se l' attributo checked è specificato, come il seguente codice di esempio:
La successiva screen di esempio, visualizza quanto fino ad ora abbiamo visto nel codice:
I radio buttons in XHTML MP
Il seguente codice crea un radio button in XHTML MP:
Come i checkbox, i radio button appartenenti allo stesso gruppo devono avere lo stesso nome. In un gruppo di radio buttons, solo uno può essere nello stato "checked".
<input type="radio" name="xhtml_mp_capitolo" value="2"/>
<input type="radio" name="xhtml_mp_capitolo" value="3"/>
L' attributo "value" stabilisce il valore che deve essere inviato al server. Per esempio, se il secondo radio button nel codice precedente è selezionato, il valore 2 sarà associato al parametro dal nome "xhtml_mp_capitolo".
In ultimo, i radio buttons non sono selezionati di default. Un radio button sarà selezionato, all' apertura della pagina, se l' attributo "checked" è dichiarato nel codice, come il seguente esempio:
Di seguito una screen di come un gruppo di radio button viene visualizzato in un browser WAP:
| < Prec. | Succ. > |
|---|
