Formulaires JavaScript dans le DOM
Les formulaires sont des composants fondamentaux des applications web, permettant l'interaction utilisateur et la collecte de données. Ce guide vous aidera à comprendre comment accéder aux éléments de formulaire, obtenir et définir les valeurs des champs, gérer les événements de formulaire et valider les formulaires.
Accès aux éléments de formulaire
Sélection des éléments de formulaire
Les éléments de formulaire peuvent être sélectionnés à l'aide de diverses méthodes telles que getElementById, getElementsByName, getElementsByTagName et querySelector.
<!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>Cet exemple montre comment sélectionner des éléments de formulaire à l'aide de différentes méthodes et afficher leurs valeurs dans une alerte lors du clic sur le bouton « Afficher les valeurs des champs ».
Obtention et définition des valeurs des champs
Accès et modification des valeurs des champs
Les valeurs des champs 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>Cet exemple montre comment obtenir et définir les valeurs des champs de saisie. Cliquer sur « Afficher les valeurs » affiche les valeurs actuelles, et « Définir de nouvelles valeurs » les modifie et affiche une alerte de confirmation.
Événements de formulaire
Gestion de la soumission de formulaire 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>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.
Gestion des 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 lorsque l'utilisateur tape, tandis que change se déclenche lorsque l'élément perd le focus après une modification de sa valeur.
<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>Validation et prévention du comportement par défaut
Validation des données du formulaire
Une validation côté client peut être effectuée pour garantir l'exactitude 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>Cet exemple illustre la validation de formulaire côté client, y compris les champs obligatoires et la validation du format de l'e-mail, ainsi que la prévention de la soumission en cas d'échec de la validation.
INFO
Utilisez querySelector et querySelectorAll pour une sélection efficace des éléments de formulaire, et validez toujours les valeurs des champs avant la soumission du formulaire pour garantir l'intégrité des données et une expérience utilisateur fluide.
WARNING
La validation côté client améliore l'expérience utilisateur, mais ne remplace pas la validation côté serveur. Validez et nettoyez toujours les données sur votre backend également.
Conclusion
La manipulation des formulaires en JavaScript implique l'accès aux éléments de formulaire, l'obtention et la définition des valeurs des champs, la gestion des événements de formulaire et la validation des données. 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.
Pratique
Parmi les affirmations suivantes concernant la gestion des formulaires en JavaScript, lesquelles sont vraies ?