Esercizi Validazione Form HTML

Ecco degli esercizi semplici con soluzione per praticare le basi sulla validazione dei form in puro HTML, senza l’utilizzo di CSS o Javascript.

Esercizio 1

Crea un campo di input obbligatorio, che richiede all'utente di inserire un valore.

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

Esercizio 2

Crea un campo di input che accetta solo valori numerici.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
  </head>
  <body>
    <form>
      <label for="age">Età:</label>
      <input type="number" id="age" required />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 3

Crea un campo di input che richiede all'utente di inserire un indirizzo email valido.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
  </head>
  <body>
    <form>
      <label for="email">Email:</label>
      <input type="email" id="email" required />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 4

Crea un campo di input che richiede all'utente di inserire almeno un certo numero di caratteri.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
  </head>
  <body>
    <form>
      <label for="password">Password (min. 6 caratteri):</label>
      <input type="password" id="password" minlength="6" required />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 5

Crea un campo di input che richiede all'utente di inserire al massimo un certo numero di caratteri.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
  </head>
  <body>
    <form>
      <label for="comment">Commento (max. 100 caratteri):</label>
      <input type="text" id="comment" maxlength="100" required />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 6

Crea un campo di input che accetta solo un determinato pattern di caratteri.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
  </head>
  <body>
    <form>
      <label for="zipcode">CAP (solo numeri):</label>
      <input type="text" id="zipcode" pattern="[0-9]{5}" required />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 7

Crea un campo di input che accetta solo valori numerici all'interno di un determinato intervallo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
  </head>
  <body>
    <form>
      <label for="age">Età (da 18 a 100):</label>
      <input type="number" id="age" min="18" max="100" required />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 8

Crea una checkbox obbligatoria che l'utente deve selezionare per procedere.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
  </head>
  <body>
    <form>
      <input type="checkbox" id="agree" required />
      <label for="agree">Accetto i termini e le condizioni</label>
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 9

Crea un campo di input che richiede all'utente di inserire una data valida.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
  </head>
  <body>
    <form>
      <label for="dob">Data di nascita:</label>
      <input type="date" id="dob" required />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>

Esercizio 10

Crea un campo di input che richiede all'utente di inserire un URL valido.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
  </head>
  <body>
    <form>
      <label for="website">Sito Web:</label>
      <input type="url" id="website" required />
      <input type="submit" value="Invia" />
    </form>
  </body>
</html>