📢 Nuovo Corso Tailwind Completo disponibile!

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.

⚠ Hai trovato errori su questa pagina? Vuoi suggerire idee o contribuire? Visita la pagina contatti

Tracce

🍰 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>