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
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:
