📢 Nuovo Corso Tailwind Completo disponibile!

Esercizi Bottoni HTML

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

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

Tracce

🍰 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">&#128515; 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>