Esercizi Form in JavaScript

Ecco degli esercizi con soluzione per praticare la gestione dei form in JavaScript.

Esercizio 1: Validazione di un Form

Validare che tutti i campi di input di un form siano riempiti prima di inviarlo.

<!DOCTYPE html>
<html>
  <head>
    <title>Validazione di un Form</title>
  </head>
  <body>
    <form id="form1">
      <input type="text" id="nome" placeholder="Nome" />
      <input type="text" id="email" placeholder="Email" />
      <button type="submit">Invia</button>
    </form>
    <p id="messaggio"></p>

    <script>
      document
        .getElementById("form1")
        .addEventListener("submit", function (event) {
          var nome = document.getElementById("nome").value;
          var email = document.getElementById("email").value;
          var messaggio = document.getElementById("messaggio");

          if (nome === "" || email === "") {
            messaggio.textContent = "Tutti i campi devono essere riempiti.";
            event.preventDefault();
          } else {
            messaggio.textContent = "";
          }
        });
    </script>
  </body>
</html>

Esercizio 2: Mostrare un Messaggio di Successo

Mostrare un messaggio di successo dopo che un form è stato inviato correttamente.

<!DOCTYPE html>
<html>
  <head>
    <title>Messaggio di Successo</title>
  </head>
  <body>
    <form id="form2">
      <input type="text" id="username" placeholder="Username" />
      <input type="password" id="password" placeholder="Password" />
      <button type="submit">Login</button>
    </form>
    <p id="successo"></p>

    <script>
      document
        .getElementById("form2")
        .addEventListener("submit", function (event) {
          event.preventDefault();
          var successo = document.getElementById("successo");
          successo.textContent = "Login effettuato con successo!";
        });
    </script>
  </body>
</html>

Esercizio 3: Abilitare/Disabilitare il Pulsante di Invio

Abilitare o disabilitare il pulsante di invio in base alla validità dei campi del form.

<!DOCTYPE html>
<html>
  <head>
    <title>Abilitare/Disabilitare il Pulsante di Invio</title>
  </head>
  <body>
    <form id="form3">
      <input type="text" id="firstName" placeholder="Nome" />
      <input type="text" id="lastName" placeholder="Cognome" />
      <button type="submit" id="submitBtn" disabled>Invia</button>
    </form>

    <script>
      var form = document.getElementById("form3");
      var firstName = document.getElementById("firstName");
      var lastName = document.getElementById("lastName");
      var submitBtn = document.getElementById("submitBtn");

      form.addEventListener("input", function () {
        if (firstName.value !== "" && lastName.value !== "") {
          submitBtn.disabled = false;
        } else {
          submitBtn.disabled = true;
        }
      });
    </script>
  </body>
</html>

Esercizio 4: Formattazione di un Numero di Telefono

Formattare automaticamente un numero di telefono durante l'input.

<!DOCTYPE html>
<html>
  <head>
    <title>Formattazione di un Numero di Telefono</title>
  </head>
  <body>
    <form id="form4">
      <input type="text" id="telefono" placeholder="Numero di telefono" />
    </form>

    <script>
      document
        .getElementById("telefono")
        .addEventListener("input", function (event) {
          var input = event.target;
          var value = input.value.replace(/\D/g, "");
          var formattedValue = value;

          if (value.length > 3 && value.length <= 6) {
            formattedValue = value.slice(0, 3) + "-" + value.slice(3);
          } else if (value.length > 6) {
            formattedValue =
              value.slice(0, 3) +
              "-" +
              value.slice(3, 6) +
              "-" +
              value.slice(6);
          }

          input.value = formattedValue;
        });
    </script>
  </body>
</html>

Esercizio 5: Calcolo in Tempo Reale

Calcolare e mostrare il risultato di un'operazione aritmetica in tempo reale mentre l'utente inserisce i dati.

<!DOCTYPE html>
<html>
  <head>
    <title>Calcolo in Tempo Reale</title>
  </head>
  <body>
    <form id="form5">
      <input type="number" id="num1" placeholder="Numero 1" />
      <input type="number" id="num2" placeholder="Numero 2" />
      <p>Risultato: <span id="risultato">0</span></p>
    </form>

    <script>
      var num1 = document.getElementById("num1");
      var num2 = document.getElementById("num2");
      var risultato = document.getElementById("risultato");

      function aggiornaRisultato() {
        var valore1 = parseFloat(num1.value) || 0;
        var valore2 = parseFloat(num2.value) || 0;
        risultato.textContent = valore1 + valore2;
      }

      num1.addEventListener("input", aggiornaRisultato);
      num2.addEventListener("input", aggiornaRisultato);
    </script>
  </body>
</html>

Esercizio 6: Form Dinamico

Aggiungere dinamicamente campi di input a un form al clic di un pulsante.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Dinamico</title>
  </head>
  <body>
    <form id="form6">
      <div id="campi"></div>
      <button type="button" onclick="aggiungiCampo()">Aggiungi Campo</button>
      <button type="submit">Invia</button>
    </form>

    <script>
      function aggiungiCampo() {
        var campi = document.getElementById("campi");
        var nuovoCampo = document.createElement("input");
        nuovoCampo.type = "text";
        nuovoCampo.placeholder = "Campo aggiunto";
        campi.appendChild(nuovoCampo);
      }
    </script>
  </body>
</html>

Esercizio 7: Mostrare/Nascondere Campi di Input

Mostrare o nascondere campi di input basati sulla selezione di un'opzione.

<!DOCTYPE html>
<html>
  <head>
    <title>Mostrare/Nascondere Campi di Input</title>
  </head>
  <body>
    <form id="form7">
      <select id="selezione" onchange="mostraNascondiCampi()">
        <option value="none">Seleziona un'opzione</option>
        <option value="opzione1">Opzione 1</option>
        <option value="opzione2">Opzione 2</option>
      </select>
      <div id="campoOpzione1" style="display:none;">
        <input type="text" placeholder="Campo Opzione 1" />
      </div>
      <div id="campoOpzione2" style="display:none;">
        <input type="text" placeholder="Campo Opzione 2" />
      </div>
    </form>

    <script>
      function mostraNascondiCampi() {
        var selezione = document.getElementById("selezione").value;
        var campoOpzione1 = document.getElementById("campoOpzione1");
        var campoOpzione2 = document.getElementById("campoOpzione2");

        campoOpzione1.style.display =
          selezione === "opzione1" ? "block" : "none";
        campoOpzione2.style.display =
          selezione === "opzione2" ? "block" : "none";
      }
    </script>
  </body>
</html>

Esercizio 8: Popolare un Form con Dati Predefiniti

Popolare un form con dati predefiniti al caricamento della pagina.

<!DOCTYPE html>
<html>
  <head>
    <title>Popolare un Form con Dati Predefiniti</title>
  </head>
  <body>
    <form id="form8">
      <input type="text" id="nome" placeholder="Nome" />
      <input type="email" id="email" placeholder="Email" />
      <button type="submit">Invia</button>
    </form>

    <script>
      window.onload = function () {
        document.getElementById("nome").value = "Mario Rossi";
        document.getElementById("email").value = "mario.rossi@example.com";
      };
    </script>
  </body>
</html>