Nelle lezioni precedenti abbiamo visto come è possibile usare un form per costruire l'interfaccia di uno script in JS. In particolare abbiamo esaminato la funzione dei seguenti elementi:

• input di tipo text:
  per inserire dati o visualizzare risultati
  
• input di tipo button
  per eseguire una funzione cliccandoci sopra

Tuttavia, come abbiamo avuto modo di spiegare nelle apposite lezioni, gli elementi che è possibile inserire in un form sono molti di più (text area, select option, checkbox etc.). Da uno script in JS è possibile accedere a ciascuno di questi elementi attraverso il metodo document.getElementById. Vediamo ora rapidamente come.

L'elemento textarea viene usato per testi di una certa lunghezza. Per esempio:

visualizzato nel seguente modo:

Accedere a una textarea da JS è molto semplice. In pratica si usa document.getElementById esattamente come visto per le caselle di testo (input text):

<script>

function visualizza()
{          
var messaggio = document.getElementById("messaggio");
alert(messaggio.value);
}
</script>

Ovviamente, in modo simile, le textarea possono anche essere usate per visualizzare il risultato di una elaborazione (nel caso in cui non sia sufficiente lo spazio di una semplice input text).

La checkbox permette di realizzare scelte multiple. Esempio:

visualizzata nel seguente modo:

Ogni checkbox assume un valore true oppure false a seconda che sia selezionata oppure no. Tale valore può essere controllato per mezzo della proprietà checked, come mostra l'esempio seguente:

L'elemento radio permette di realizzare scelte mutuamente esclusive. Esempio:

visualizzata nel seguente modo:

Si osservi che le scelte in questo caso, a differenza delle checkbox, sono mutuamente esclusive, nel senso che non è possibile cliccare su più caselle. Si noti anche l'attributo name, indispensabile in questo caso per raggruppare insieme le diverse caselle.

Per verificare il valore selezionato si può usare il seguente codice:

L'elemento select-option permette di realizzare una casella a discesa con un elenco di scelte multiple. Esempio:

visualizzato nel seguente modo:

Accedere al valore selezionato attraverso document.getElementById è molto semplice, come mostra l'esempio qui sotto:

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it

Segui @ElePrograMania