Les formulaires JavaScript dans le DOM

Les formulaires sont des composants fondamentaux des applications web, permettant l'interaction avec les utilisateurs et la collecte de données. Ce guide couvre les compétences pratiques du DOM dont vous avez besoin pour travailler avec eux : accéder aux éléments de formulaire et de saisie, lire et écrire des valeurs de champs, collecter toutes les données à la fois avec FormData, réagir aux événements de formulaire et valider la saisie utilisateur avant la soumission.

Si vous débutez avec le DOM, commencez par Sélectionner des éléments DOM et Introduction aux événements du navigateur, puis revenez ici.

Accéder aux éléments de formulaire

Sélectionner des éléments de formulaire

Vous pouvez accéder aux éléments de formulaire avec les mêmes méthodes DOM que pour n'importe quel nœud : getElementById, getElementsByName, getElementsByTagName, et querySelector / querySelectorAll. Dans la plupart des cas, préférez getElementById (le plus rapide, lorsque vous contrôlez le balisage) ou querySelector (le plus flexible, prend en charge tout sélecteur 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>

Essayez vous-même »

Cet exemple illustre la sélection d'éléments de formulaire à l'aide de différentes méthodes et l'affichage de leurs valeurs dans une alerte lorsque le bouton « Show Input Values » est cliqué.

Utiliser la collection document.forms

Chaque formulaire d'une page est également accessible via la collection intégrée document.forms, et chaque champ nommé à l'intérieur d'un formulaire est accessible en tant que propriété de ce formulaire. C'est souvent la façon la plus concise de lire des valeurs sans avoir à appeler getElementById pour chaque champ.

// <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 collection form.elements contient tous les contrôles (inputs, selects, textareas, boutons) appartenant au formulaire, indexés par position et par name. Consultez Propriétés et méthodes des formulaires pour la liste complète.

Obtenir et définir des valeurs de saisie

Accéder et modifier les valeurs des champs de saisie

Les valeurs des champs de saisie peuvent être accédées et modifiées à l'aide de la propriété 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>

Essayez vous-même »

Cet exemple montre comment obtenir et définir les valeurs des champs de saisie. Cliquer sur « Show Values » affiche les valeurs actuelles, et « Set New Values » les modifie et affiche une alerte de confirmation.

Événements de formulaire

Gérer la soumission et la réinitialisation avec les événements submit et reset

Les formulaires peuvent déclencher des événements tels que submit et reset, qui peuvent être gérés pour effectuer des actions comme la validation ou le traitement des données.

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

Essayez vous-même »

Cet exemple montre comment gérer les événements submit et reset d'un formulaire pour effectuer des actions telles que la prévention du comportement par défaut, la validation et le traitement des données.

Gérer les interactions utilisateur en temps réel

En plus de submit et reset, les formulaires utilisent fréquemment les événements input, change, focus et blur pour réagir aux interactions utilisateur en temps réel. L'événement input se déclenche immédiatement à mesure que l'utilisateur tape, tandis que change se déclenche lorsque l'élément perd le focus après que sa valeur a changé. Pour approfondir le sujet, consultez Événements : 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>

Collecter toutes les données du formulaire avec FormData

Lire chaque champ manuellement est acceptable pour deux saisies, mais pour des formulaires plus importants, l'objet FormData vous permet de rassembler tous les contrôles nommés en une seule fois. C'est également la méthode standard pour préparer des données pour des requêtes 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 });
});

Seuls les contrôles qui ont un attribut name sont inclus, ce qui reflète la façon dont un navigateur soumet nativement un formulaire.

Validation et prévention du comportement par défaut

Valider les données du formulaire

La validation côté client peut être effectuée pour s'assurer de la correction des données avant la soumission du formulaire.

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

Essayez vous-même »

Cet exemple illustre la validation de formulaire côté client, notamment la vérification des champs obligatoires et du format de l'e-mail, ainsi que la prévention de la soumission du formulaire si la validation échoue.

Info

Utilisez querySelector et querySelectorAll pour une sélection efficace des éléments de formulaire, et validez toujours les valeurs saisies avant la soumission du formulaire afin de garantir l'intégrité des données et une expérience utilisateur fluide.

Avertissement

La validation côté client améliore l'expérience utilisateur, mais ne remplace pas la validation côté serveur. Validez et assainissez toujours les données sur votre backend également.

Conclusion

Travailler avec des formulaires en JavaScript implique d'accéder aux éléments de formulaire, d'obtenir et de définir des valeurs de saisie, de collecter des données avec FormData, de gérer les événements de formulaire et de valider les données du formulaire. En maîtrisant ces techniques, vous pouvez créer des formulaires web dynamiques et réactifs qui améliorent l'interaction utilisateur et la collecte de données. Pour aller plus loin, explorez Formulaires : événement et méthode submit et Propriétés et méthodes des formulaires.

Pratique

Lesquelles des affirmations suivantes concernant la gestion des formulaires en JavaScript sont vraies ?

Vous pouvez accéder aux éléments de formulaire en utilisant la collection document.forms.Les éléments de formulaire peuvent être accédés par leur attribut name.La méthode submit() peut être utilisée pour déclencher la soumission d'un formulaire par programmation.L'attribut action d'un formulaire spécifie où les données du formulaire doivent être envoyées.La méthode reset() efface toutes les saisies utilisateur dans le formulaire.La propriété innerHTML est couramment utilisée pour obtenir les valeurs d'un formulaire.