I form (o moduli) HTML ti con­sen­to­no di co­mu­ni­ca­re in modo semplice e diretto con i vi­si­ta­to­ri e le vi­si­ta­tri­ci del tuo sito. Usando vari elementi e attributi puoi adattare i moduli alle tue esigenze.

Cos’è un modulo HTML?

I form HTML sono moduli in­te­rat­ti­vi at­tra­ver­so i quali i vi­si­ta­to­ri e le vi­si­ta­tri­ci del tuo sito web possono inviarti dati. I dati inseriti vengono inviati al relativo server web per l’ela­bo­ra­zio­ne. Per integrare questa forma di in­te­ra­zio­ne 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 ac­qui­si­sci in­for­ma­zio­ni personali at­tra­ver­so un modulo HTML, devi indicarlo espli­ci­ta­men­te nella tua in­for­ma­ti­va sulla privacy e as­si­cu­ra­re che i dati siano trasmessi con una crit­to­gra­fia SSL/TLS.

Web Hosting
Diventa il n°1 della rete con il provider di hosting n°1 in Europa
  • Di­spo­ni­bi­li­tà garantita al 99,99%
  • Dominio, SSL ed e-mail inclusi
  • As­si­sten­za 24/7 in lingua italiana

Per cosa si usa l’elemento <form>?

Il tag form in HTML ti offre tan­tis­si­me opzioni di input, puoi pertanto usarlo per svariati scopi, ad esempio:

  • Moduli di contatto per richieste o ordini
  • Moduli di iscri­zio­ne per un account o a una new­slet­ter
  • Funzioni di feedback
  • Sondaggi
  • Moduli per ticket di as­si­sten­za e di supporto
  • Dati di accesso ad aree riservate del sito

In teoria, con un modulo HTML è possibile gestire pressoché qualsiasi forma di in­te­ra­zio­ne tra i vi­si­ta­to­ri o le vi­si­ta­tri­ci 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 pre­sen­tia­mo più avanti in questo articolo. La sintassi generale dei moduli si presenta come segue:

<form> Elementi </form>
html

Quali sono gli elementi di­spo­ni­bi­li per un modulo HTML?

Ci sono vari elementi HTML che ti con­sen­to­no di adattare un modulo HTML alle tue esigenze. Te li pre­sen­tia­mo bre­ve­men­te nella tabella che segue:

Elemento HTML De­scri­zio­ne
<button> Un semplice pulsante clic­ca­bi­le
<datalist> Le opzioni per l’elemento <input> sotto forma di elenco a discesa
<fieldset> Raggruppa dati correlati
<input> Raccolta di dati; mo­di­fi­ca­ta dall’attributo type
<label> HTML label crea una di­da­sca­lia visibile
<legend> Nome o titolo del tag <fieldset>
<optgroup> Raggruppa elementi <option> all’interno di <select>
<option> Indica la pos­si­bi­li­tà 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ù im­por­tan­ti per i form HTML

Esistono molti attributi HTML per ag­giun­ge­re funzioni a un modulo. Tra gli attributi più im­por­tan­ti troviamo:

  • action: indica l’URL a cui inviare i dati del modulo
  • autocomplete: segnala al browser se un campo di input deve essere compilato au­to­ma­ti­ca­men­te
  • enctype: determina come vengono co­di­fi­ca­ti i dati in­di­riz­za­ti 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 uti­liz­za­bi­le in Ja­va­Script 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 fun­zio­na­no i form HTML ser­ven­do­ci di due esempi. Per prima cosa creiamo un modulo semplice in cui i vi­si­ta­to­ri e le vi­si­ta­tri­ci 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 tra­smet­te­re questi dati alla pagina prevista con “Invia”.

In un altro esempio di form HTML uti­liz­zia­mo i tag <select>, <option> e <optgroup> per creare un campo modulo in cui gli utenti possono se­le­zio­na­re 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 con­fi­gu­ra­zio­ne facile del DNS
  • Cer­ti­fi­ca­to SSL Wildcard gratuito
  • Pro­te­zio­ne privacy inclusa
Vai al menu prin­ci­pa­le