Chargement...

Formulaires en JavaScript

Le comptoir du thé a un bon. Le formulaire est #slip. Il contient un champ texte #guest dont le name est aussi guest, un champ nombre #cups dont le name est aussi cups, et un bouton #send avec type="submit". Dessous, #note dit encore blank.
Un formulaire rassemble des champs nommés. Ce qui est saisi est dans value, et c’est toujours du texte, même si le type est number. L’envoi est l’événement submit sur le formulaire. Sans preventDefault, le navigateur charge l’adresse du formulaire et cette page part. Ce bon appelle preventDefault, donc la note reste lisible. La page met lida, met 2, clique une fois sur send, et la ligne devient lida / 2 / stayed.

Ce n’est pas la bande de tickets

La bande posait un écouteur de clic sur le parent et lisait event.target. Sa ligne était red / blue / gold / 1, sans preventDefault. La page de la plaque l’appelait sur un lien. Sa ligne était click / seal / plaque / true / quiet. Ce bon n’est ni l’un ni l’autre. Pas de bouton gold, pas de currentTarget. L’événement s’appelle submit. Ce qui compte, c’est lida et le texte 2.
getElementById("guest") trouve le champ par l’id. slip.elements.guest le trouve par le name, à travers le formulaire. Ici id et name sont le même mot. Une leçon plus tard vérifiera si le champ est vide. Pas celle-ci. Un invité vide part quand même.

Ce que le bon note

La note commence par blank. L’invité et les tasses sont vides. Le bouton dit toujours send. Lis les lignes dans l’ordre. Chaque extrait part du bon vide, sauf la ligne de page, qui est la démo en bas. Cette démo clique une fois sur send.

📊 Ce que le bon note

Moment Ce que tu lis Note Facile à confondre
invité mis à lida guest.value lida lire l’id guest
tasses mises à 2 cups.value 2, et c’est du texte attendre le nombre 2
clic sur send, la fonction écrit stayed la note stayed appeler slip.submit(), qui saute l’écouteur
les deux noms, via le formulaire elements.guest et elements.cups lida 2 lire elements.slip
script de la page la ligne lida / 2 / stayed red / blue / gold / 1

value ne transforme pas un champ nombre en nombre. Après avoir stocké 2, cups.value ce sont les caractères 2. typeof cups.value vaut "string". Si tu veux un nombre plus tard, tu convertis toi-même. Cette ligne ne le fait pas.
send.click() déclenche submit parce que le type du bouton est submit. slip.submit() est un autre appel : il envoie le formulaire et n’exécute pas ton écouteur. preventDefault n’a donc pas la parole. Cette page utilise le clic.

Deux chemins vers le même champ

getElementById("cups") utilise l’id. slip.elements.cups utilise le name, et seulement quand tu as déjà le formulaire. Ici les deux attributs sont le même mot. Si le name était count et l’id restait cups, elements.cups manquerait et le champ serait elements.count.

Le nom de l’invité

Le champ est vide au départ. Le script range lida dans value, puis relit cette propriété dans la note. Rien n’est encore envoyé.

Read the guest

javascript 
let guest = document.getElementById("guest");
let note = document.getElementById("note");
guest.value = "lida";
note.textContent = guest.value;
console.log(note.textContent);

Le journal est lida. L’id est guest. La note n’est pas le mot guest. C’est le texte qui se trouve dans value.

Combien de tasses

Bon neuf. Le champ des tasses est type="number". Range 2, lis value, puis demande typeof.

Read the cups as text

javascript 
let cups = document.getElementById("cups");
let note = document.getElementById("note");
cups.value = "2";
note.textContent = cups.value + " " + typeof cups.value;
console.log(note.textContent);

Le journal est 2 string. La case a l’air numérique, le script reçoit du texte. Range le nombre 2 sans guillemets : la propriété revient quand même comme le texte "2".

Le bouton d’envoi

Bon neuf. L’écouteur est sur le formulaire, pour submit. Il appelle preventDefault et écrit stayed. Ensuite la page clique sur send. Elle n’appelle pas slip.submit().

Stay on the page

javascript 
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function pour(event) {
event.preventDefault();
note.textContent = "stayed";
}
slip.addEventListener("submit", pour);
document.getElementById("send").click();
console.log(note.textContent);

Le journal est stayed. L’écouteur a tourné, le navigateur n’est pas parti. Appelle slip.submit() à la place du clic : pour ne tourne pas. La note reste blank.

Les noms sur le bon

Bon neuf, sans écouteur. Le script écrit les deux champs via slip.elements et le name, puis les joint dans la note.

Read both names

javascript 
let slip = document.getElementById("slip");
let note = document.getElementById("note");
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
note.textContent = slip.elements.guest.value + " " + slip.elements.cups.value;
console.log(note.textContent);

Le journal est lida 2. elements.guest est le champ dont le name est guest, pas un élément dont l’id est slip. L’espace ne fait que séparer la note. La ligne de page utilise ensuite /.

La ligne sous le bon

Le script est à la fin du body, après le formulaire et les paragraphes. mark commence à left. L’écouteur empêche l’envoi par défaut, copie les deux valeurs dans la note et met mark à stayed. Puis le script remplit lida et 2 et clique une fois sur send. La ligne s’écrit après ce clic.

Page demo — tea slip

html 
<!DOCTYPE html>
<html>
<head>
<title>forms — page</title>
</head>
<body>
<form id="slip">
<input id="guest" name="guest" type="text">
<input id="cups" name="cups" type="number">
<button id="send" type="submit">send</button>
</form>
<p id="note">blank</p>
<p id="line">…</p>
<script>
let slip = document.getElementById("slip");
let note = document.getElementById("note");
let mark = "left";
function pour(event) {
event.preventDefault();
note.textContent =
slip.elements.guest.value + " / " + slip.elements.cups.value;
mark = "stayed";
}
slip.addEventListener("submit", pour);
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
document.getElementById("send").click();
document.getElementById("line").textContent =
note.textContent + " / " + mark;
</script>
</body>
</html>

La ligne est lida / 2 / stayed. Le premier mot est l’invité, le deuxième les tasses en texte, le dernier mark. L’écouteur a tourné, donc stayed et non left. La note finit sur lida / 2. blank a disparu. La ligne des tickets est une autre page. Ce bon ne vérifie pas que les champs sont remplis.

Au comptoir

  1. Range lida dans l’invité et lis value. La note est lida.
  2. Range 2 dans les tasses et lis value avec typeof. La note est 2 string.
  3. Écoute submit, appelle preventDefault et clique send. La note est stayed.
  4. Lis les deux champs avec slip.elements. Puis la ligne : lida / 2 / stayed.

Ratés au comptoir

Les libellés restent guest, cups et send. La note n’est pas le mot slip.

  • Prendre cups.value pour le nombre 2
  • Appeler slip.submit() et attendre pour
  • Oublier preventDefault, et le navigateur charge l’adresse
  • Lire l’id guest alors que tu voulais value
  • Chercher slip.elements.slip
  • Vérifier les champs vides ou les motifs sur cette page
  • Lire la ligne comme red / blue / gold / 1

Garde ceci

  • Après avoir rangé lida, guest.value vaut lida
  • cups.value est le texte 2, et typeof vaut "string"
  • send.click() lance l’écouteur submit ; slip.submit() non
  • preventDefault est la raison pour laquelle la page est encore là et la note peut dire stayed
  • slip.elements.guest et slip.elements.cups lisent les champs nommés
  • La ligne de page est lida / 2 / stayed

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
7
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 53 de 55
Javascript Tutoriel