Tag HTML <form>
Il tag <form> crea un modulo web. Raggruppa input, textarea e altri controlli e li invia tramite gli attributi action e method.
Il tag <form> viene utilizzato per aggiungere moduli HTML alla pagina web per l'input dell'utente. I moduli servono a trasmettere al server i dati inseriti dall'utente. I dati vengono inviati premendo il pulsante "Submit". Se non è presente tale pulsante, le informazioni vengono inviate alla pressione del tasto "Enter".
Sintassi
Il tag <form> va in coppia. Il contenuto viene scritto tra i tag di apertura (<form>) e di chiusura (</form>).
L'elemento <form> contiene altri tag HTML che definiscono il metodo di inserimento dei dati:
- Il tag
<input>definisce un campo di input per l'utente. - Il tag
<textarea>definisce un campo del modulo per creare un'area di input multiriga. - Il tag
<button>viene utilizzato per inserire un pulsante all'interno di un modulo. - Il tag
<select>imposta un controllo per creare un elenco a discesa. - Il tag
<option>definisce gli elementi dell'elenco a discesa impostato dal tag<select>. - Il tag
<optgroup>raggruppa i dati correlati nell'elenco a discesa impostato dal tag<select>. - Il tag
<fieldset>raggruppa visivamente gli elementi all'interno del modulo impostato dal tag<form>. - Il tag
<label>imposta l'etichetta di testo per l'elemento<input>. - Il tag
<legend>definisce l'intestazione per l'elemento<fieldset>.
Esempio del tag HTML <form>:
Esempio del tag HTML <form>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="FirstName" id="fname" value="Mary"/><br /><br />
<label for="lname">Surname</label>
<input type="text" name="LastName" id="lname" value="Thomson"/><br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Risultato
Esempio del tag HTML <form> con i tag <input> e <label>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="Name" id="fname" value="Mary"/><br /><br />
<label for="number">Phone</label>
<input type="number" name="Phone" id="number"/><br /><br />
<label for="email">Email</label>
<input type="email" placeholder="Enter Email" name="email" required /> <br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Esempio del tag HTML <form> con il tag <textarea>:
L'attributo for del tag <label> è collegato all'id del <textarea> in modo che, facendo clic sull'etichetta, il campo riceva il focus e i lettori di schermo lo annuncino correttamente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Form example</h1>
<form action="/form/submit" method="POST" >
<label for="message">Message</label><br />
<textarea id="message" name="message" rows="3" cols="30" placeholder="Type some text here"></textarea><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>GET vs POST: quale metodo utilizzare
L'attributo method controlla il modo in cui il browser invia i dati del modulo. I due valori si comportano in modo molto diverso:
method="get" aggiunge i dati del modulo all'URL dell'action come stringa di query (?name=value&name=value). Usalo quando:
- L'invio si limita a leggere o filtrare i dati (moduli di ricerca, filtri).
- Vuoi che il risultato sia aggiungibile ai preferiti o condivisibile — i dati sono visibili nell'URL.
Poiché i dati si trovano nell'URL, GET ha limitazioni reali: la lunghezza dell'URL è limitata dai browser e dai server, i valori sono visibili nella barra degli indirizzi e nei log del server, e non deve mai contenere password o altri dati sensibili.
method="post" invia i dati del modulo nel corpo della richiesta HTTP, non nell'URL. Usalo quando:
- L'invio modifica qualcosa sul server (creazione di un account, pubblicazione di un commento, effettuazione di un pagamento).
- Si inviano grandi quantità di dati o file (POST non ha un limite di dimensione pratico ed è richiesto per il caricamento di file).
- I dati sono sensibili e non devono comparire nell'URL.
Gli invii POST non sono aggiungibili ai preferiti e il ricaricamento della pagina dei risultati in genere ripete la richiesta. Per saperne di più, leggi i metodi HTTP.
Caricamento di file
Per consentire agli utenti di caricare file, il modulo deve utilizzare method="post" insieme a enctype="multipart/form-data" e includere un <input type="file">. La codifica predefinita application/x-www-form-urlencoded non può trasportare dati binari dei file, pertanto il caricamento non funzionerà senza di essa.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="avatar">Choose a profile picture:</label><br />
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" /><br /><br />
<input type="submit" value="Upload" />
</form>
</body>
</html>Nota che l'attributo accept (l'elenco dei tipi di file consentiti) appartiene all'elemento <input type="file">, non al tag <form>.
Ignorare la validazione con novalidate
Per impostazione predefinita, i browser convalidano i vincoli come required, type="email" o pattern prima di inviare il modulo. Aggiungere l'attributo boolean novalidate al tag <form> indica al browser di ignorare quella validazione integrata e di inviare comunque — utile, ad esempio, quando si gestisce la validazione con JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post" novalidate>
<label for="email">Email</label>
<input type="email" id="email" name="email" required /><br /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| accept-charset | character_set | Specifica le codifiche dei caratteri che il server accetta per i dati del modulo inviati. |
| action | URL | L'URL a cui vengono inviati i dati del modulo per l'elaborazione — in genere un endpoint API o una route del server. Omettilo (o impostalo su una stringa vuota) per inviare alla stessa pagina che contiene il modulo. |
| autocomplete | on / off | Abilita o disabilita il completamento automatico dei campi del modulo da parte del browser. Il valore predefinito è on. |
| enctype | application/x-www-form-urlencoded / multipart/form-data / text/plain | Determina come i dati del modulo vengono codificati prima dell'invio. Il valore predefinito è application/x-www-form-urlencoded. Usa multipart/form-data quando il modulo contiene un caricamento di file. Si applica solo quando method è post. |
| method | get / post | Specifica il metodo HTTP utilizzato per inviare il modulo. Il valore predefinito è get. Vedi GET vs POST di seguito. |
| name | text | Definisce il nome del modulo, utilizzato per fare riferimento al modulo negli script. |
| novalidate | novalidate | Se presente, il browser non convalida i campi del modulo prima dell'invio. |
| target | _blank / _self / _parent / _top / framename | Determina dove visualizzare la risposta ricevuta dopo l'invio del modulo. |
Il tag <form> supporta anche gli Attributi Globali e gli Attributi Evento.