Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

HTML: i radio button.

Scritto da Fare-internet il 1 ottobre 2010 condividi condividi

I radio button son quei bottoni circolari all’interno del quale si può mettere (o non mettere) il pallino.
Questo è un radio:

Il codice utilizzato per produrlo è il seguente:

<input type="radio" name="myRadio">

Abbiamo quindi utilizzato il tag input con attributo type=”radio”, abbiamo inoltre dato un nome al radio tramite l’attributo name.
Se cliccate sul radio, al sui interno apparirà un pallino e per quanto proviate non riuscirete più a toglierlo.

Invece qui il pallino una volta messo passa da radio all’altro:
o qui o qui

Per ottenere questo riusltato basta dare lo stesso valore all’attributo name di entrambi (più volgarmente si può dire che basta dargli lo stesso nome). Ecco il codice:

<input type="radio" name="myRadio" value="1"> o qui
<input type="radio" name="myRadio" value="2"> o qui

In questo caso abbiamo aggiunto anche l’attributo value, infatti mandando i dati ad un’altra pagina (indipendentemente da metodo scelto), passerà una variabile con nome uguale all’attributo name e valore uguale all’attributo value del radio selezionato.
Questo funzionamento del radio ci fa capire che è il caso di utilizzarlo quando vogliamo offrire all’utente la possibilità di compiere scelte opzionali, ad esempio si può usare per far scegliere all’utente il sesso.

Si possono proporre anche più di due opzioni:

Frutto preferito:
Mela
Pera
Banana
Pesca

Il codice usato è:

Frutto preferito:
<input type="radio" name="myRadio" value="1" checked="checked"> Mela
<input type="radio" name="myRadio" value="2"> Pera
<input type="radio" name="myRadio" value="3"> Banana
<input type="radio" name="myRadio" value="4"> Pesca

Come notate il primo radio è già spuntato, perchè abbiamo aggiunto l’attributo checked=”checked”.
Mentre prima non cliccando su nessu radio potevamo lasciarlo bianco, utilizzando l’attributo checked non c’è possibilità di non scegliere una delle 4 opzioni.

Tag: ,  

Twitter