I form sono dei contenitori di elementi che permettono un certo grado di interattività da parte del visitatore all'interno della pagina da voi creata.
Ecco di seguito la lista di tali elementi (in ordine alfabetico):
Bottoni
Checkbox
FileUpload
Hidden
Option (menu a tendina)
Password
Radio buttons
Reset (bottone)
Select
Select multiple
Submit (bottone)
Text
Textarea
Va tenuto presente che tutti gli elementi sopra (che tratterò adesso) possono o meno essere inseriti all'interno di un blocco formato dai tag <form>...</form>. Comunque per l'utilizzo, diciamo un po' più 'professionale', è meglio metterli all'interno di tale blocco per averne una visibilità migliore.
Adesso vediamo come si creano i vari elementi elencati in precedenza:
Bottoni
<input type="button" name="bottone1" value="Cliccami">
Crea un bottone con etichetta 'Cliccami' come questo:
Come avete visto, cliccandoci sopra non succede nulla poiché non abbiamo specificato nessuna azione in particolare. Questo può essere fatto tramite una chiamata di funzione ad un metodo javascript tramite il 'solito' attributo onClick. L'attributo name identifica univocamente l'elemento.
Checkbox
<input type="Checkbox" name="spunta_1" value="elem_1">
Crea UNA casella da spuntare come la seguente:
In questo caso l'attributo name identifica il gruppo a cui appartiene la casella, mentre value identifica l'elemento. Questo serve quando si crea un form con due o più checkbox che devono essere idealmente raggruppate in un insieme.
File-upload
<input type="file" value="file_1">
Crea un box di testo e un bottone 'Sfoglia' per cercare un determinato file all'interno del disco rigido.
Vi sarà capitato di vedere sicuramente questo tipo di elemento nelle pagine web da dove è possibile mandare le mail, in quanto per selezionare gli allegati da spedire assieme al messaggio viene utilizzato proprio questo elemento.
Hidden
<input type="hidden" value="hid_1">
Sono dei dati inviati con un modulo, ma non sono mostrati nella pagina. Non esistono gestori di evento associati a questo elemento.
Option
<option value="opzione_1">
Elemento da mettere all'interno dei '<select>' o '<select multiple>'. Rappresenta una (o più) delle voci selezionabili. value rapresenta la stringa che verrà visualizzata nel menu.
Password
<input type="password" name="passw">
Crea un semplice campo di testo dove ogni carattere viene sostituito da asterischi (provate a scrivere qualcosa qui accanto per vedere cosa succede):
Radio button
<input type="radio" name="gruppo_1" value="scelta_1">
Crea un radio button come questo: .
Piccola nota: anche qui vale lo stesso discorso fatto per i checkbox riguardo a value e name. Siccome la proprietà principale dei radio-button è quello di selezionare solo un elemento per volta, usando tutti i 'name' differenti si potranno selezionare tutte le voci, mentre usando un solo 'name' per più elementi (con 'value' differenti) se ne potrà scegliere solo uno.
Tra l'altro nell'esempio a sinistra, data la natura dei radio-button, una volta selezionati due o tre elementi, non è possibile deselezionarli (altrimenti perché avrebbero inventato i checkbox?)
Reset
<input type="reset">
Crea un bottone che resetta tutti gli elemeti modificati, riportandoli alla situazione di default . Scritto come sopra ha l'etichetta di default del sistema ('Ripristina', in italiano), mentre aggiungendo l'attributo value seguito da una stringa, tale stringa viene visualizzata come etichetta.
Select
<select name="menu_1" value="scelta_1">
<option value="voce_1">Voce 1
<option value="voce_2">Voce 2
</select>
Il tag select da solo non fa nulla, ma in combinazione con gli oggetti 'option' visti in precedenza permette di creare dei menu a tendina come quello che segue:
Come vedete il 'select' normale permette di scegliere soltanto una voce per volta. Se invece volete selezionarne due o più dovete usare il...
Select multiple
<select multiple name="piu_scelta_1" value="scelta_1">
<option value="v_1">Voce 1
<option value="v_2">Voce 2
<option value="v_3">Voce 3
<option value="v_4">Voce 4
</select>
Con questo oggetto potete scegliere da una lista di elementi uno o più di essi come nell'esempio qui sotto (nota: per selezionare più di un elemento premere il tasto 'Ctrl' mentre si clicca sull'elemento desiderato oppure, se gli elementi sono uno accanto all'altro, premere e trascinare il mouse):
Crea un campo di testo per l'inserimento di stringhe da parte dell'utente come il seguente: .
Se aggiungiamo anche l'attributo value seguito da una stringa, tale stringa sarà mostrata di default nel campo di testo come di seguito:
Submit
<textarea name="txt">
Crea un campo di testo con più righe con una scrollbar per scorrere nel caso si ecceda la dimensione dell'area. Con l'aggiunta di
value si predefinisce una stringa di default, mentre con rows e cols si definiscono il numero di righe e colonne.
Tutti questi elementi sono naturalmente modificabili a piacere tramite i fogli di stile e attraverso l'uso combinato dei loro attributi per generare oggetti dalla stessa funzione ma dall'aspetto decisamente originale, come la seguente area di immissione del testo: