Lezioni di Informatica
"Una volta che abbiate conosciuto il volo, camminerete sulla terra guardando il cielo" [ L. da Vinci ]
Informazioni sul Sito
N. visitatori  000059263  dal 21/01/2007  |   e-mail: ksoft64camera@gmail.com   
Cerca nel sito
Documenti collegati alla pagina
  I moduli o form
Form

Significato e uso dei form

I form sono delle aree di dialogo costituite da caselle di testo, pulsanti, caselle combinate e altri elementi di INPUT / OUTPUT.
Sono utilizzati per inserire dati da inviare per effettuare:
  • iscrizioni ad attività on line (associazioni, club, ...)
  • acquisti on line
  • tesseramenti
  • accesso a social network (facebook, twitter)
I dati inviati saranno ricevuti dai server che potranno eleborarli e dare delle risposte.

Tag e attributi fondamentali

Il tag principale è form seguito dagli attributi action e method.
<form action="elaborazione.php" method="post">
...
...
...
</form> 
Nell'esempio è stato costruito un form che invierà i suoi dati alla pagina elaborazione.php con il metodo post, ovvero in modo sicuro (v. approfondimenti)

Cosa contiene un form?

Il tag form deve necessariamente contenere, al suo interno, altri tag che svolgono funzioni diverse e che saranno descritti di seguito.
Distinguiamo:
Caselle di testo (text box)
Una casella di testo è un contenitore di INPUT che serve per inserire dati. Si utilizza il tag input indicando nell'attributo type il valore "text". L'attributo name è rappresenta il nome del contenitore che sarà inviato alla pagina che dovrà riceverne il contenuto
Esempio:
Per ottenere:

Inserisci il tuo colore preferito:
scriveremo:
Inserisci il tuo colore preferito: <input type="text" name="colore" />
Altri attributi che si possono aggiuungere sono value (valore prestabilito) e maxlenght (numero massimo di caratteri inseribili).
Esempio completo:
Per ottenere:

Inserisci il tuo colore preferito:
scriveremo:
Inserisci il tuo colore preferito: <input type="text" name="colore"  value="blue" maxlength="15" />
Torna indietro

Aree di testo (text area)
E' una casella di testo particolare che si espande su più righe ed è utilizzata per inserire commenti nei blog, nei forum e nei social network.
Si utilizza il tag textarea indicando nell'attributo cols il numero di colonne e nell'attributo rows il numero di righe a disposizione; l'attributo name rappresenta il nome del contenitore che sarà inviato alla pagina che dovrà riceverne il contenuto
Esempio:
Per ottenere:

Inserisci un commento:
scriveremo:
Inserisci un commento:<br /> 
<textarea cols="60" rows="4" name="commento"></textarea>
Torna indietro

caselle combinate (combo box)
Sono anche chiamate "elenchi a discesa" e sono utilizzare quando si vuole far scegliere un dato da un elenco fisso di dati.
Si utilizza il tag select indicando nell'attributo name il nome del contenitore che sarà inviato alla pagina che dovrà riceverne il contenuto
. I dati della lista da cui scegliere vengono inseriti tramite il tag option che renderà visibili le opzioni. Il tag option prevede l'attributo value che sarà il valore realmente inviato. Infatti si potrebbe fa vedere all'utente un nome di un prodotto che ha un codice che rappresenta il dato da inviare.
Esempio:
Per ottenere:

Scegli un prodotto: 

scriveremo:
Scegli un prodotto:
<select name="prodotto">
<option value="1">Scanner xyz</option>
<option value="2">Stampante xzz</option>
<option value="3">Scatola 10 DVD ykx</option>
<option value="4">Scatola 10 CD wxy</option>
</select>
Torna indietro

caselle di opzioni di tipo "radio"
Qunado si vuole effettuare una sola scelta tra più possibilità si possono creare delle opzioni precedute da un pallino bianco su cui fare click. Il pallino scelto assumerà il colore nero.
Si utilizza, per ogni opzione, il tag input indicando nell'attributo type il valore "radio". L'attributo name è sarà sempre uguale e rappresenta il nome del contenitore che sarà inviato alla pagina che dovrà riceverne il contenuto
Esempio:
Per ottenere:

Scegli un solo colore: Rosso Verde Blu
scriveremo:
Scegli un solo colore:<br />
<input type="radio" name="colore" value="rosso" />Rosso
<input type="radio" name="colore" value="verde" />Verde
<input type="radio" name="colore" value="blu" />Blu
Torna indietro

caselle di opzioni di tipo "check box"
Quando si vogliono effettuare più scelte (anche tutte) tra più possibilità si possono creare delle opzioni precedute da un quadratino bianco su cui fare click. Il quadratino scelto avrà il segno di spunta.
Si utilizza, per ogni opzione, il tag input indicando nell'attributo type il valore "checkbox". L'attributo name è sarà sempre uguale e finisce con le parentesi quadre aperta e chiusa e rappresenta il nome di un contenitore di tipo "insieme" che sarà inviato alla pagina che dovrà riceverne il contenuto
Esempio:
Per ottenere:

Scegli i colori che preferisci (anche tutti): Rosso Verde Blu
scriveremo:
Scegli i colori che preferisci (anche tutti)::<br />
<input type="checkbox" name="colore[]" value="rosso" />Rosso
<input type="checkbox" name="colore[]" value="verde" />Verde
<input type="checkbox" name="colore[]" value="blu" />Blu
Torna indietro

pulsanti
Un pulsante generico può essere utilizzato per compiere delle azioni all'interno della stessa pagina tramite istruzioni scritte con linguaggi come javascript o vbscript.
Si utilizza il tag input indicando nell'attributo type il valore "button".
Tramite l'evento rappresentato, ad esempio, con l'attributo onclick (sul click ...) si possono far eseguire alcune istruzioni. Si rimanda all'argomento Javascript.
Esempio:
Per ottenere:



scriveremo:
<input type="button" name="esegui" value="Esegui azione" onclick="javascript:azione();" />
Torna indietro

pulsanti speciali
HTML prevede due pulsanti speciali: uno per svuotare tutti i campi del form (RESET) e uno per inviare i dati (SUBMIT) alla pagina prevista dall'attributo action del tag form.
Si utilizza il tag input indicando nell'attributo type il valore "reset" oppure "submit".
Esempio:
Per ottenere:

 

scriveremo:
<input type="reset" name="svuota" value="Svuota i campi" /> <input type="submit" name="invio" value="Invia i dati" />
Torna indietro