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:

AttributoDescrizione
actionDefinisce l' indirizzo dello script back-end che elaborerà i dati.
methodIndica il metodo utilizzato per passare i dati. I più frequenti sono i metodi GET e POST.
targetSpecifica 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:

First name:
Last name:

Attributi

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

AttributoDescrizione
typeIndica il tipo del campo di input e per il campo text dovrà essere impostato in text.
nameUtilizzato per dare un nome al campo per essere riconosciuto dal server a cui saranno passati i dati .
valuePuò essere utilizzato per fornire un valore iniziale al campo.
sizePermette di definire la larghezza del campo in termini di caratteri.
maxlengthPermette 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:

User ID :  
Password:

Attributi

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

AttributoDescrizione
typeIndica il tipo del campo di input, per la password dovrà essere impostato in password.
nameUtilizzato per dare un nome al campo per essere riconosciuto dal server a cui saranno passati i dati .
valuePuò essere utilizzato per fornire un valore iniziale al campo.
sizePermette di definire la larghezza del campo in termini di caratteri.
maxlengthPermette 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:

Description :

Attributi

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

AttributoDescrizione
nameUtilizzato per dare un nome al campo per essere riconosciuto dal server a cui saranno passati i dati .
rowsIndica il numero di righe dell' area di testo.
colsIndica 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:

Maths Physics

Attributi

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

AttributoDescrizione
typeIndica il tipo del campo di input e per il campo checkbox dovrà essere impostato in checkbox.
nameUtilizzato per dare un nome al campo per essere riconosciuto dal server a cui saranno passati i dati .
valueIl valore da utilizzare se il campo checkbox è selezionato.
checkedImpostato 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:

Maths Physics

Attributi

A seguire un elenco di attributi per il campo radio.

AttributoDescrizione
typeIndica il tipo del campo di input e per il campo checkbox dovrà essere impostato in radio.
nameUtilizzato per dare un nome al campo per essere riconosciuto dal server a cui saranno passati i dati .
valueIl valore da utilizzare se il campo radio è selezionato.
checkedImpostato 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>:

AttributoDescrizione
nameUtilizzato per dare un nome al campo per essere riconosciuto dal server a cui saranno passati i dati .
sizeIndica la dimensione del campo.
multipleSe impostato su "multiple" permetterà all' utente di poter selezionare più opzioni contemporaneamente.

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

AttributoDescrizione
valueIl valore impostato per ogni opzione se selezionata.
selectedIndica che l'opzione dev'essere selezionata di default al caricamento della pagina.
labelUn 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:

AttributoDescrizione
nameUtilizzato per dare un nome al campo per essere riconosciuto dal server a cui saranno passati i dati .
acceptDefinisce 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

TypeDescrizione
submitCrea un pulsante che invia i dati.
resetCrea un pulsante che resimposta i dati del form al valore iniziale.
buttonCrea un pulsante che richiama un script lato client.
imageCrea 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:

This is page 10

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements