Moduli

I moduli sono uno strumento fondamentale per raccogliere l'input degli utenti e inviarlo a un server per l'elaborazione. Sono composti da diversi elementi di modulo che permettono agli utenti di inserire dati. Tuttavia, in questo corso non invieremo alcun dato a un server, poiché ciò richiede conoscenze aggiuntive che vanno oltre l'ambito di questo corso.

Tutti gli esempi nel codice hanno l'attributo onsubmit="return false". Questo attributo impedisce al modulo di inviare una richiesta al server per impostazione predefinita.

Creazione di moduli

Il tag <form> viene utilizzato per creare un modulo interattivo in una pagina web. Contiene vari elementi di modulo per l'inserimento dei dati da parte dell'utente.
Esempio:

<form>
  <!-- Form elements go here -->
</form>

Elementi del modulo

HTML offre diversi tipi di input per raccogliere i dati degli utenti. Ognuno ha attributi e comportamenti specifici. È inoltre possibile specificare l'etichetta per ciascun input. Le etichette vengono utilizzate per associare il testo agli elementi di input del modulo, offrendo un'esperienza più accessibile e intuitiva. Approfondiremo etichette e input nei prossimi capitoli.
Esempio:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
</form>

Invio del modulo

L'invio del modulo viene attivato da un pulsante di invio (<button type="submit">), che può inviare i dati del modulo al server per l'elaborazione.
Esempio:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
  <button type="submit">Submit</button>
</form>

Ecco un esempio di modulo di base.

Video tutorial