You are on page 1of 5

pg 1/5

Passaggio di parametri al server con i form HTML

Introduzione
Spesso la pagina HTML richiesta dal client consente all'utente di inviare dei dati al server, per
l'elaborazione. Un modo molto semplice per comunicare questi dati è l'utilizzo di moduli (form)
HTML. La comunicazione tra client e server avviene utilizzando il protocollo http, che studieremo
in maniera approfondita in seguito.
L’invio dei dati è solitamente organizzato in due parti:
• una pagina principale contiene i vari campi dei form, che consentono all’utente di immettere
dei dati;
• una pagina secondaria, che viene richiamata dalla principale e che effettua "il lavoro" vero e
proprio di processare e raccogliere i dati. Di norma si tratta di una pagina di programmazione
che si trova sul server. Può essere una pagina asp, php, jsp o altro.

Form HTML
Un form può essere inserito in una pagina HTML mediante il tag doppio FORM.

<form> campi del modulo </form>

• Attributi del tag form:


– name
– action
– method
– target

L'attributo name identifica il modulo.


L'attributo action specifica l'URL del programma che elaborerà i dati sul server.
L'attributo method specifica il modo in cui i dati presenti nel form verranno passati al server. I
valori possibili sono due:
– GET,
– POST.
In seguito vedremo come si utilizzano.
L'attributo target specifica il nome del frame in cui sarà visualizzata la risposta inviata dal server.
Se si vuole visualizzare la risposta in una nuova pagina, è sufficiente specificare come valore
dell'attributo "_blank". Per default, la pagina di risposta sostituisce quella con il form.

Campi del Form


L'inserimento di campi nel form avviene mediante il tag singolo INPUT.

<form>
campo 1: <input/>
campo 2: <input/>
...............
</form>

Docente: Bocchi Cinzia


Ultimo aggiornamento: 31/01/2009
pg 2/5

Attributi del tag input:


– name
– value
– type

L'attributo name identifica il campo.


L'attributo value indica il valore contenuto nel campo.
L'attributo type indica il tipo di campo (casella di testo, pulsante, ecc.).

Caselle
Le caselle si distinguono in:
– caselle di testo - il valore di type è "text";
– caselle di password - il valore di type è "password";
– caselle nascoste - il valore di type è "hidden". Le caselle nascoste sono utilizzate dal
programmatore per inviare dati aggiuntivi al server.

Nel caso di caselle, il tag input ha due attributi aggiuntivi:


– size, che permette di specificare la dimensione massima della casella, in caratteri;
– maxlenght, che permette di indicare il numero massimo di caratteri che l'utente può inserire.

Esempio 8.1: un form con caselle


<html>
<head>
<title> Esempio 8.1 Form con caselle </title>
</head>
<body>
<form>
casella di testo:
<input type="text" name="uid" value="inserire il nome"/>
<br/>
casella di password:
<input type="password" name="pwd" size="10"
maxlenght="10"/>
<br/>
casella nascosta:
<input type="hidden" name="nascosta"/>
</form>
</body>
</html>

Il codice dell'esempio crea la seguente pagina:

Docente: Bocchi Cinzia


Ultimo aggiornamento: 31/01/2009
pg 3/5

Le caselle di testo possono anche essere di sola lettura o disabilitate.


In una casella di sola lettura non è possibile scrivere testo. Se si vuole rendere una casella di sola
lettura, basta aggiungere come parametro readonly (senza specificare alcun valore).
Una casella disabilitata è simile ad una casella di sola lettura, ma il suo contenuto appare in grigetto.
Se si vuole rendere una casella disabilitata, basta aggiungere come parametro disabled (senza
specificare alcun valore).

Pulsanti
I pulsanti si distinguono in:
– pulsanti generici - il valore di type è "button";
– pulsanti di invio - il valore di type è "submit";
– pulsanti di annullamento - il valore di type è "reset";
– pulsanti immagine - il valore di type è "image".

I pulsanti di invio permettono di inviare i dati del form al server.


I pulsanti di annullamento, se premuti, cancellano tutti i dati del form, riportandolo allo stato
originario.
I pulsanti generici non svolgono un'azione particolare, ma possono essere utilizzati per gestire
eventi con un linguaggio di programmazione client side (come JavaScript).
I pulsanti immagine sono analoghi ai pulsanti di invio, ma permettono di utilizzare come pulsante
una immagine.

Nota: l'attributo value è utilizzato per impostare l'etichetta del pulsante.

Esempio 8.2: un form con pulsanti


<html>
<head>
<title> Esempio 8.2 Form con pulsanti </title>
</head>
<body>
<form>
pulsante di invio:
<input type="submit" value="Invia"/> <br/>
pulsante di annullamento:
<input type="reset" value="Cancella"/> <br/>
pulsante generico:
<input type="button" value="Ok"/>
</form>

Docente: Bocchi Cinzia


Ultimo aggiornamento: 31/01/2009
pg 4/5

</body>
</html>

Il codice dell'esempio crea la seguente pagina:

Esempio 8.3: un form con pulsante immagine


<html>
<head>
<title> Esempio 8.3 Form con pulsante immagine </title>
</head>
<body>
<form>
<input type="image" src="Gomma.gif" width="78"
height="38"/>
</form>
</body>
</html>

Il codice dell'esempio crea la seguente pagina:

Nota: gli attributi di input sono, in questo caso, molto simili a quelli del tag img.

La versione 4 di HTML consente di creare pulsanti più complessi, mediante l'uso del tag doppio
BUTTON.

<button type="tipo pulsante"> etichetta del pulsante </button>

Docente: Bocchi Cinzia


Ultimo aggiornamento: 31/01/2009
pg 5/5

La possibilità di inserire il testo del pulsante tra l’apertura e la chiusura del tag medesimo ci
consente di specificare anche del codice HTML all’interno del tag ed eventualmente associare al
pulsante un'immagine.

Esempio 8.4: un form con pulsante complesso


<html>
<head>
<title> Esempio 8.4 Form con pulsante complesso </title>
</head>
<body>
<form>
<button type="reset">
<img src="Gomma.gif" width="75" height="67"
border="1" vspace="5" align="middle"/>
</button>
</form>
</body>
</html>

Il codice dell'esempio crea la seguente pagina:

Anche i pulsanti possono essere disabilitati mediante l'attributo disable.

Docente: Bocchi Cinzia


Ultimo aggiornamento: 31/01/2009