<form>, <input>, <button>, <select>), méthodesclick, dblclick,mousedown, mouseup, mousemove,mouseenter, mouseleave. Idem au clavier :keydown, keyup, keypress.]]>mouseDown]]>onclick]]>click]]>click est le nomel.addEventListener("click", ...).]]>tap]]>action quand l'utilisateur soumet (par<button type="submit"> ou en<send>]]><form>]]><form> regroupe lesactionmethod (GET/POST).]]><input>]]><input> est un champ de<formulaire>]]><input> : text,password, email, number, date,checkbox, radio, submit, file.]]><textbox name="champ">]]><text size="20">]]><input type="text">]]><input> est polyvalente,type détermine son apparence et son<entry>]]>submit<form>),reset (réinitialise les champs), button<button type="submit">Envoyer</button>]]><button> est plus<input type="submit"> est<a>Envoyer</a>]]><a> est un lien, pas un<button type="button">Envoyer</button>]]>type="button" crée un boutontype="submit".]]><submit>Envoyer</submit>]]>submittype, pas<datalist> (suggestions sur unmultiple sur <select><list>]]><select>]]><select> est le<option value="...">texte</option><dropdown>]]><combo>]]><label> ?]]><label> associé. Sans label, les<label for="nomChamp">...</label> et<input id="nomChamp">.]]><strong> ou <b>.]]><h1>...<h6>.]]><label> agit sur laevent.preventDefault() dans lesend]]>submit]]>submit<form>. À écouter pourchange]]>click]]>submit.]]>type="password"]]>type="password" masque seulement lesname essentiel : c'est sousname, le champ n'est pas envoyé.]]><form action="/save" method="POST">
<label for="nom">Nom :</label>
<input id="nom" type="text">
<button type="submit">Envoyer</button>
</form>]]>name surname, la donnée saisie<form action="/save">
<label for="nom">Nom :</label>
<input id="nom" name="nom" type="text">
<button type="submit">Envoyer</button>
</form>]]>method, le<form action="/save" method="POST">
Nom : <input name="nom" type="text">
<input type="button" value="Envoyer">
</form>]]>type="button" crée un boutontype="submit" (ou<button> dont le type par défaut est<form action="/save" method="POST">
<label for="nom">Nom :</label>
<input id="nom" name="nom" type="text">
<button type="submit">Envoyer</button>
</form>]]><form> avec action et<label> lié à <input> parfor/id, name (essentiel pourhandleClick aubtn ?]]>addEventListener surbtn.onclick = handleClick : on peut attacherbtn.onclick(handleClick)]]>onclick est une propriété,btn.onclick = handleClick.]]>btn.click(handleClick)]]>btn.click() déclenche lebtn.addEventListener("click", handleClick)]]>btn.attachEvent("onclick", handleClick)]]>attachEvent est l'ancienne APIaddEventListener.]]><input id="nom"> ?]]>el.value =
"nouveau". Pour les cases à cocher et lesel.checked (booléen).]]>document.getElementById("nom").text]]>value, pas text.]]>document.getElementById("nom").innerHTML]]>innerHTML est pour le contenudocument.getElementById("nom").content]]>document.getElementById("nom").value]]>value est la propriété<input>, <select>, <textarea>).]]>event.preventDefault() dans unform.addEventListener("submit", e => {
if (!valider()) e.preventDefault();
});<a>) afin de gérerwindow.close().preventDefaultconsole.clear(). LapreventDefaultmin, max, minlength, maxlength,type="email", etc.]]>mandatory="true"]]>required]]><input required> activemust-fill]]><input> est le plus adaptétype améliore l'ergonomietype="number"]]>type="text"]]>type="email"]]>type="age"]]>event.target désigne l'élément sur lequelevent.dom]]>this.element]]>this.element n'existe pas.event.target.]]>event.target]]>event.element]]>name est-il important<input> ?]]>id (unique, pour CSSclass (pour CSS et JS, partagé),name (pour la soumission du formulaire).]]><label>.]]>name, le champnom=Alice&age=17 àname.]]><textarea> n'est pasvalue).]]><paragraph contenteditable>]]><textarea>contenu initial</textarea>]]>rows, cols, placeholder,maxlength.]]><text>multiligne</text>]]><input type="text" multiline>]]>multiline n'existe pas comme<input>.]]>input et change sur un <input type="text"> ?]]>input ; validation à la fin → change ;submit (sur leinput à chaque touche, change à la fin]]>input est pluschange plus économe.]]>change plante systématiquement toujours]]>changeinput n'existe pas]]>/save, que se passe-t-il côté navigateur ?]]>action du formulaire.]]>/save, puis la réponse s'affiche]]><p id="zone">Survolez-moi</p> et le script :
const zone = document.getElementById("zone");
zone.addEventListener("mouseover", () => {
zone.textContent = "Dedans";
});
zone.addEventListener("mouseout", () => {
zone.textContent = "Dehors";
});L'utilisateur amène le pointeur sur le paragraphe, clique deux
fois dessus, puis éloigne le pointeur. Qu'affiche alors le
paragraphe ?
mouseover à l'arrivéemouseout à son départ, click aumouseover ni mouseout.]]>Dehors]]>mouseover (texte Dedans), les clics ne déclenchentmouseout, qui écrit Dehors.]]>Dedans]]>mouseoutDehors.]]>Survolez-moi]]>mouseout, écritDehors.]]>DedansDehors]]>textContent remplace tout le texteDehors.]]>name manque sur l'<input>]]><input id="nom"> ne suffit pas ; il<input name="nom"> (l'id n'est<form action="http://exemple.fr/connexion" method="post">L'adresse commence par http:// et non par https://. Que
risque l'utilisateur qui envoie son mot de passe ?
method="post"https://]]>addEventListener]]>addEventListenername d'un champ est essentiel pour la soumission au serveur]]>name, pas envoyé.]]>type choisir pour un champ destiné àemail, tel, url, number, date, color,password.]]>type="contact"]]>contact n'est pas un type d'inputtype="email"]]>@), affiche un clavier adapté surtype="text"]]>type="address"]]>address n'est défini paremail.]]>minlength/maxlength (longueur de la chaîne),min/max (valeur numérique ou date). Laobligatoire]]>required.]]>empty=false]]>required se passe derequired]]>required à un champmandatory]]>mandatory n'estrequiredboutique.fr : le serveurSet-Cookie: panier=42.Set-Cookie dans laCookie dansCookie: panier=42, ajouté automatiquement par le navigateur]]>boutique.fr les cookies que ce site lui aSet-Cookie: panier=42, renvoyé tel quel au serveur]]>Set-Cookie est un en-tête de réponse, du serveurCookie.]]>panier=42, envoyé aussi à tous les autres sites visités ensuite]]>form lorsquesubmit sur le formulaire couvre tous les moyens d'envoi,submit]]>submit est émis par le formulaire lui-même,click]]>click est émis par le bouton, pas par le formulaire,send]]>input]]>input est émis à chaque modification d'un champ.]]>const nom = document.getElementById("nom").value;
document.getElementById("btn").addEventListener("click", function () {
alert("Bonjour " + nom);
});nom reçoit la valeur du champ au moment où le.value à l'intérieuralert ne peut pas afficher une variable, seulement un texte fixe]]>alert affiche n'importe quelle chaîne.]]>nom n'a pas d'attribut name, donc pas de valeur]]>name sert à l'envoi, pas à la lecture de .value.]]>keydown, comment savoirevent d'un gestionnaire décrit ce qui s'est passé :event.key]]>key, par exemple "Enter" ou "a".]]>event.value]]>value est une propriété des champs de saisie, pas dekeyboard.last()]]><input placeholder="Votre nom"> et<input value="Votre nom"> ?]]>placeholder aide l'utilisateur sans rien envoyer ; une valueplaceholder n'est pas une valeur, elle n'estvalue est le contenu réel du champ, envoyé telvalue est transmis.]]>required.]]><input type="number" min="0" max="20" name="note">min et max bornent, ils n'arrondissent pas ; step