JavaScript e i Form nel DOM

I form sono componenti fondamentali delle applicazioni web, poiché consentono l'interazione con l'utente e la raccolta dei dati. Questa guida illustra le competenze pratiche sul DOM necessarie per lavorare con i form: accedere agli elementi del form e agli input, leggere e scrivere i valori dei campi, raccogliere tutti i dati in una volta con FormData, reagire agli eventi del form e validare l'input dell'utente prima dell'invio.

Se sei alle prime armi con il DOM, inizia con Selezionare elementi del DOM e Introduzione agli eventi del browser, poi torna qui.

Accedere agli elementi del form

Selezionare gli elementi del form

Puoi raggiungere gli elementi del form con gli stessi metodi DOM che usi per qualsiasi nodo: getElementById, getElementsByName, getElementsByTagName e querySelector / querySelectorAll. Nella maggior parte dei casi è preferibile usare getElementById (il più veloce, quando controlli il markup) o querySelector (il più flessibile, supporta qualsiasi selettore CSS).

<!DOCTYPE html>
<html>
<head>
    <title>Selecting Form Elements</title>
</head>
<body>
<h4>Fill the form inputs, and press 'Show Input Values' button.</h4>
    <form id="userForm">
        <input type="text" id="username" name="username" placeholder="Username" />
        <input type="email" id="email" name="email" placeholder="Email" />
    </form>
    <button id="showInputs">Show Input Values</button>

    <script>
        // Select elements by ID
        const username = document.getElementById('username');
        const email = document.getElementById('email');
        const showInputsButton = document.getElementById('showInputs');

        // Using querySelector for selection
        const emailByQuery = document.querySelector('#email');

        showInputsButton.addEventListener('click', () => {
            alert(`Username: ${username.value}, Email: ${emailByQuery.value}`);
        });
    </script>
</body>
</html>

Provalo tu stesso »

Questo esempio mostra come selezionare gli elementi del form usando vari metodi e visualizzarne i valori in un alert quando si fa clic sul pulsante "Show Input Values".

Usare la collezione document.forms

Ogni form presente in una pagina è accessibile anche tramite la collezione incorporata document.forms, e ogni campo con un nome all'interno di un form è raggiungibile come proprietà di quel form. Questo è spesso il modo più conciso per leggere i valori senza dover chiamare getElementById per ogni campo.

// <form name="userForm">
//   <input name="username">
//   <input name="email">
// </form>

const form = document.forms.userForm;     // or document.forms[0]
console.log(form.username.value);          // value of the username field
console.log(form.elements['email'].value); // same via the elements collection

La collezione form.elements contiene tutti i controlli (input, select, textarea, button) appartenenti al form, indicizzati sia per posizione che per name. Consulta Proprietà e metodi dei form per l'elenco completo.

Ottenere e impostare i valori degli input

Accedere e modificare i valori degli input

I valori degli input possono essere letti e modificati usando la proprietà value.

<!DOCTYPE html>
<html>
<head>
    <title>Getting and Setting Input Values</title>
</head>
<body>
    <form id="userForm">
        <input type="text" id="username" name="username" placeholder="Username" />
        <input type="email" id="email" name="email" placeholder="Email" />
        <button type="button" id="showValues">Show Values</button>
        <button type="button" id="setValues">Set New Values</button>
    </form>

    <script>
        const username = document.getElementById('username');
        const email = document.getElementById('email');
        const showValuesButton = document.getElementById('showValues');
        const setValuesButton = document.getElementById('setValues');

        showValuesButton.addEventListener('click', () => {
            alert(`Username: ${username.value}\nEmail: ${email.value}`);
        });

        setValuesButton.addEventListener('click', () => {
            username.value = 'newUsername';
            email.value = '[email protected]';
            alert('Values have been set to new values.');
        });
    </script>
</body>
</html>

Provalo tu stesso »

Questo esempio mostra come ottenere e impostare i valori dei campi di input. Facendo clic su "Show Values" vengono visualizzati i valori attuali, mentre "Set New Values" li modifica e mostra un alert di conferma.

Eventi del form

Gestire l'invio del form con gli eventi submit e reset

I form possono generare eventi come submit e reset, che possono essere gestiti per eseguire azioni quali la validazione o l'elaborazione dei dati.

<!DOCTYPE html>
<html>
<head>
    <title>Form Events</title>
</head>
<body>
    <form id="userForm">
        <input type="text" id="username" name="username" placeholder="Username" />
        <input type="email" id="email" name="email" placeholder="Email" />
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
    </form>

    <script>
        const form = document.getElementById('userForm');

        form.addEventListener('submit', (event) => {
            event.preventDefault();
            alert('Form submitted!');

            // Perform form validation or data processing here
        });

        form.addEventListener('reset', () => {
            alert('Form reset!');
        });
    </script>
</body>
</html>

Provalo tu stesso »

Questo esempio mostra come gestire gli eventi submit e reset di un form per eseguire azioni quali il blocco del comportamento predefinito, la validazione e l'elaborazione dei dati.

Gestire le interazioni utente in tempo reale

Oltre a submit e reset, i form usano spesso gli eventi input, change, focus e blur per reagire alle interazioni dell'utente in tempo reale. L'evento input scatta immediatamente mentre l'utente digita, mentre change scatta quando l'elemento perde il focus dopo che il suo valore è cambiato. Per un approfondimento, consulta Eventi: change, input, cut, copy, paste.

<script>
    const inputField = document.getElementById('username');

    inputField.addEventListener('input', (e) => {
        console.log('User is typing:', e.target.value);
    });

    inputField.addEventListener('change', (e) => {
        console.log('Value changed:', e.target.value);
    });
</script>

Raccogliere tutti i dati del form con FormData

Leggere ogni campo manualmente va bene per due input, ma per form più grandi l'oggetto FormData consente di raccogliere tutti i controlli con nome in una sola volta. È anche il modo standard per preparare i dati per le richieste fetch.

const form = document.getElementById('userForm');

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

    const formData = new FormData(form);

    // Read a single field
    console.log(formData.get('username'));

    // Iterate over every name/value pair
    for (const [name, value] of formData.entries()) {
        console.log(`${name}: ${value}`);
    }

    // Convert to a plain object (handy for JSON APIs)
    const data = Object.fromEntries(formData.entries());
    console.log(data); // { username: '...', email: '...' }

    // Send it to a server
    // fetch('/api/users', { method: 'POST', body: formData });
});

Vengono inclusi solo i controlli che possiedono un attributo name, il che rispecchia il comportamento nativo del browser al momento dell'invio del form.

Validazione e blocco del comportamento predefinito

Validare i dati del form

La validazione lato client può essere eseguita per garantire la correttezza dei dati prima dell'invio del form.

<!DOCTYPE html>
<html>
<head>
    <title>Form Validation</title>
</head>
<body>
    <form id="userForm">
        <input type="text" id="username" name="username" placeholder="Username" required />
        <input type="email" id="email" name="email" placeholder="Email" required />
        <button type="submit">Submit</button>
    </form>

    <script>
        const form = document.getElementById('userForm');

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

            const username = document.getElementById('username').value;
            const email = document.getElementById('email').value;

            if (!username || !email) {
                alert('Please fill in all fields.');
                return;
            }

            // Modern approach: use checkValidity() for built-in validation
            if (!form.checkValidity()) {
                form.reportValidity();
                return;
            }

            // Fallback/custom regex validation if needed
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                alert('Please enter a valid email address.');
                return;
            }

            alert('Form submitted successfully!');
        });
    </script>
</body>
</html>

Provalo tu stesso »

Questo esempio illustra la validazione lato client del form, inclusi i campi obbligatori e la validazione del formato dell'email, oltre al blocco dell'invio del form in caso di errori di validazione.

Informazione

Usa querySelector e querySelectorAll per selezionare in modo efficiente gli elementi del form e valida sempre i valori degli input prima dell'invio del form, così da garantire l'integrità dei dati e un'esperienza utente ottimale.

Attenzione

La validazione lato client migliora l'esperienza utente, ma non sostituisce quella lato server. Valida e sanifica sempre i dati anche nel tuo backend.

Conclusioni

Lavorare con i form in JavaScript significa accedere agli elementi del form, ottenere e impostare i valori degli input, raccogliere i dati con FormData, gestire gli eventi del form e validare i dati inseriti. Padroneggiando queste tecniche puoi creare form web dinamici e reattivi che migliorano l'interazione con l'utente e la raccolta dei dati. Per approfondire, esplora Form: evento e metodo submit e Proprietà e metodi dei form.

Esercitazione

Pratica

Quali delle seguenti affermazioni sulla gestione dei form in JavaScript sono vere?

Puoi accedere agli elementi del form usando la collezione document.forms.Gli elementi del form possono essere raggiunti tramite il loro attributo name.Il metodo submit() può essere usato per inviare il form in modo programmatico.L'attributo action di un form specifica dove devono essere inviati i dati del form.Il metodo reset() cancella tutti gli input dell'utente nel form.La proprietà innerHTML viene comunemente usata per ottenere i valori del form.