Come convalidare i pulsanti di opzione in una pagina Web

L'impostazione e la convalida dei pulsanti di opzione sembra essere il campo modulo che offre 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 mentre 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:

1. Il testo può essere visivamente associato al pulsante di opzione, ma potrebbe non essere chiaro ad alcuni utenti che usano screen reader, ad esempio. 
2. Nella maggior parte delle interfacce utente che utilizzano i pulsanti di opzione, il testo associato al pulsante è selezionabile e in grado di 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 tale 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:

 pulsante uno

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 tramite JavaScript.