Esercizi Moduli <form> HTML

Ecco degli esercizi semplici con soluzione per praticare le basi sulla creazione di moduli in HTML utilizzando il tag <form> ed i diversi <input> a disposizione.

Esercizio 1

Crea un form che contenga un campo di testo per il nome e un pulsante di invio.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <form>
      <label for="name">Nome:</label>
      <input type="text" id="name" name="name" />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 2

Aggiungi una casella di controllo per l'accettazione dei termini e condizioni.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <form>
      <label for="name">Nome:</label>
      <input type="text" id="name" name="name" />
      <input type="checkbox" id="terms" name="terms" />
      <label for="terms">Accetto i termini e le condizioni</label>
      <br />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 3

Aggiungi un menu a tendina per la selezione del paese di residenza.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <form>
      <label for="name">Nome:</label>
      <input type="text" id="name" name="name" />
      <select id="country" name="country">
        <option value="italy">Italia</option>
        <option value="france">Francia</option>
        <option value="germany">Germania</option>
      </select>
      <br />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 4

Aggiungi un campo di testo multilinea per l'inserimento di un commento.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <form>
      <label for="name">Nome:</label>
      <input type="text" id="name" name="name" />
      <br />
      <label for="comment">Commento:</label>
      <textarea id="comment" name="comment"></textarea>
      <br />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 5

Aggiungi pulsanti radio per la scelta del genere.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <form>
      <label for="name">Nome:</label>
      <input type="text" id="name" name="name" />
      <br />
      <input type="radio" id="male" name="gender" value="male" />
      <label for="male">Maschio</label>
      <br />
      <input type="radio" id="female" name="gender" value="female" />
      <label for="female">Femmina</label>
      <br />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 6

Aggiungi caselle di controllo multiple per la selezione degli interessi.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <form>
      <label for="name">Nome:</label>
      <input type="text" id="name" name="name" />
      <br />
      <input type="checkbox" id="interest1" name="interest1" value="sport" />
      <label for="interest1">Sport</label>
      <br />
      <input type="checkbox" id="interest2" name="interest2" value="music" />
      <label for="interest2">Musica</label>
      <br />
      <input type="checkbox" id="interest3" name="interest3" value="reading" />
      <label for="interest3">Lettura</label>
      <br />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 7

Aggiungi un campo di testo nascosto per l'invio di dati predefiniti.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <form>
      <label for="name">Nome:</label>
      <input type="text" id="name" name="name" />
      <br />
      <input
        type="hidden"
        id="hiddenField"
        name="hiddenField"
        value="valorePredefinito" />
      <br />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 8

Aggiungi un campo di testo numerico per l'inserimento di un'età.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <form>
      <label for="name">Nome:</label>
      <input type="text" id="name" name="name" />
      <br />
      <label for="age">Età:</label>
      <input type="number" id="age" name="age" />
      <br />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 9

Aggiungi un campo di testo che richiede un indirizzo email valido.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <form>
      <label for="name">Nome:</label>
      <input type="text" id="name" name="name" />
      <br />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required />
      <br />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 10

Aggiungi una casella di controllo per l'invio di una copia del modulo all'indirizzo email dell'utente.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <form>
      <label for="name">Nome:</label>
      <input type="text" id="name" name="name" />
      <br />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required />
      <br />
      <input type="checkbox" id="sendCopy" name="sendCopy" />
      <label for="sendCopy">Invia una copia a me stesso</label>
      <br />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>