Lire les valeurs des champs
Accédez aux valeurs des champs texte, cases à cocher et listes de sélection.
Lire les valeurs des champs est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.
Travailler avec les données de formulaire
Les formulaires recueillent les données saisies par l’utilisateur au moyen de champs comme les zones de texte, les cases à cocher, les boutons radio et les listes déroulantes. Chacun expose ses données d’une manière légèrement différente.
input.value
Les champs de type texte exposent leur contenu actuel via la propriété value, qui est toujours une chaîne.
const name = document.querySelector("#name");
console.log(name.value);La valeur est toujours une chaîne
Même les champs numériques renvoient une chaîne. Effectuez une conversion explicite lorsque vous avez besoin d’un nombre.
const age = document.querySelector("#age");
const n = Number(age.value);valueAsNumber
Les champs numériques et de date proposent valueAsNumber, qui renvoie directement un nombre, ou NaN si la valeur est vide ou invalide.
const qty = document.querySelector("#qty");
console.log(qty.valueAsNumber);checkbox.checked
Les cases à cocher indiquent leur état via la propriété booléenne checked, et non via value.
const agree = document.querySelector("#agree");
console.log(agree.checked); // true or falseBoutons radio
Dans un groupe de boutons radio, recherchez celui qui est coché. La propriété checked identifie l’option sélectionnée.
const selected = document.querySelector("input[name=plan]:checked");
console.log(selected ? selected.value : "none");Valeur d’une liste déroulante
Une liste déroulante à sélection unique expose l’option choisie via value.
const country = document.querySelector("#country");
console.log(country.value);Sélection multiple
Pour une sélection multiple, lisez selectedOptions, puis récupérez les valeurs.
const langs = document.querySelector("#langs");
const values = [...langs.selectedOptions].map((o) => o.value);L’événement input
Écoutez l’événement input pour réagir à chaque frappe ou modification en temps réel.
name.addEventListener("input", (e) => {
console.log(e.target.value);
});L’événement de modification
L’événement change se déclenche lorsqu’un champ perd le focus après la modification de sa valeur, ou immédiatement pour les cases à cocher et les listes déroulantes.
country.addEventListener("change", (e) => {
console.log("chose " + e.target.value);
});FormData
FormData recueille en une seule fois tous les champs nommés d’un formulaire, ce qui est idéal pour les envoyer à un serveur.
const form = document.querySelector("form");
const data = new FormData(form);
console.log(data.get("name"));Vérification rapide
Lisez correctement l’état de la case à cocher.
Récapitulatif
Lisez les champs texte via value, toujours une chaîne, et utilisez valueAsNumber pour les nombres. Lisez les cases à cocher et les boutons radio via checked, et les listes déroulantes via value ou selectedOptions. Réagissez avec l’événement input, à chaque modification, ou l’événement change, lors de la validation de la modification, et rassemblez toutes les données en une fois avec FormData.
Questions Fréquemment Posées
La leçon « Lire les valeurs des champs » est-elle gratuite ?
Oui — le texte complet de « Lire les valeurs des champs » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Lire les valeurs des champs » ?
Accédez aux valeurs des champs texte, cases à cocher et listes de sélection. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer JavaScript Academy ?
Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Lire les valeurs des champs » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?
Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Lire les valeurs des champs
- L’événement submit
- Validation côté client
- L’API de validation des contraintes