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.
⚠ Hai trovato errori su questa pagina? Vuoi suggerire idee o contribuire? Visita la pagina contatti
Tracce
🍰 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>
