L'elemento HTML <form> è un elemento fondamentale per creare moduli interattivi su una pagina web. Serve come contenitore per tutti gli elementi del modulo. Esploriamo un esempio di un modulo di base:

Nota

Tutti gli esempi includono l'attributo onsubmit="return false" per prevenire il comportamento predefinito di invio del modulo. In questo modo, l'attenzione rimane sulla comprensione della creazione dei moduli e degli attributi.

Spiegazione degli attributi del form:

• name fornisce un identificatore distinto per il modulo su una pagina web. Sia il server che il client utilizzano questo identificatore per elaborare i dati del modulo. Il nome del modulo può includere numeri, underscore, trattini e caratteri dell'alfabeto inglese, ma non deve contenere spazi;

• autocomplete determina se i browser web possono compilare automaticamente i campi del modulo. Può essere impostato su "on" o "off" e applicato a singoli elementi del modulo;

• novalidate specifica che i browser non devono eseguire la convalida dei campi del modulo. Questo può essere utile quando si desidera gestire la convalida manualmente utilizzando JavaScript;

• method specifica il metodo HTTP utilizzato per inviare i dati del modulo al server. I due metodi più comuni sono GET e POST. Questo argomento sarà trattato in dettaglio nel corso di JavaScript.

Panoramica degli Elementi Figli all'interno di un Modulo

All'interno dell'elemento form, troverai vari elementi figli essenziali per la funzionalità del modulo. L'elemento input consente agli utenti di inserire diversi tipi di dati, come testo, numeri e date. In questo esempio, il type="email" è utilizzato per il campo email e type="password" per il campo password. L'elemento label organizza e struttura il modulo, fornendo testo descrittivo per i campi di input e aiutando gli utenti a comprendere i loro scopi. L'elemento button con type="submit" è utilizzato per inviare i dati del modulo al server quando viene cliccato. Per impostazione predefinita, l'invio del modulo ricarica la pagina web, ma questo comportamento può essere personalizzato utilizzando JavaScript.