HTML - I Forms

I forms (moduli) HTML permettono di raccogliere informazioni dal visitatore del sito. Per esempio durante la registrazione dell'utente un form potrebbe permettere di raccogliere informazioni come il nome, il cognome, l' indirizzo email, ecc.

Un form prenderà come input i dati inseriti dal visitatore del sito e poi li passerà ad un'applicazione di back-end, come CGI, script ASP o script PHP, ecc che si occuperà di trattare i dati forniti secondo la logica definita all' interno dell' applicazione back-end.

All' interno di un form è possibile definire diversi elementi come i campi di testo, campi textarea, drop-down menus, radio buttons, checkbox, ecc.

Il tag HTML <form> tag viene utilizzato per creare un modulo HTML e ha seguente sintassi:

<form action="Script URL" method="GET|POST">
    form elements like input, textarea etc.
</form>

Attributi Del Form

Oltre agli attrubuti comuni, qui di seguito vi è una lista degli attributi del form utilizzati più frequentemente:

Attributo	Descrizione
action	Definisce l' indirizzo dello script back-end che elaborerà i dati.
method	Indica il metodo utilizzato per passare i dati. I più frequenti sono i metodi GET e POST.
target	Specifica la finestra in cui verrà mostrato il risultato. Può assumere valori come _blank, _self, _parent etc.
enctype	Quest' attributo specifica come il browser deve codificare i dati prima di passarli al back-end. Possibili valori possono essere: application/x-www-form-urlencoded - Questo è il valore di default utilizzato per la maggior parte dei casi. mutlipart/form-data - Viene utilizzata quando bisogna effettuare un upload nel form di files come immagini, documenti word, ecc.

Note: Puoi fare riferimento a Perl & CGI per maggiori dettagli su come vengono elaborati i dati dal back-end.

Campi di un Form HTML

Ci sono diversi tipi di campi ceh possono essere utilizzati in un form per raccogliere i dati:

Campi Text Input
Campi Checkbox
Campi Radio Box
Campi Select Box
File Select boxes
Campi nascosti (Hidden)
Bottoni
Campi di Invio dati e Reset dati

Campi Text Input

Ci sono tre tipi di campi di testo utilizzati all' interno dei form:

Campi di testo su Singola Riga - Questo campo è utilizzato per fornire la possibilità di inserire una singola riga di testo, come per un campo di ricerca o per inserire un nome. Può essere creato tramite il tag <input>.
Campi Password - Anch' esso è un campo fornito in una singola riga di testo, ma il testo digitato all' interno verrà mascherato (in genere tramite asterischi) durante la digitazione da parte dell' utente. Anche in questo caso vengono creati tramite il tag<input>.
Campi di testo su Più Righe - Viene utilizzato quando l' utente dovrà fornire dettagli che possono essere più lunghi di una singola riga. I campi multi-riga possono essere creati tramite il tag <textarea>.

Campi di Testo su Singola Riga

Questo tipo di campi è utilizzato per le informazioni che necessitano una singola riga di dati da parte dell' utente, come per i campi di ricerca o per inserire un nome. Può essere creato tramite il tag <input>.

Esempio

A seguire vi è un esempio basiliare dell' utilizzo di un campo di testo con singola riga che permette di inserire nome e cognome:

<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name:  <input type="text" name="first_name" />
<br>
Last name:  <input type="text" name="last_name" />
</form>
</body>
</html>

Produrrà il seguente risultato:

Attributi

A seguire una lista di attributi da utilizzare con i campi di testo <input>.

Attributo	Descrizione
type	Indica il tipo del campo di input e per il campo text dovrà essere impostato in text.
name	Utilizzato per dare un nome al campo per essere riconosciuto dal server a cui saranno passati i dati .
value	Può essere utilizzato per fornire un valore iniziale al campo.
size	Permette di definire la larghezza del campo in termini di caratteri.
maxlength	Permette di definire il numero massimo di caratteri consentito.

Campi Password

Sono dei campi in singola riga, ma mentre verrà digitato il testo all' interno lo camufferanno. Anch' essi sono creati usanto il tag HTML <input> ma l' attributo type dovrà essere impostato in password.

Esempio

A seguire un esempio di un campo password utilizzato per permettere ad un utente di inserire la propria password:

<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID :  <input type="text" name="user_id" />
<br>
Password:  <input type="password" name="password" />
</form>
</body>
</html>

Produrrà il seguente risultato:

Attributi

A seguire un elenco di attributi del tag <input> per creare un campo password.

Attributo	Descrizione
type	Indica il tipo del campo di input, per la password dovrà essere impostato in password.
name	Utilizzato per dare un nome al campo per essere riconosciuto dal server a cui saranno passati i dati .
value	Può essere utilizzato per fornire un valore iniziale al campo.
size	Permette di definire la larghezza del campo in termini di caratteri.
maxlength	Permette di definire il numero massimo di caratteri consentito.

Campi di Testo su Più Righe

Viene utilizzato per permettere all' utente di fornire dettagli che possono essere più lunghi di una singola riga di testo. I campi multi-riga possono essere creati tramite il tag <textarea>

Esempio

A seguire un esempio basiliare di utilizzo di un campo su più righe utilizzato per inserire la descrizione di un prodotto:

<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</form>
</body>
</html>

Produrrà il seguente risultato:

Attributi

A seguire un elenco di attributi per <textarea> tag.

Attributo	Descrizione
name	Utilizzato per dare un nome al campo per essere riconosciuto dal server a cui saranno passati i dati .
rows	Indica il numero di righe dell' area di testo.
cols	Indica il numero di colonne dell' area di testo.

Campi Checkbox

I Checkbox permetto all' utente di poter scegliere più valori. Sono creati tramite il tag HTML <input> ma l' attributo type in questo caso è impostato su checkbox.

Esempio

A seguire un esempio in cui vengono utilizzati due checkbox:

<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
</body>
</html>

Produrrà il seguente risultato:

Attributi

A seguire una lista di attributi per il campo <checkbox>.

Attributo	Descrizione
type	Indica il tipo del campo di input e per il campo checkbox dovrà essere impostato in checkbox.
name	Utilizzato per dare un nome al campo per essere riconosciuto dal server a cui saranno passati i dati .
value	Il valore da utilizzare se il campo checkbox è selezionato.
checked	Impostato su checked se vuoi che di default sia checkato.

Campi Radio

Nei campi Radio ci possono essere diverse opzioni, ma ne può essere scelta solo una fra quelle disponibili. Sono creati tramite il tag HTML <input> ma l' attributo type in questo caso è impostato su radio.

Esempio

A seguire un esempio di form con due campi radio:

<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics"> Physics
</form>
</body>
</html>

Produrrà il seguente risultato:

Attributi

A seguire un elenco di attributi per il campo radio.

Attributo	Descrizione
type	Indica il tipo del campo di input e per il campo checkbox dovrà essere impostato in radio.
name	Utilizzato per dare un nome al campo per essere riconosciuto dal server a cui saranno passati i dati .
value	Il valore da utilizzare se il campo radio è selezionato.
checked	Impostato su checked se vuoi che di default sia checkato.

Campi Select Box

Una select box, anche chiamata drop down box, fornisce una lista di opzioni disponibili in una finestrella drop down, permettendo all' utente di selezionare una o più opzioni.

Esempio

Qui di seguito vi è un esempio di form HTML con all' interno una select box

<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
</body>
</html>

Produrrà il seguente risultato:

Attributi

A seguire un elenco dei più importanti attributi del tag <select>:

Attributo	Descrizione
name	Utilizzato per dare un nome al campo per essere riconosciuto dal server a cui saranno passati i dati .
size	Indica la dimensione del campo.
multiple	Se impostato su "multiple" permetterà all' utente di poter selezionare più opzioni contemporaneamente.

A seguire una lista di alcuni importanti attributi del tag <option>:

Attributo	Descrizione
value	Il valore impostato per ogni opzione se selezionata.
selected	Indica che l'opzione dev'essere selezionata di default al caricamento della pagina.
label	Un modo alternativo per etichettare un opzione

File Upload Box

Per permettere agli utenti del tuo sito web di caricare uno o più file, potrai utilizzare un file upload box, anche conosciuto come file select box. Anch'esso può essere creato utilizzando l' elemento <input> ed impostando l' attributo type su file.

Esempio

A seguire un esempio di codice HTML contenente un form in cui è possibile caricare un file:

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
</body>
</html>

Produrrà il seguente risultato:

Attributi

A seguire un elenco degli attributi più importanti per il file upload box:

Attributo	Descrizione
name	Utilizzato per dare un nome al campo per essere riconosciuto dal server a cui saranno passati i dati .
accept	Definisce il tipo di file permessi.

Pulsanti

Ci sono diversi modi per creare pulsanti clickabili in HTML. Fra cui l' utilizzo del tag <input> impostato con l' attributo type su button. L' attributo type può assumere i seguenti valori

Type	Descrizione
submit	Crea un pulsante che invia i dati.
reset	Crea un pulsante che resimposta i dati del form al valore iniziale.
button	Crea un pulsante che richiama un script lato client.
image	Crea un pulsante in cui si può definire un immagine di sfondo.

Esempio

A seguire un esempio di codice HTML per creare un form con 3 tipi di pulsanti:

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset"  value="Reset" />
<input type="button" name="ok" value="OK"  />
<input type="image" name="imagebutton" src="/html/images/logo.png" />
</form>
</body>
</html>

Produrrà il seguente risultato:

Campi Nascosti

I campi nascosti vengono utilizzati per nascondere dati all' interno della pagina e che verranno successivamente trasmessi al server. Questo campo è nascosto nel codice e non apparirà nella pagina. Per esempio, il seguente campo nascosto verrà utilizzato per tenere traccia del numero della pagina corrente. Quando un utente clickerà sulla pagina successiva il valore del campo nascosto verrà inviato al web server che deciderà, in base al numero di pagina ricevuto, quale pagina mostrare successivamente.

Esempio

A seguire un esempio di utilizzo di campi nascosti:

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset"  value="Reset" />
</form>
</body>
</html>

Produrrà il seguente risultato: