Esercizi Bottoni HTML
Codegrind Team•Jul 16 2023
Ecco degli esercizi semplici con soluzione per praticare le basi sull’utilizzo dei bottoni in HTML, sia con il tag <button> che i diversi tipi di <input>.
Esercizio 1
Crea tre bottoni di base: uno per azione, uno per annullare e uno per reimpostare.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 1</title>
</head>
<body>
<button type="submit">Azione</button>
<button type="reset">Reimposta</button>
<button type="button">Annulla</button>
</body>
</html>
Esercizio 2
Crea due bottoni con testo differente.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 2</title>
</head>
<body>
<button type="button">Clicca qui</button>
<button type="submit">Invia dati</button>
</body>
</html>
Esercizio 3
Crea un pulsante per reimpostare i campi del modulo.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 3</title>
</head>
<body>
<form>
<input type="text" placeholder="Nome" />
<input type="text" placeholder="Email" />
<button type="reset">Cancella dati</button>
</form>
</body>
</html>
Esercizio 4
Crea un pulsante con un'icona utilizzando l'entitĂ HTML.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 4</title>
</head>
<body>
<button type="submit">😃 Invia</button>
</body>
</html>
Esercizio 5
Crea un modulo con un pulsante di invio.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 8</title>
</head>
<body>
<form>
<input type="text" placeholder="Nome" />
<input type="email" placeholder="Email" />
<button type="submit">Invia</button>
</form>
</body>
</html>
Esercizio 6
Crea un modulo con bottoni di reset e invio con accesskey assegnati.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 9</title>
</head>
<body>
<form>
<input type="text" placeholder="Nome" />
<input type="email" placeholder="Email" />
<button type="submit" accesskey="s">Invia</button>
<button type="reset" accesskey="r">Cancella</button>
</form>
</body>
</html>