Ce guide explorera les différentes manipulations de formulaire en JavaScript, en mettant l’accent sur les bonnes pratiques à suivre.
💡 Les formulaires sont des éléments essentiels dans le développement web, permettant aux utilisateurs d’entrer des données et d’interagir avec une application. JavaScript est souvent utilisé pour ajouter des fonctionnalités dynamiques et améliorer l’expérience utilisateur des formulaires.
Avant de pouvoir manipuler un formulaire en JavaScript, vous devez d’abord créer la structure HTML de votre formulaire. Voici un exemple de formulaire simple :
<form id="monFormulaire">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom"><br>
<label for="email">Email :</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Envoyer">
</form>// Accès à l'élément formulaire
const formulaire = document.getElementById('monFormulaire');
// Accès aux champs du formulaire
const nomInput = document.getElementById('nom');
const emailInput = document.getElementById('email');// Validation du formulaire avant soumission
formulaire.addEventListener('submit', function(event) {
if (nomInput.value === '' || emailInput.value === '') {
alert('Veuillez remplir tous les champs.');
event.preventDefault(); // Empêcher la soumission du formulaire
}
});// Traitement des données soumises
formulaire.addEventListener('submit', function(event) {
event.preventDefault(); // Empêcher la soumission du formulaire pour cet exemple
const nom = nomInput.value;
const email = emailInput.value;
// Effectuer des actions avec les données (ex: envoyer à un serveur)
console.log('Nom:', nom);
console.log('Email:', email);
// Réinitialiser le formulaire
formulaire.reset();
});Toujours valider les données du formulaire à la fois côté client (en JavaScript) et côté serveur pour garantir la sécurité et l’intégrité des données.
Assurez-vous que votre formulaire est accessible aux utilisateurs handicapés en ajoutant des attributs aria et en utilisant une structure HTML sémantique.
Fournissez un feedback visuel à l’utilisateur lors de la soumission du formulaire, en affichant des messages d’erreur ou de confirmation.
Protégez votre formulaire contre les attaques courantes telles que les injections XSS en filtrant et en validant toutes les données soumises.
Optimisez la performance de votre formulaire en limitant le nombre de champs et en utilisant des techniques telles que la mise en cache des données soumises.
En suivant ces bonnes pratiques et en comprenant les manipulations de formulaire en JavaScript, vous serez en mesure de créer des formulaires interactifs et sécurisés pour vos applications web.
<form id="monFormulaire">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom"><br>
<label for="email">Email :</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Envoyer">
</form>
<script>
const formulaire = document.getElementById('monFormulaire');
const nomInput = document.getElementById('nom');
const emailInput = document.getElementById('email');
formulaire.addEventListener('submit', function(event) {
if (nomInput.value === '' || emailInput.value === '') {
alert('Veuillez remplir tous les champs.');
event.preventDefault();
}
});
</script><form id="monFormulaire">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom"><br>
<label for="email">Email :</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Envoyer">
</form>
<script>
const formulaire = document.getElementById('monFormulaire');
const nomInput = document.getElementById('nom');
const emailInput = document.getElementById('email');
formulaire.addEventListener('submit', function(event) {
event.preventDefault();
const nom = nomInput.value;
const email = emailInput.value;
console.log('Nom:', nom);
console.log('Email:', email);
formulaire.reset();
});
</script><form id="monFormulaire">
<label for="password">Mot de passe :</label>
<input type="password" id="password" name="password"><br>
<label for="confirmPassword">Confirmer le mot de passe :</label>
<input type="password" id="confirmPassword" name="confirmPassword"><br>
<input type="submit" value="Envoyer">
</form>
<script>
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirmPassword');
confirmPasswordInput.addEventListener('input', function() {
const password = passwordInput.value;
const confirmPassword = confirmPasswordInput.value;
if (password !== confirmPassword) {
confirmPasswordInput.setCustomValidity("Les mots de passe ne correspondent pas");
} else {
confirmPasswordInput.setCustomValidity('');
}
});
</script>Ces exemples illustrent différentes fonctionnalités de manipulation de formulaire en JavaScript, notamment la validation, la manipulation des données soumises et la validation en temps réel.
<form id="monFormulaire">
<label for="codePostal">Code Postal :</label>
<input type="text" id="codePostal" name="codePostal"><br>
<input type="submit" value="Envoyer">
</form>
<script>
const formulaire = document.getElementById('monFormulaire');
const codePostalInput = document.getElementById('codePostal');
formulaire.addEventListener('submit', function(event) {
const codePostal = codePostalInput.value;
const codePostalRegex = /^[0-9]{5}$/; // Format: 5 chiffres
if (!codePostalRegex.test(codePostal)) {
alert('Veuillez entrer un code postal valide.');
event.preventDefault();
}
});
</script><form>
<label for="pays">Pays :</label>
<input type="text" id="pays" name="pays"><br>
<label for="villes">Villes :</label>
<select id="villes" name="villes" multiple></select><br>
<input type="submit" value="Envoyer">
</form>
<script>
const paysInput = document.getElementById('pays');
const villesSelect = document.getElementById('villes');
const villes = ['Paris', 'Londres', 'New York', 'Tokyo', 'Sydney'];
paysInput.addEventListener('input', function() {
const searchTerm = paysInput.value.toLowerCase();
const filteredVilles = villes.filter(ville => ville.toLowerCase().includes(searchTerm));
villesSelect.innerHTML = '';
filteredVilles.forEach(ville => {
const option = document.createElement('option');
option.value = ville;
option.textContent = ville;
villesSelect.appendChild(option);
});
});
</script><form id="monFormulaire">
<div id="champsDynamiques"></div>
<button type="button" id="ajouterChamp">Ajouter un champ</button><br>
<input type="submit" value="Envoyer">
</form>
<script>
const formulaire = document.getElementById('monFormulaire');
const champsDynamiquesDiv = document.getElementById('champsDynamiques');
const ajouterChampButton = document.getElementById('ajouterChamp');
let count = 1;
ajouterChampButton.addEventListener('click', function() {
const input = document.createElement('input');
input.type = 'text';
input.name = 'champ_' + count++;
champsDynamiquesDiv.appendChild(input);
});
</script>Ces exemples avancés démontrent des techniques plus élaborées de manipulation de formulaire en JavaScript, telles que la validation avec des expressions régulières, l’autocomplétion de champs basée sur la saisie de l’utilisateur, et l’ajout dynamique de champs de formulaire.
💡 Cas particuliers de manipulation de formulaire en JavaScript qui peuvent être utiles dans des situations spécifiques
<form id="monFormulaire">
<input type="checkbox" id="autorisation" name="autorisation"> Autorisation<br>
<input type="text" id="commentaire" name="commentaire" disabled><br> <!-- Champ désactivé par défaut -->
<input type="submit" value="Envoyer">
</form>
<script>
const autorisationCheckbox = document.getElementById('autorisation');
const commentaireInput = document.getElementById('commentaire');
autorisationCheckbox.addEventListener('change', function() {
commentaireInput.disabled = !this.checked; // Activer/désactiver le champ commentaire en fonction de la case cochée
});
</script><form id="monFormulaire">
<input type="hidden" id="idUtilisateur" name="idUtilisateur" value="123">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom"><br>
<input type="submit" value="Envoyer">
</form>
<script>
const formulaire = document.getElementById('monFormulaire');
const idUtilisateurInput = document.getElementById('idUtilisateur');
formulaire.addEventListener('submit', function() {
// Ajoutez des manipulations supplémentaires ici, par exemple, envoyer l'ID utilisateur avec les données soumises
});
</script><form id="monFormulaire">
<label for="photo">Photo :</label>
<input type="file" id="photo" name="photo"><br>
<input type="submit" value="Envoyer">
</form>
<script>
const formulaire = document.getElementById('monFormulaire');
const photoInput = document.getElementById('photo');
formulaire.addEventListener('submit', function(event) {
const photo = photoInput.files[0];
if (photo) {
console.log('Nom de fichier:', photo.name);
console.log('Taille de fichier:', photo.size);
console.log('Type de fichier:', photo.type);
}
});
</script>Ces exemples montrent comment gérer des cas particuliers de manipulation de formulaire en JavaScript, tels que la gestion des champs masqués ou désactivés, l’utilisation de champs de formulaire cachés, et l’utilisation de champs de formulaire de type « file » pour téléverser des fichiers.
Un entretien d’embauche ressemble rarement à une conversation ordinaire. Derrière des questions en apparence simples…
Préparez efficacement votre entretien commercial avec 140 questions clés et 12 mises en situation concrètes…
Un entretien d’embauche crée souvent une impression particulière. Quelques minutes avant d’entrer dans la salle…
Dans le bâtiment, un devis représente souvent le premier véritable contact entre une entreprise et…
Dans un EHPAD, chaque candidature révèle une manière d’être autant qu’un savoir-faire. Derrière la lettre…
Télécharger des modèles et exemples Word de lettres de motivation pour mutation interne ⬇️ Au…
This website uses cookies.