La configurazione e la validazione di tasti della radio sembra essere il campo modulo questo dà a molti webmaster la maggior difficoltà nell'impostazione. In realtà, la configurazione di questi campi è il più semplice di tutti i campi del modulo da convalidare quando i pulsanti di opzione impostano un valore che deve essere verificato solo quando il modulo viene inviato.
La difficoltà con i pulsanti di opzione è che ci sono almeno due e di solito più campi che devono essere inseriti nel modulo, collegati insieme e testati come un gruppo. Se si utilizzano le convenzioni di denominazione e il layout corretti per i pulsanti, non si avranno problemi.
Imposta il gruppo di pulsanti di opzione
La prima cosa da guardare quando si usano i pulsanti di opzione nel nostro modulo è come i pulsanti devono essere codificati per poter funzionare correttamente come pulsanti di opzione. Il comportamento desiderato che vogliamo è avere un solo pulsante selezionato alla volta; quando viene selezionato un pulsante, qualsiasi pulsante precedentemente selezionato verrà automaticamente deselezionato.
La soluzione qui è dare a tutti i pulsanti di opzione all'interno del gruppo lo stesso nome ma valori diversi. Ecco il codice utilizzato per il pulsante di opzione stesso.
Anche la creazione di più gruppi di pulsanti di opzione per un modulo è semplice. Tutto quello che devi fare è fornire al secondo gruppo di pulsanti di opzione un nome diverso da quello utilizzato per il primo gruppo.
Il campo del nome determina a quale gruppo appartiene un determinato pulsante. Il valore che verrà passato per un gruppo specifico quando viene inviato il modulo sarà il valore del pulsante all'interno del gruppo selezionato al momento dell'invio del modulo.
Descrivi ogni pulsante
Per consentire alla persona che compila il modulo di capire cosa fa ogni pulsante di opzione nel nostro gruppo, dobbiamo fornire le descrizioni per ciascun pulsante. Il modo più semplice per farlo è fornire una descrizione come testo immediatamente dopo il pulsante.
Tuttavia, ci sono un paio di problemi con l'utilizzo del testo normale:
- Il testo può essere visivamente associato al pulsante di opzione, ma potrebbe non essere chiaro ad alcuni utenti che usano screen reader, ad esempio.
- Nella maggior parte interfacce utente utilizzando i pulsanti di opzione, è possibile fare clic sul testo associato al pulsante e selezionare il pulsante di opzione associato. Nel nostro caso qui, il testo non funzionerà in questo modo a meno che il testo non sia specificamente associato al pulsante.
Associare il testo a un pulsante di opzione
Per associare il testo al pulsante di opzione corrispondente in modo che facendo clic sul testo si selezioni quel pulsante, è necessario aggiungere un'ulteriore aggiunta al codice per ciascun pulsante circondando l'intero pulsante e il testo associato all'interno di un etichetta.
Ecco come sarebbe l'HTML completo per uno dei pulsanti:
Come pulsante di opzione con il nome ID indicato in per Il parametro del tag label è effettivamente contenuto nel tag stesso, il per e id i parametri sono ridondanti in alcuni browser. I loro browser, tuttavia, spesso non sono abbastanza intelligenti da riconoscere l'annidamento, quindi vale la pena inserirli per massimizzare il numero di browser in cui il codice funzionerà.
Ciò completa la codifica dei pulsanti di opzione stessi. Il passaggio finale consiste nell'impostare la convalida del pulsante di opzione utilizzando JavaScript.
Conferma convalida pulsante di opzione
La convalida di gruppi di pulsanti di opzione potrebbe non essere ovvia, ma è semplice una volta che sai come fare.
La seguente funzione convaliderà che è stato selezionato uno dei pulsanti di opzione in un gruppo:
// Convalida dei pulsanti di opzione
// copyright Stephen Chapman, 15 novembre 2004, 14 settembre 2005
// puoi copiare questa funzione ma ti preghiamo di conservare l'informativa sul copyright
funzione valButton (btn) {
var cnt = -1;
per (var i = btn.length-1; i> -1; io--) {
if (btn [i] .checked) {cnt = i; i = -1;}
}
if (cnt> -1) restituisce btn [cnt] .value;
altrimenti restituisce null;
}
Per utilizzare la funzione precedente, chiamala dalla routine di convalida del modulo e passale il nome del gruppo di pulsanti di opzione. Restituirà il valore del pulsante all'interno del gruppo selezionato o restituirà un valore nullo se non è selezionato alcun pulsante nel gruppo.
Ad esempio, ecco il codice che eseguirà la convalida del pulsante di opzione:
var btn = valButton (form.group1);
if (btn == null) alert ('Nessun pulsante di opzione selezionato');
altro avviso ('Valore pulsante' + btn + 'selezionato');
Questo codice è stato incluso nella funzione chiamata da un al clic evento associato al pulsante di convalida (o invio) sul modulo.
Un riferimento all'intero modulo è stato passato come parametro nella funzione, che utilizza l'argomento "form" per fare riferimento al modulo completo. Per convalidare il gruppo di pulsanti di opzione con il nome gruppo1, pertanto, passiamo form.group1 alla funzione valButton.
Tutti i gruppi di pulsanti di opzione di cui avrai bisogno possono essere gestiti utilizzando i passaggi descritti sopra.