I form (o moduli) HTML ti consentono di comunicare in modo semplice e diretto con i visitatori e le visitatrici del tuo sito. Usando vari elementi e attributi puoi adattare i moduli alle tue esigenze.

Cos’è un modulo HTML?

I form HTML sono moduli interattivi attraverso i quali i visitatori e le visitatrici del tuo sito web possono inviarti dati. I dati inseriti vengono inviati al relativo server web per l’elaborazione. Per integrare questa forma di interazione nei tuoi documenti HTML hai bisogno del tag HTML <form>. Questo tag HTML può essere adattato a seconda dello scopo di utilizzo mediante diversi elementi e attributi. Si possono usare vari tipi di input come testo, numeri, e-mail, password, pulsanti e caselle di controllo.

Se dal tuo sito web acquisisci informazioni personali attraverso un modulo HTML, devi indicarlo esplicitamente nella tua informativa sulla privacy e assicurare che i dati siano trasmessi con una crittografia SSL/TLS.

Web Hosting
Diventa il n°1 della rete con il provider di hosting n°1 in Europa
  • Disponibilità garantita al 99,99%
  • Dominio, SSL ed e-mail inclusi
  • Assistenza 24/7 in lingua italiana

Per cosa si usa l’elemento <form>?

Il tag form in HTML ti offre tantissime opzioni di input, puoi pertanto usarlo per svariati scopi, ad esempio:

  • Moduli di contatto per richieste o ordini
  • Moduli di iscrizione per un account o a una newsletter
  • Funzioni di feedback
  • Sondaggi
  • Moduli per ticket di assistenza e di supporto
  • Dati di accesso ad aree riservate del sito

In teoria, con un modulo HTML è possibile gestire pressoché qualsiasi forma di interazione tra i visitatori o le visitatrici e un sito internet.

La sintassi di <form> in HTML

I moduli HTML iniziano con un tag <form> HTML di apertura e finiscono con un tag </form> di chiusura. All’interno dei due tag possono essere inseriti vari altri elementi e attributi, che ti presentiamo più avanti in questo articolo. La sintassi generale dei moduli si presenta come segue:

<form> Elementi </form>
html

Quali sono gli elementi disponibili per un modulo HTML?

Ci sono vari elementi HTML che ti consentono di adattare un modulo HTML alle tue esigenze. Te li presentiamo brevemente nella tabella che segue:

Elemento HTML Descrizione
<button> Un semplice pulsante cliccabile
<datalist> Le opzioni per l’elemento <input> sotto forma di elenco a discesa
<fieldset> Raggruppa dati correlati
<input> Raccolta di dati; modificata dall’attributo type
<label> HTML label crea una didascalia visibile
<legend> Nome o titolo del tag <fieldset>
<optgroup> Raggruppa elementi <option> all’interno di <select>
<option> Indica la possibilità di selezione per <datalist> o <select>
<output> Indica il risultato di un calcolo o di uno script
<select> Crea un elenco a discesa
<textarea> Definisce un campo di testo con più righe

Gli attributi più importanti per i form HTML

Esistono molti attributi HTML per aggiungere funzioni a un modulo. Tra gli attributi più importanti troviamo:

  • action: indica l’URL a cui inviare i dati del modulo
  • autocomplete: segnala al browser se un campo di input deve essere compilato automaticamente
  • enctype: determina come vengono codificati i dati indirizzati al server
  • method: definisce se i dati devono essere inviati con il metodo GET o POST
  • target: definisce dove deve essere aperto un documento collegato
  • name: assegna al modulo un nome utilizzabile in JavaScript per accedere al modulo
  • accept-charset: determina la codifica dei caratteri da usare per inviare i dati del modulo.

Form HTML: esempi

Di seguito ti mostriamo nel dettaglio come funzionano i form HTML servendoci di due esempi. Per prima cosa creiamo un modulo semplice in cui i visitatori e le visitatrici possono inserire nome e cognome e inviare i dati. Il codice si presenta come segue:

<!DOCTYPE html>
<html>
<body>
<h2>Esempio di modulo HTML</h2>
<form action="/action_page.php">
<label for="nome">Nome:</label><br>
<input type="text" id="nome" name="nome" value="Pietro"><br>
<label for="cognome">Cognome:</label><br>
<input type="text" id="cognome" name="cognome" value="Rossi"><br><br>
<input type="submit" value="Invia">
</form> 
<p>Facendo clic su "Invia" i dati vengono trasmessi a una pagina chiamata "/action_page.php".</p>
</body>
</html>
html

Nel sito web, il modulo adatto al codice si presenta come segue:

Immagine: Un esempio semplice di modulo HTML
Tramite i campi di input, nel modulo di esempio gli utenti possono inserire nome e cognome prima di trasmettere questi dati alla pagina prevista con “Invia”.

In un altro esempio di form HTML utilizziamo i tag <select>, <option> e <optgroup> per creare un campo modulo in cui gli utenti possono selezionare diverse città da un elenco a discesa:

<!DOCTYPE html>
<html>
<head>
<title>Esempio di modulo HTML</title>
</head>
<body>
<label for="città">Città:</label>
<select id="città">
<optgroup label="Italia">
<option value="roma">Roma</option>
<option value="milano">Milano</option>
</optgroup>
<optgroup label="Francia">
<option value="parigi">Parigi</option>
<option value="marsiglia">Marsiglia</option>
</optgroup>
<optgroup label="Inghilterra">
<option value="londra">Londra</option>
</optgroup>
</select>
</body>
</html>
html
Acquista e registra il tuo dominio con il provider n°1 in Europa
  • Domain Connect gratuito per una configurazione facile del DNS
  • Certificato SSL Wildcard gratuito
  • Protezione privacy inclusa
Hai trovato questo articolo utile?
Vai al menu principale