Gestire i controlli dei moduli attraverso il DOM

Introduzione

Quando si lavora con il DOM, spesso non è sufficiente selezionare un elemento e modificarne il testo. Le applicazioni web devono anche leggere e aggiornare il valore dei campi di un modulo: input testuali, caselle di controllo, pulsanti radio e menu a tendina.

In questi casi è importante distinguere tra gli attributi HTML e le proprietà DOM. Per esempio, l’attributo value definisce il valore iniziale scritto nel markup, mentre la proprietà JavaScript input.value rappresenta il valore attuale inserito dall’utente.

In questo tutorial realizzeremo un piccolo modulo per la prenotazione di un corso. Il codice mostrerà come selezionare i controlli, leggere i loro valori, aggiornarli e visualizzare un riepilogo direttamente nella pagina.

Codice completo

<form id="course-form">
  <label for="student-name">Nome</label>
  <input id="student-name" name="studentName" type="text" value="">

  <label for="course">Corso</label>
  <select id="course" name="course">
    <option value="javascript">JavaScript</option>
    <option value="dom">Gestione del DOM</option>
    <option value="testing">Testing frontend</option>
  </select>

  <label>
    <input id="newsletter" name="newsletter" type="checkbox">
    Desidero ricevere la newsletter
  </label>

  <fieldset>
    <legend>Modalità</legend>

    <label>
      <input type="radio" name="mode" value="online" checked>
      Online
    </label>

    <label>
      <input type="radio" name="mode" value="classroom">
      In aula
    </label>
  </fieldset>

  <button type="submit">Conferma iscrizione</button>
</form>

<section id="summary" hidden>
  <h2>Riepilogo</h2>
  <p id="summary-text"></p>
</section>

<script>
  const form = document.querySelector("#course-form");
  const nameInput = document.querySelector("#student-name");
  const courseSelect = document.querySelector("#course");
  const newsletterInput = document.querySelector("#newsletter");
  const summary = document.querySelector("#summary");
  const summaryText = document.querySelector("#summary-text");

  form.addEventListener("submit", (event) => {
    event.preventDefault();

    const studentName = nameInput.value.trim();
    const courseValue = courseSelect.value;
    const courseLabel =
      courseSelect.options[courseSelect.selectedIndex].textContent;

    const wantsNewsletter = newsletterInput.checked;

    const selectedMode = form.querySelector(
      ´input[name="mode"]:checked´
    );

    const modeValue = selectedMode ? selectedMode.value : "non specificata";

    if (studentName === "") {
      nameInput.focus();
      summary.hidden = true;
      return;
    }

    summaryText.textContent =
      `Ciao ${studentName}! Hai scelto il corso "${courseLabel}" ` +
      `(${courseValue}), modalità ${modeValue}. ` +
      `Newsletter: ${wantsNewsletter ? "sì" : "no"}.`;

    summary.hidden = false;
  });

  // Esempio di aggiornamento di una proprietà DOM.
  function resetForm() {
    form.reset();
    summary.hidden = true;
    nameInput.focus();
  }
</script>

Spiegazione

Leggere il valore di un input

Per un campo testuale si usa la proprietà value. Questa proprietà restituisce il contenuto attuale del controllo, anche se è stato modificato dall’utente dopo il caricamento della pagina.

const name = nameInput.value.trim();

Il metodo trim() rimuove gli spazi all’inizio e alla fine della stringa. È una buona pratica per evitare che un valore composto soltanto da spazi venga considerato valido.

Gestire checkbox e pulsanti radio

Una casella di controllo non si legge tramite value, ma attraverso la proprietà booleana checked:

const isSubscribed = newsletterInput.checked;

if (isSubscribed) {
  console.log("L´utente vuole la newsletter");
}

Per i pulsanti radio bisogna individuare quello selezionato. Il selettore :checked è utile perché restituisce soltanto il controllo attivo:

const selectedMode = form.querySelector(´input[name="mode"]:checked´);

if (selectedMode) {
  console.log(selectedMode.value);
}

Il controllo sulla presenza di selectedMode è importante: se nessun radio button è selezionato, il risultato è null.

Leggere un menu select

La proprietà select.value restituisce il valore dell’opzione selezionata. Questo valore è generalmente pensato per la logica dell’applicazione, per esempio javascript o dom.

Se invece serve il testo mostrato all’utente, si può accedere all’opzione corrente tramite selectedIndex e la raccolta options:

const value = courseSelect.value;
const index = courseSelect.selectedIndex;
const label = courseSelect.options[index].textContent;

È possibile anche aggiornare il menu modificando la proprietà value:

courseSelect.value = "testing";

Se non esiste un’opzione con quel valore, il browser non selezionerà automaticamente un elemento valido. Per questo, quando il valore proviene da un’API o da una fonte esterna, conviene controllarlo.

Mostrare contenuti in modo sicuro

Il riepilogo viene inserito con textContent e non con innerHTML. Questa scelta è importante quando il testo contiene dati inseriti dall’utente, perché textContent tratta il contenuto come semplice testo e non interpreta eventuali tag HTML.

summaryText.textContent = `Benvenuto, ${studentName}`;

Usare innerHTML con dati non controllati può introdurre vulnerabilità XSS. Se non è necessario creare elementi HTML, textContent è normalmente la scelta più sicura.

Controllare la visibilità con hidden

L’attributo hidden è rappresentato nel DOM dalla proprietà booleana element.hidden. Impostandola a true, l’elemento viene nascosto; impostandola a false, torna visibile.

summary.hidden = false;
summary.hidden = true;

Questo approccio evita di manipolare direttamente gli stili e comunica chiaramente che la sezione non è attualmente disponibile.

Best practice

Usa value per input testuali e select, checked per checkbox e radio button.
Normalizza i dati letti dal modulo con metodi come trim() prima della validazione.
Controlla sempre che una selezione opzionale non sia null.
Preferisci textContent quando devi inserire testo proveniente dall’utente.
Usa form.reset() per ripristinare i valori iniziali dei controlli.
Non affidarti soltanto alla validazione JavaScript: mantieni anche gli attributi HTML come required, type e minlength.
Conserva riferimenti agli elementi usati frequentemente, evitando selezioni ripetute inutili.
Seleziona i radio button all’interno del modulo corretto, così da evitare conflitti con altri moduli presenti nella pagina.

Riepilogo

La gestione dei controlli di un modulo è una parte fondamentale della manipolazione del DOM. Le proprietà value, checked, selectedIndex, options e hidden permettono di leggere e aggiornare l’interfaccia in modo diretto e comprensibile.

La distinzione principale da ricordare è tra il valore iniziale dichiarato nell’HTML e lo stato corrente rappresentato dalle proprietà DOM. Inoltre, l’uso di textContent per visualizzare dati forniti dall’utente riduce il rischio di inserire markup indesiderato.

Con queste tecniche puoi costruire moduli interattivi, configuratori, filtri di ricerca e pagine di riepilogo senza dover ricorrere immediatamente a framework complessi.

Approfondisci con risorse ufficiali

Add as preferred source on Google