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>