Proprietà e metodi dei form JavaScript

Introduzione alla gestione dei form in JavaScript

I form sono il modo principale con cui gli utenti inviano dati a una pagina web, quindi accedere in modo affidabile ai loro controlli tramite JavaScript è una competenza fondamentale. Il DOM espone i form e i campi al loro interno attraverso un insieme di collezioni dedicate (document.forms, form.elements) e proprietà (input.value, checkbox.checked, select.value), oltre ad alcuni metodi imperativi (submit(), reset(), focus()).

Questo capitolo illustra come accedere ai form e ai controlli, leggere e scrivere i loro valori, reagire all'input dell'utente con gli eventi input e change, e attivare azioni comuni in modo programmatico. Per una panoramica più ampia su come i form si collocano nell'albero del documento, consulta Lavorare con i form nel DOM.

Accedere ai form e ai loro controlli

`document.forms` e `form.elements`

Ogni form presente nella pagina è accessibile tramite document.forms. Si tratta di una collezione speciale che puoi indicizzare per numero (document.forms[0]) o, in modo più leggibile, tramite l'attributo name del form (document.forms.loginForm oppure document.forms['loginForm']).

Una volta ottenuto il form, form.elements fornisce i controlli nominati nello stesso modo — tramite indice o tramite il name del controllo. L'accesso per nome è lo stile consigliato perché funziona anche quando aggiungi o riordini i campi:

const form = document.forms.loginForm;     // a <form name="loginForm">
const userField = form.elements.username;  // an <input name="username">
// Shortcut: named controls are also exposed directly on the form
const samePassword = form.password;        // <input name="password">

Quando più controlli condividono lo stesso name (i pulsanti radio), form.elements.name restituisce una RadioNodeList — una collezione il cui .value corrisponde al valore del pulsante attualmente selezionato. Anche un elemento <fieldset> ha la propria collezione elements, quindi puoi trattare una sezione raggruppata come un mini-form.

Ecco un esempio completo che accede a un form e ai suoi campi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>JavaScript Form Example</title>
</head>
<body>
    <form name="loginForm">
        <input type="text" name="username" placeholder="Username" />
        <input type="password" name="password" placeholder="Password" />
        <input type="submit" value="Login" />
    </form>
    <div style="margin-top:15px;" id="output"></div>

    <script>
        const form = document.forms['loginForm'];
        const username = form.elements['username'];
        const password = form.elements['password'];
        form.onsubmit = function(event) {
            const output = document.getElementById('output');
            output.textContent = 'Username: ' + username.value + ' Password: ' + password.value;
            event.preventDefault(); // Prevent form submission
        }
    </script>
</body>
</html>

Provalo tu stesso »

Questo script intercetta l'invio del form, mostra il nome utente e la password in un div nella pagina e impedisce che il form venga inviato al server.

Lettura e scrittura dei valori dei controlli

Ogni tipo di controllo espone il proprio stato corrente tramite una proprietà leggermente diversa — sapere quale leggere è già metà del lavoro:

Controllo	Leggi / scrivi con	Note
`text`, `password`, `email`, `textarea`	`.value`	Sempre una string
`checkbox`	`.checked` (boolean)	`.value` è il valore dell'attributo, non indica se è spuntato
`radio` (gruppo)	`form.elements.groupName.value`	Valore del pulsante selezionato, o `""`
`<select>`	`.value`	Valore dell'`<option>` selezionata; `.options[i]` e `.selectedIndex` offrono accesso più granulare

input.value = 'hello';            // text-like fields
checkbox.checked = true;          // tick a checkbox
select.value = 'medium';          // selects the matching <option>
const chosen = select.options[select.selectedIndex].text; // visible label

Un errore comune tra i principianti è leggere checkbox.value per sapere se una casella è spuntata — questo restituisce la stringa dell'attributo statico ("on" per impostazione predefinita), non lo stato di selezione. Usa invece .checked.

Lavorare con i valori degli input

Manipolare i valori degli input in JavaScript è semplice. Ecco come impostare dinamicamente i valori degli input e visualizzarli nella pagina web:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Input Value Example</title>
</head>
<body>
    <form name="userForm">
        <input type="text" name="firstName" placeholder="First Name" />
        <input type="text" name="lastName" placeholder="Last Name" />
        <input type="submit" value="Submit" />
    </form>
    <div id="welcomeMessage"></div>

    <script>
        const form = document.forms['userForm'];
        const firstName = form.elements['firstName'];
        const lastName = form.elements['lastName'];
        firstName.value = 'John';
        lastName.value = 'Doe';

        form.onsubmit = function(event) {
            const welcomeMessage = document.getElementById('welcomeMessage');
            welcomeMessage.textContent = 'Hello, ' + firstName.value + ' ' + lastName.value + '!';
            event.preventDefault(); // Prevents the form from submitting to a server
        }
    </script>
</body>
</html>

Provalo tu stesso »

In questo esempio, il nome e il cognome sono preimpostati rispettivamente su 'John' e 'Doe'. Quando il form viene inviato, viene visualizzato un messaggio di saluto nella pagina, dimostrando sia l'impostazione che il recupero dei valori degli input. Per form più complessi, considera l'API FormData per serializzare facilmente i dati del form in coppie chiave-valore senza accedere manualmente a ogni elemento.

Tecniche avanzate per i form

Validazione del form

La validazione dei form in tempo reale è fondamentale per l'esperienza utente. Ecco un esempio di come validare un indirizzo email prima dell'invio del form. Tieni presente che la validazione email di HTML5 è basilare e spesso integrata con regex personalizzate o librerie in produzione, poiché potrebbe accettare erroneamente indirizzi incompleti come 'w3docs@gmail' (se vuoi sapere come risolvere questo problema, puoi leggere JavaScript Validation API):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Form Validation Example</title>
</head>
<body>
    <form name="registrationForm">
        <input type="email" name="email" placeholder="Enter your email" required />
        <input type="submit" value="Register" />
    </form>
    <div id="message"></div>

    <script>
        const form = document.forms['registrationForm'];
        const email = form.elements['email'];

        form.onsubmit = function(event) {
            // Note: HTML5 email validation is basic and often supplemented by custom regex or libraries for production.
            // It may incorrectly accept incomplete addresses like 'w3docs@gmail'.
            if (!email.checkValidity()) {
                document.getElementById('message').textContent = "Please enter a valid email address.";
                event.preventDefault();
                return;
            }
            document.getElementById('message').textContent = "Registration successful!";
            event.preventDefault(); // Prevents actual form submission
        }
    </script>
</body>
</html>

Provalo tu stesso »

In questo script, il form valida il campo email al momento dell'invio. Mostra un messaggio che indica se la registrazione è avvenuta con successo o se si è verificato un errore, il tutto senza inviare dati al server. Questo esempio evidenzia anche un limite della validazione email di HTML5, che non garantisce pienamente i formati di dominio corretti.

Reagire agli eventi `input` e `change`

Due eventi coprono la maggior parte delle interazioni con i form:

input si attiva a ogni pressione di tasto o modifica del valore — ideale per anteprime in tempo reale, contatori di caratteri e validazione durante la digitazione.
change si attiva solo quando l'utente conferma una modifica: quando un campo di testo perde il focus dopo la modifica, o immediatamente quando si attiva una checkbox, un radio o un <select>. Usalo quando reagire a ogni pressione di tasto sarebbe dispendioso.

search.addEventListener('input', () => console.log(search.value)); // every keystroke
country.addEventListener('change', () => console.log(country.value)); // on selection

Il prossimo esempio usa input per mostrare un conteggio dei caratteri in tempo reale mentre l'utente digita:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Input Event Example</title>
</head>
<body>
  <form name="bioForm">
    <textarea name="bio" maxlength="100" placeholder="Tell us about yourself"></textarea>
  </form>
  <div id="counter">0 / 100</div>

  <script>
    const bio = document.forms.bioForm.elements.bio;
    const counter = document.getElementById('counter');
    bio.addEventListener('input', function () {
      counter.textContent = bio.value.length + ' / 100';
    });
  </script>
</body>
</html>

Per i meccanismi più approfonditi dell'invio — inclusa la differenza tra l'evento submit e il metodo form.submit() — consulta Forms: event and method submit.

Metodi del form: `submit()`, `reset()` e `focus()`

I form e i controlli offrono anche metodi imperativi:

form.submit() invia il form in modo programmatico. Attenzione: non attiva l'evento submit, quindi qualsiasi validazione collegata a quell'evento viene saltata. Preferisci form.requestSubmit() quando hai bisogno che la validazione e l'evento vengano eseguiti.
form.reset() ripristina ogni controllo al suo valore iniziale.
element.focus() sposta il cursore della tastiera su un controllo — perfetto per evidenziare il primo campo non valido. Il suo corrispettivo è blur(). Consulta Focusing: focus / blur per i dettagli.

const form = document.forms.signup;
if (!form.email.value) {
  form.email.focus();   // send the user straight to the empty field
} else {
  form.requestSubmit(); // submit AND run the submit event + validation
}
form.reset();           // clear the form back to defaults

Gestione degli eventi del form

Ecco come gestire gli eventi del form in modo dinamico:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Events Example</title>
  </head>
  <body>
    <div style="display: flex; justify-content: center; align-items: center">
      <form
        style="display: flex; flex-direction: column; gap: 5px"
        name="contactForm"
      >
        <input type="text" name="fullName" placeholder="Full Name" required />
        <textarea name="message" placeholder="Your Message"></textarea>
        <input type="submit" value="Send" />
      </form>
    </div>
    <div
      style="display: flex; justify-content: center; align-items: center"
      id="confirmation"
    ></div>

    <script>
      const form = document.forms["contactForm"];

      form.onsubmit = function (event) {
        const name = form.elements["fullName"].value;
        const message = form.elements["message"].value;
        document.getElementById("confirmation").textContent =
          "Thank you, " + name + ", we received your message!";
        event.preventDefault(); // Prevents form from submitting to a server
      };
    </script>
  </body>
</html>

Provalo tu stesso »

Questo esempio fornisce un feedback immediato all'utente visualizzando un messaggio di conferma quando il form viene inviato. Mostra efficacemente come JavaScript possa gestire gli eventi del form per migliorare l'interazione senza comunicazione con il server.

Conclusione

Padroneggiare le proprietà e i metodi dei form JavaScript migliora le funzionalità e l'interazione utente delle applicazioni web. Accedi ai form tramite document.forms, indirizza i controlli per nome con form.elements, leggi lo stato con la proprietà corretta (value, checked, selectedIndex), rispondi agli eventi input e change, e gestisci il form con submit(), reset() e focus().

Per approfondire, continua con questi capitoli correlati:

Esercitazione

Pratica

Quali delle seguenti affermazioni sono vere riguardo ai form JavaScript e ai loro metodi?

La collezione `document.forms` consente di accedere ai form nel documento usando sia il nome che l'indice numerico.Usando `form.elements`, è possibile accedere ai singoli elementi all'interno di un form tramite il loro attributo name.`form.submit()` attiva l'evento submit del form e viene usato per validare i dati del form prima di inviarli al server.L'elemento `fieldset` in un form si comporta come un sotto-form e contiene una propria proprietà `elements`.Modificare il nome di un elemento input tramite JavaScript aggiorna immediatamente la collezione `form.elements` per riflettere il nuovo nome.

Introduzione alla gestione dei form in JavaScript

Accedere ai form e ai loro controlli

document.forms e form.elements

Lettura e scrittura dei valori dei controlli

Lavorare con i valori degli input

Tecniche avanzate per i form

Validazione del form

Reagire agli eventi input e change

Metodi del form: submit(), reset() e focus()

Gestione degli eventi del form

Conclusione

Esercitazione

`document.forms` e `form.elements`

Reagire agli eventi `input` e `change`

Metodi del form: `submit()`, `reset()` e `focus()`