Definizione

Il tag <form> definisce un modulo per l’inserzione dei dati da parte dell’utente nel quale inserire i vari campi da compilare.
Il tag form può contenere campi di testo semplice, per password (quando si scrive vengono visualizzati solo asterischi o punti), per il caricamento di files, opzioni a scelta multipla e altro.

Il tag form

Un form non ha molti utilizzi nel semplice html ma diventa fondamentale quando si vuole far interagire un utente con un’applicazione che si trova sul server, i dati inviati da un form devono infatti essere gestiti da uno script per essere utilizzati.

In questo articolo presenterò le varie caratteristiche del tag form con esempi sulla creazione di un modulo di inserzione, l’interazione con un’applicazione server side e l’utilizzo di CSS e Javascript in un form.
Potete scaricare questo file zip con gli esempi utilizzati nell’articolo.

Attenzione:
Con il metodo GET possono essere inviati solo caratteri di tipo ASCII per un limite massimo di 100 caratteri, non si possono quindi inviare files con il metodo get ad esempio.
Alcuni browser non sono in grado di salvare nei segnalibri le pagine alle quali si accede con dei parametri inviati con il metodo POST, se ad esempio il vostro sito cambia lingua a seconda di un parametro inviato alla pagina meglio inviare questo parametro con il metodo GET (es. www.vostrosito.it/index.php?lingua=it)

Creare un link ad una pagina con dei paremetri di tipo get equivale ad arrivare alla stessa pagina da un form precompilato.
I parametri di tipo get vengono aggiunti nell’indirizzo dopo il nome della pagina separati dal nome della pagina da un punto interrogativo e separati tra di loro da un ampersand (e commerciale, & o il suo rispettivo codice html di escape “&amp;”)
ad esempio:
www.sito.it/pagina.php?nomeparametro=valore&altroparametro=valore2&nome=pippo

In php questi dati sono accessibili tramite gli array globali $_POST e $_GET e potete fare una prova salvando questo script in un file form.php

<div>
<h2>Form con get</h2>
<form action="form.php" method="get">
<input name="testo" value="del testo" />

<textarea name="altrotesto"></textarea>
<select name="select">
		<option value="1">Uno</option>
		<option value="2">Due</option>
		<option value="3">Tre</option>
	</select>
<input name="invio" type="submit" value="ok" />
</form></div>
<div>
<h2>Form con post</h2>
<form action="form.php" method="post">
<input name="testo" value="del testo" />

<textarea name="altrotesto"></textarea>
<select name="select">
		<option value="1">Uno</option>
		<option value="2">Due</option>
		<option value="3">Tre</option>
	</select>
<input name="invio" type="submit" value="ok" />
</form></div>
<div>
<h2>Dati inviati con get</h2>
<textarea cols="40" rows="10"><?php
print_r($_GET);
?>
</textarea></div>
<div>
<h2>Dati inviati con post</h2>
<textarea cols="40" rows="10"><?php
print_r($_POST);
?>
</textarea></div>

Attributi standard

id, class, title, style, dir, lang, xml:lang

Attributi specifici

Obbligatori:

• action: la URL della pagina verso la quale inviare i dati. I dati del form vengono inviati a questa pagina, se il campo viene lasciato vuoto i dati vengono inviati alla stessa pagina che contiene il form.

• accept: Una lista dei tipi di mime accettati quando si invia un file, questo attributo non è largamente supportato ed è meglio fare il controllo serverside (per saperne di più).
• accept-charset: Una lista dei tipi di carattere accettati nella pagina separati da virgola, se non viene impostato il tipo di carattere viene gestito come sconosciuto.
• enctype: Il tipo di mime utilizzato per codificare i dati inviati con il form.
  Possibili valori:
  • application/x-www-form-urlencoded: Impostazioni predefinite, tutti i caratteri sono codificati prima di essere inviati.
  • multipart/form-data: i caratteri non vengono codificati ma inviati come come un documento MIME. Questo parametro è richiesto quando si vogliono spedire dei file insieme al form.
  • text/plain: gli spazi vengono convertiti in + senza una speciale codifica.
• method: Il metodo http in cui inviare i dati, può essere get o post come visto sopra.
• name: Il nome del form che deve essere univoco per la pagina.
  Questo parametro viene utilizzato soprattutto quando si vuole accedere ai campi di un form tramite javascript, ad esempio per effettuare dei controlli sulla corretta compilazione del form prima di inviare i dati.
  Faccio presente che non si può fare affidamento sul javascript per i controlli da effettuare sui dati di un form dato che questo viene eseguito sul client ma risulta sempre utile per facilitare la navigazione del sito.
  Questo attributo non è utilizzabile con un DTD di tipo strict.
• target: Dove (in quale finestra o frame) aprire la pagina impostata nell’action. Il funzionamento è identico al target del tag &lt;a&gt;.
  Questo attributo non è utilizzabile con un DTD di tipo strict.

Eventi applicabili

onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Esempio con CSS e Javascript

Ecco un piccolo esempio di utilizzo di CSS e Javascript in un form.

Vedi i commenti al codice per la spiegazione.

<div>
<script type="text/javascript">
	//funzione per aggiungere un valore alla select
	function esempioFormAggiungiOpzione(){
		// Estraggo i valori dai campi di testo
		var t1 = document.ilmioform.testo1.value;
		var t2 = document.ilmioform.testo2.value;
		if(t1=='' || t2 == '')
			// Se almeno uno è vuoto visualizzo un messaggio
			alert("Inserisci entrambi i valori.\nValori inseriti: "+t1+", "+t2);
		else{
			// Se compilati entrambi aggiungo il valore
			var s = document.ilmioform.es_select;
			// Options è un array, inserisco il nuovo valore come ultimo
			// l'ultimo parametro "true" seleziona la nuova opzione appena inserita
			s.options[s.length] = new Option(t2, t1, true);
		}
		}
</script>

<!-- onsubmit="return false;" annulla l'invio del form -->
<form onsubmit="return false;>
	<!-- questo form è un esempio e non è collegato a nessuna pagina -->

Valore value

	<!-- input con css per colorare il bordo -->
<input style="border:2px #00f dashed; font-weight:bold;" name="testo1" />

Testo dell' opzione
<input style="border:2px #00f dashed; font-weight:bold;" name="testo2" />

	<!-- premendo questo bottone viene eseguita la funzione javascript qua sopra -->

<button onclick="esempioFormAggiungiOpzione();">Aggiungi opzione</button>

	<!-- premendo questi bottoni vengono selezionate le prime 3 opzioni del form -->

<button onclick="document.ilmioform.es_select.options[0].selected = true;">seleziona 1</button>

<button onclick="document.ilmioform.es_select.options[1].selected = true;">seleziona 2</button>

<button onclick="document.ilmioform.es_select.options[2].selected = true;">seleziona 3</button>
<select name="es_select">
		<option value="1">Uno</option>
		<option value="2">Due</option>
		<option value="3">Tre</option>
	</select>

	<!-- questo bottone non funziona perchè catturo l'evento di invio del form -->
<input name="invio" type="submit" value="Invio (scollegato)" />
</form></div>

<script type="text/javascript">
function formSubmit(){
if(document.ilform.nome.value != "" &&
   document.ilform.cognome.value)
   return true;
else {
alert("Devi compilare tutti i campi");
return false;
}
}
</script>
<form method="post" name="ilform" onsubmit="return formSubmit();">
<input name="nome" type="text" value="nome" />
<input name="cognome" type="text" value="cognome" />
<input name="invia" type="submit" value="ok" />
</form>