6 - Gérer sur le client
Dans l'activité précédente, vous avez appris à
- créer des formulaires en html en utilisant la balise <form> et
- les configurer pour qu'ils transmettent les réponses de l'utilisateur via une requête GET ou POST.
Vous allez voir aujourd'hui comment contrôler le formulaire localement avec Javascript, de façon à vérifier la validité des réponses avant envoi. On peut le faire extrêmement facilement et c'est l'un des points forts des formulaires.
Logiciels : Il faudra utiliser un éditeur de code. Atom, Notepad++ sur Windows, Notepadqq sur Linux ou SublimText sont des choix valides.
Prérequis : Javascript-Création des formulaires
Evaluation ✎ : questions 02-04-06-13
1 - getElementById et innerHTML
Avant de revoir la manière très rapide d'agir localement sur les formulaires, commençons par faire un court rappel sur la méthode générale en utilisant les identifiants et la méthode getElementById.
Rappel : Méthode getElementById
Si une balise possède un attribut nommé id, on peut parvenir à récupérer la référence de cette balise depuis un script Javascript qui s'exécute sur la machine du client.
HTML 1 | <p id="toto">Voici un texte</p>
|
JS 1 | var reference = document.getElementById("toto");
|
Rappel : Accès aux contenus internes avec innerHTML
Pour accéder au contenu interne d'une balise possédant une balise d'ouverture et une balise de fermeture, il faut utiliser l'attribut innerHTML.
HTML 1 | <p id="toto">Voici un texte</p>
|
JS1
JS2 | var reference = document.getElementById("toto");
var contenu = reference.innerHTML;
|
En exécutant ce code, la variable contenu va alors contenir Voici un texte.
On peut même faire plus court de cette façon :
JS1 | var contenu = document.getElementById("toto").innerHTML;
|
01° Utiliser l'interface ci-dessous.
Voici le texte qu'on veut modifier
En regardant le code JS, voir si le résultat visuel correspond bien au code.
11
13 | <p id="toto">Voici le texte qu'on veut modifier</p>
<input type="button" onclick="lancer_la_modification();" value="Modifier">
|
21
22
23
24
25
26 | function lancer_la_modification() {
var reference = document.getElementById('toto');
reference.innerHTML = "UN NOUVEAU TEXTE APPARAIT";
reference.style.color = '#FFFFFF';
reference.style.backgroundColor = '#770000';
}
|
On voit donc qu'on crée un bouton qui permet de déclencher une fonction javascript nommée lancer_la_modification lorsqu'on clique sur ce bouton.
...CORRECTION...
Ligne 22 : on récupère la référence de la balise qu'on veut modifier.
Ligne 23 : on utilise la référence pour modifier le contenu interne de cette balise.
Ligne 24 : on modifie la couleur RGB du texte (du blanc, #FFFFFF).
Ligne 25 : on modifie la couleur RGB du fond (du rouge assez foncé #770000).
✎ 02° Analyser le code suivant et donner le contenu de la variable du code JS.
1
2 | <p id="a">Voici le <span id="b">texte</span> qu'on veut afficher</p>
<p id="c">Et ici, nous avons un autre <strong id="d">truc</strong>.</p>
|
1 | var contenu = document.getElementById("c").innerHTML;
|
- A :
Erreur - B :
truc - C :
Et ici, nous avons un autre <strong id="d">truc</strong>. - D :
Et ici, nous avons un autre
2 - Attributs Name
03° Utiliser le code ci-dessous (sans l'analyser pour une fois) pour visualiser les changements obtenus dès qu'on modifie l'un des éléments du formulaire.
Le menu déroulant permet de choisir la couleur de fond.
Le menu de choix de couleur permet de choisir la couleur d'écriture. Il faudra peut-être cliquer sur la pipette ou autre. Cela dépend du navigateur, de sa version ect...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 | <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href='monstyle.css' />
<meta charset="utf-8" />
</head>
<body>
<h1>Utilisation de name</h1>
<form name="formulaire">
<select name="couleur_fond" onchange='formulaire.zone_de_texte.style.backgroundColor = couleur_fond.value;'>
<option value="red">Rouge</option>
<option value="#0000FF">Bleu</option>
<option value="yellow">Jaune</option>
</select>
<input type="color" name="couleur_texte" onchange='zone_de_texte.style.color = formulaire.couleur_texte.value;'>
<input type="text" name="zone_de_texte" value="Rien de spécial à dire">
</form>
</body>
</html>
|
Après avoir créé cette page localement chez vous, vous devriez avoir ceci :
Question : les modifications sont-elles purement locales (sur l'ordinateur client uniquement) ou envoie-t-on des informations vers le serveur ?
...CORRECTION...
Les modifications sont purement locales. Aucun autre ordinateur ne reçoit d'informations immédiates sur les modifications que vient de faire l'utilisateur.
L'ordinateur du client a reçu un fichier HTML initialement et ne fait qu'exécuter localement le javascript lié.
C'est lorsqu'on appuie sur un bouton SUBMIT que le navigateur soumet une nouvelle requête au serveur. Requête dans laquelle il place les choix de l'utilisateur.
Si vous regardez le code, vous pourrez voir que cela fonctionne sans mettre un seul getElementById !
Récupérer la référence d'un formulaire : Attribut name
Votre document HTML peut trouver facilement les références des formulaires s'ils possèdent un attribut name.
Prenons ce formulaire simple comportant la balise form dans laquelle se trouve une balise select et deux balises orphélines input :
1
2
3
4
5
6
7
8
9 | <form name="azerty" onclick='azerty.style.backgroundColor = "red";'>
<select name="couleur_fond">
<option value="red">Rouge</option>
<option value="#0000FF">Bleu</option>
<option value="yellow">Jaune</option>
</select>
<input type="color" name="couleur_texte">
<input type="text" name="zone_de_texte">
</form>
|
La simple déclaration d'un attribut name sur une balise form va provoquer la création d'une variable Javascript nommée azerty qui va contenir la référence de la balise form !
On peut alors accéder dans Javascript à cette réference en tapant simplement azerty ou document.azerty.
L'attribut onclick associe ensuite un code javascript à l'événement 'clic sur le formulaire'.
onclick='azerty.style.backgroundColor = "red";'
On indique donc d'aller chercher la référence de la balise form nommée azerty et d'en changer le style. Simple et efficace.
Le résultat en image
✎ 04° Analyser le code suivant. Expliquer clairement l'effet qui est produit à l'écran par l'appui sur le premier bouton. En gros, pourquoi agit-on sur le formulaire du bas avec le bouton du haut ?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 | <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href='monstyle.css' />
<meta charset="utf-8" />
</head>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href='monstyle.css' />
<meta charset="utf-8" />
</head>
<body>
<h1>Utilisation de name</h1>
<form name="premier">
<input type="text" name="zone_de_texte" value="test">
<input type="button" value="En rouge" onclick="second.style.backgroundColor='red';">
</form>
<form name="second">
<input type="text" name="zone_de_texte" value="test">
<input type="button" value="En bleu" onclick="premier.style.backgroundColor='blue';">
</form>
</body>
</html>
|
Le résultat obtenu
Vous savez maintenant récupérer la référence d'un formulaire de façon à modifier ses attributs. Revoyons le cas des réponses.
Récupérer la référence d'une réponse dans un formulaire : Attribut name
Il suffit de fournir le nom du formulaire suivi d'un point et du nom de votre balise. Et on obtient la référence voulue.
1
2
3
4
5
6
7
8
9 | <form name="azerty" onclick='azerty.style.backgroundColor = "red";'>
<select name="couleur_fond">
<option value="red">Rouge</option>
<option value="#0000FF">Bleu</option>
<option value="yellow">Jaune</option>
</select>
<input type="color" name="couleur_texte">
<input type="text" name="zone_de_texte">
</form>
|
Pour accéder à la référence
- du menu déroulant, on tape ceci dans javascript :
azerty.couleur_fond. - du widget permettant de choisir une couleur, on tape ceci dans javascript :
azerty.couleur_texte. - de la zone de texte finale, on tape ceci dans javascript :
azerty.zone_de_texte.
05° Analyser le code suivant. Que provoque l'appui sur le bouton Alors ? ?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 | <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href='monstyle.css' />
<meta charset="utf-8" />
</head>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href='monstyle.css' />
<meta charset="utf-8" />
</head>
<body>
<h1>Utilisation de name</h1>
<form name="qwerty">
<select name="couleur_fond">
<option value="red">Rouge</option>
<option value="#0000FF">Bleu</option>
<option value="yellow">Jaune</option>
</select>
<input type="color" name="couleur_texte">
<input type="text" name="zone_de_texte">
<input type="button" value="Alors ?" name="mon_bouton" onclick="mystere()">
</form>
<script>
function mystere() {
if (qwerty.couleur_texte.type == "text") {
qwerty.couleur_texte.type = "color";
qwerty.mon_bouton.style.backgroundColor = "red";
qwerty.mon_bouton.style.color = 'yellow';
} else {
qwerty.couleur_texte.type = "text";
qwerty.mon_bouton.style.backgroundColor = "blue";
qwerty.mon_bouton.style.color = 'white';
}
}
</script>
</body>
</html>
|
Le résultat visuel, au cas où n'auriez pas la possibilité de créer un fichier HTML :
3 - Attribut value
Accèder aux réponses choisies par l'utilisateur : attribut value
Les balises de formulaires ont pour tâche de stocker le choix de l'utilisateur avant de l'envoyer vers le serveur. Si on connait la réference en mémoire, on accède à la réponse-utilisateur en utilisant l'attribut value.
Prenons le cas du formulaire précédent :
1
2
3
4
5
6
7
8
9
10 | <form name="qwerty">
<select name="couleur_fond">
<option value="red">Rouge</option>
<option value="#0000FF">Bleu</option>
<option value="yellow">Jaune</option>
</select>
<input type="color" name="couleur_texte">
<input type="text" name="zone_de_texte">
<input type="button" value="Alors ?" name="mon_bouton" onclick="mystere()">
</form>
|
Pour accéder à la réponse de l'utilisateur, il faut utiliser ceci en Javascript :
- Pour le menu déroulant :
azerty.couleur_fond.value. - Pour le widget de choix de couleur :
azerty.couleur_texte.value. - Pour la zone de texte finale :
azerty.zone_de_texte.value.
Par exemple, si l'utilisateur choisit la réponse Jaune, azerty.couleur_fond.value renvoie yellow.
✎ 06° Que va renvoyer l'interpréteur pour reference.value si on choisit plutôt l'option Bleu ?
Evenements change et onchange
Le clic n'est pas l'événement principal sur un formulaire. En réalité, on utilise beaucoup plus souvent l'événement onchange qui permet de déclencher un événement à partir du moment où la réponse de l'utilisateur a changé.
Ainsi, si l'utilisateur clique sur un champ de formulaire mais sans le modifier, il n'y a pas d'appel à Javascript. L'appel ne se fait que lorsqu'il y a une modification effective.
07° Voici un formulaire qui affiche dans un pop-up la réponse-utilisateur stockée par l'une des balises dès que l'une des valeurs est modifiée.
Le bouton de droite vous permet lui d'afficher toutes les réponses.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 | <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href='monstyle.css' />
<meta charset="utf-8" />
</head>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href='monstyle.css' />
<meta charset="utf-8" />
</head>
<body>
<h1>Utilisation de name</h1>
<form name="formulaire_valeurs">
<select name="couleur_fond" onchange="reponse(formulaire_valeurs.couleur_fond);">
<option value="red">Rouge</option>
<option value="#0000FF">Bleu</option>
<option value="yellow">Jaune</option>
</select>
<input type="color" name="couleur_texte" onchange="reponse(formulaire_valeurs.couleur_texte);">
<input type="text" name="zone_de_texte" onchange="reponse(formulaire_valeurs.zone_de_texte);">
<input type="button" value="Les réponses" name="mon_bouton" onclick="affiche()">
</form>
<script>
function reponse(reference) {
alert(reference.value);
}
function affiche() {
alert(
formulaire_valeurs.couleur_fond.value + '\n' +
formulaire_valeurs.couleur_texte.value + '\n' +
formulaire_valeurs.zone_de_texte.value
);
}
</script>
</body>
</html>
|
Pour ceux qui ne peuvent pas créer le HTML :
Voilà pour la théorie. Nous allons maintenant voir à quoi ça peut servir.
Avant cela, petit rappel : le mot-clé this récupére la référence de l'objet qui gère l'événement.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 | <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href='monstyle.css' />
<meta charset="utf-8" />
</head>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href='monstyle.css' />
<meta charset="utf-8" />
</head>
<body>
<h1>Utilisation de name</h1>
<form name="formulaire_valeurs">
<select name="couleur_fond" onchange="reponse(this);">
<option value="red">Rouge</option>
<option value="#0000FF">Bleu</option>
<option value="yellow">Jaune</option>
</select>
<input type="color" name="couleur_texte" onchange="reponse(this);">
<input type="text" name="zone_de_texte" onchange="reponse(this);">
<input type="button" value="Les réponses" name="mon_bouton" onclick="affiche()">
</form>
<script>
function reponse(reference) {
alert(reference.value);
}
function affiche() {
alert(
formulaire_valeurs.couleur_fond.value + '\n' +
formulaire_valeurs.couleur_texte.value + '\n' +
formulaire_valeurs.zone_de_texte.value
);
}
</script>
</body>
</html>
|
08° Que va contenir this si l'événement correspond à la modification du choix dans le menu déroulant ?
...CORRECTION...
L'événement est géré par la balise select de la ligne 16.
this va donc contenir sa référence. C'est comme si on avait tapé formulaire_valeurs.couleur_fond.
4 - Validation
L'utilisation de Javascript sur les formulaires n'est pas destinée à la réalisation de jeu mais plutôt à la vérification des éléments fournis par l'utilisateur.
Vous avez vu avec l'activité sur la création des formulaires qu'un certain nombre de vérifications existent déjà sur la plupart des entrées de type texte. On peut ainsi vérifier qu'un texte correspond bien à un email ou pas. Mais comment faire pour vérifier par exemple que la date choisie pour un retour est bien ultérieure à la date choisie par le départ ?
Validation côté client
Valider les entrées du formulaire à l'aide des réglages HTML5 de base du navigateur ou à l'aide de contrôles javascript supplémentaires se nomme une validation côté client puisque les contrôles sont effectués via le navigateur du client.
Vérifier le formulaire avant l'envoi est important mais n'exonère pas de refaire une validation côté serveur. La vérification côté client permet simplement de garantir qu'un utilisateur bien intentionné ne puisse pas envoyer trop de demandes erronées au serveur.
A quoi sert la validation ;
- On s'assure que l'information corresponde au format des données attendu. Si vous voulez une date de naissance JJ/MM/AAAA et que certains vous envoient en toutes lettres
'23 mars de l'année 1998'ça risque de rendre la base de données difficilement exploitable) - On s'assure de la sécurité des données (par exemple, le mot de passe n'est pas assez fort)
- On s'assure de ne pas laisser passer d'entrées potentiellement malveillantes permettant de détourner les protections mises en place
Première raison de refuser l'envoi du formulaire : l'un des champs obligatoires est vide.
Ca, c'est facile, il suffit de rajouter un attribut nommé required et le formulaire ne sera pas envoyé tant que l'utilisateur ne l'aura pas rempli.Voici le code HTML du formulaire précédent.
1
2
3
4
5 | <form action='https://www.infoforall.fr/act/tester-le-post/' method='get' target="_blank">
<label>Veuillez fournir votre email :</label>
<input type="email" name="email" required><br>
<input type="submit" value="Envoyer !">
</form>
|
Oui mais si on permet à l'utilisateur de fournir soit un email, soit un numéro de téléphone ?
Dans ce cas précis, il faut falloir rajouter un peu de javascript de façon à activer ou désactiver la nécessité de l'un en fonction de la présence de l'autre.
09° Tester ce formulaire : on demande au choix un email ou un numéro de téléphone. Dès que l'un des deux est validé, on desactive l'autre. On peut alors faire un submit sans problème alors que les deux champs sont intialement notés obligatoires.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 | <form name="double" action='https://www.infoforall.fr/act/tester-le-post/' method='get' target="_blank">
<label>Veuillez fournir votre email :</label>
<input type="email" name="email" required onchange="verification()"><br>
<label>Veuillez fournir votre téléphone :</label>
<input type="tel" name="telephone" required onchange="verification()"
pattern="[0-9]{10}"><br>
<input type="submit" value="Envoyer !">
</form>
<script>
function verification() {
if (double.email.value != undefined && double.email.value != '') {
double.telephone.required = false;
alert('Telephone off');
} else {
double.telephone.required = true;
}
if (double.telephone.value != undefined && double.telephone.value != '') {
double.email.required = false;
alert('Email off');
} else {
double.email.required = true;
}
}
</script>
|
Voici l'interface qu'on peut obtenir :
Attributs HTML5 permettant de faire de la validation facilement
Vous avez maintenant rencontré une bonne part de ces attributs : required, type, min, max. Le code précédent contient un exemple de pattern qui permet d'imposer un schéma dans le texte fourni. Notons également minlength et maxlength qui impose un nombre de caractères minimum et maximum.
L'attribut pattern est très puissant puisqu'il permet de chercher n'importe quel type de schéma textuel dans la réponse. On parle d'expressions régulières. Elles ne sont pas difficiles à manier mais nécessitent plus qu'une simple question pour être maitrisées. Si vous voulez en apprendre plus, aller lire cet article de developer.mozilla.org en cherchant Validation selon une expression régulière.
Bien entendu, on peut savoir depuis le script Javascript si l'une des entrées est valide ou non pour l'instant et même rajouter des messages d'erreur maison.
Le but de cette activité n'est pas de faire de vous de pro de la validation mais juste de vous montrer qu'il est vraiment important de vérifier le formulaire avant l'envoi de façon à préserver le pauvre serveur. Sinon il pourrait crouler sous les requêtes inutiles.
Voici un dernier exemple traitant des dates de départ et d'arrivée invalides.
10° Tester l'interface ci-dessous. Tenter notamment de placer de mauvaises dates de départ et d'arrivée.
Tenter de valider le formulaire alors que les dates sont inversées. Que se passe-t-il ? Pensez-vous que ce soit prévu directement dans HTML5 ?
Voyons comment réalisé cela.
Attributs et méthodes Javascript : validity.valid
Le script javascript peut savoir si une réponse obligatoire va être validée par rapport aux règles HTML5 édictées dans la définition de la balise.
Pour cela, il faut utiliser validity.valid sur la référence de votre réponse.
Exemple ici avec un champ où on attend deux mots de 4 lettres séparés par un espace OU un tiret.
Sur chaque clic, on fait apparait le booléen qui correspond à ce test.
1
2
3
4
5
6 | <form name="formjsA">
<label>Deux mots de 4 lettres séparés par un espace</label>
<input type="text" name="deux" required
onclick="alert(formjsA.deux.validity.valid);"
pattern="[a-zA-Z]{4}[ |-][a-zA-Z]{4}"><br>
</form>
|
11° Tester l'interface ci-dessus. Vérifier que le contour rouge n'apparaît plus uniquement lorsqu'on fournit deux mots de 4 lettres séparés par un espace ou un tiret.
Analyser le code : dans l'expression régulière qu'est-ce qui semble encodé le fait que ce soit un espace OU un tiret ?
...CORRECTION...
Le OU est symbolisé par le tiret vertical |, qu'on obtient avec ALT GR + 6.
Sachez qu'il existe également des moyens de tester une par une certaines conditions, même si l'entrée n'est pas obligatoire.
validity.patternMismatch: renvoie true si le texte ne respecte par le pattern.validity.tooLong: true si réponse-texte trop longue.validity.tooShort: true si pour réponse-texte trop courte.validity.rangeOverflow: true si pour réponse numérique trop grande.validity.rangeUnderflow: true si pour réponse numérique trop petite.validity.typeMismatch: true si pour la réponse n'est pas interprétable en tant que type précisé dans la balise.
Attributs et méthodes Javascript : setCustomValidity
Si vous voulez provoquer un message d'erreur invalidant l'envoi du formulaire via Submit, vous pouvez le déclarer en utilisant setCustomValidity. Il faut transmettre en paramètre le message que vous voulez indiquer à l'utilisateur.
Un exemple avec nos deux mots :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | <form name="formjsB">
<label>Deux mots de 4 lettres séparés par un espace</label>
<input type="text" name="deux" required
onchange="controler();"
pattern="[a-zA-Z]{4}[ |-][a-zA-Z]{4}"><br>
<input type="submit" value="Envoyer !">
</form>
<script>
function controler() {
if (formjsB.deux.validity.valid) {
formjsB.deux.setCustomValidity("");
} else {
formjsB.deux.setCustomValidity("Deux mots de 4 lettres SVP");
}
}
</script>
|
12° Tester l'interface ci-dessus. Placer une mauvaise réponse et apputer sur le bouton d'envoi. De quelle ligne provient le message qui s'affiche ?
A quoi sert la ligne 11 ?
...CORRECTION...
C'est la ligne 13 qui règle cette valeur. On l'atteint la première fois que le test de la ligne 10 s'avère être false.
Comme on modifie l'affichage, la ligne 11 permet d'annuler cette demande à partir du moment où on obtient une demande valide.
Voilà, vous avez maintenant assez de recul pour comprendre la vérification des dates de départ et d'arrivée.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 | <form name="trajet" action='https://www.infoforall.fr/act/tester-le-post/' method='get' target="_blank">
<label>Départ :</label>
<input type="date" name="depart" required onchange="verification()"><br>
<label>Arrivée :</label>
<input type="date" name="arrivee" required onchange="verification()"><br>
<input type="submit" value="Envoyer !">
</form>
<script>
function verification() {
if (trajet.depart.validity.valid && trajet.arrivee.validity.valid) {
var date_dep = new Date(trajet.depart.value);
var date_arr = new Date(trajet.arrivee.value);
if (date_dep.getTime() > date_arr.getTime()) {
trajet.depart.setCustomValidity("Votre départ est postérieur à votre arrivée !");
}
}
}
</script>
|
✎ 13° Expliquer le plus clairement possible comment fonctionne ce test de dates.
5 - FAQ
Peut-on empêcher l'utilisateur de modifier une balise ?
Oui. Parfois cela peut-être utile. Par exemple, sur un formulaire de renseignements, on demande si la personne est propriétaire de son maison. Si elle répond non, on peut bloquer le input qui contient la date d'achat de la maison par exemple.
Attribut disabled
Cet attribut permet d'empêcher un élément normalement modifiable d'être modifié par l'utilisateur. C'est le contraire de l'attribut contenteditable qui lui permet à une balise normalement non modifiable de devenir modifiable. Voir l'une des autres questions de cette FAQ pour un rappel éventuel.
On utilise l'attribut disabled pour rendre une balise non modifiable.
<input type="number" name="x" disabled >
Dans Javascript, il suffit d'écrire un code du genre reference.disabled = true. Si vous voulez rendre à nouveau modifiable la balise, il faut utiliser reference.disabled = false.
Peut-on appliquer l'attribut name sur d'autres balises ?
Vous pouvez créer un attribut name pour n'importe quelle type de balise MAIS l'interpréteur Javascript ne va rajouter des références que pour les balises suivantes :
<button>, <form>, <fieldset>, <iframe>, <input>,
<keygen>, <object>, <output>, <select>, <textarea>,
<map>, <meta>, <param>
Bref, si vous vouliez agir facilement sur une balise p avec cette technique, la réponse est non.
Pourquoi peut-on parfois se passer du nom du formulaire ?
On peut parfois noter juste le nom d'une balise input sans passer par le nom du formulaire. Pourquoi ?
Nous avions ceci dans l'activité qui présente la création des formulaires.
1
2
3
4
5
6 | <form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
<input type="number" name="note" value="5">
<input type="button" onclick="note.value = parseInt(note.value) + 1;" value="+1">
<input type="reset" value="Effacer les choix">
<input type="submit" value="Envoyer le formulaire !">
</form>
|
Pourquoi ne pas donner ici le nom du formulaire ?
Tout simplement à cause du contexte d'exécution. Ici c'est le bouton qui provoque l'événement et il appartient au même formulaire que l'élément sur lequel il compte agir.Du coup, ça fontionne.
Mais, à la moindre petite variation, ça ne fonctionnera plus. Ici, mettons le bouton hors du formulaire ou dans un autre formulaire. Echec : ce deuxième code ne fonctionnera plus car le bouton ne trouve pas la balise voulue :
1
2
3
4
5
6 | <form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
<input type="number" name="note" value="5">
<input type="reset" value="Effacer les choix">
<input type="submit" value="Envoyer le formulaire !">
</form>
<input type="button" onclick="note.value = parseInt(note.value) + 1;" value="+1">
|
Moralité : précisez le formulaire, sauf si vous savez vraiment ce que vous faites.
Un rappel sur contenteditable ?
Attribut contenteditable
Si vous voulez rendre une balise texte éditable par l'utilisateur, il suffit de rajouter ceci dans la balise
1 | <p>Couleur voulue : <span contenteditable="true" id="couleur">bleu</span></p>
|
Par défaut, les balises ne sont pas éditables.
On peut bien entendu modifier l'attribut depuis Javascript si on connait la référence de la balise. Voici le code pour activer (ligne 2) ou désactiver (ligne 3) cette fonctionnalité :
1
2
3 | var ref_balise = document.getElementById('couleur');
ref_balise.contentEditable = 'true';
ref_balise.contentEditable = 'false';
|
Attention à la présence de la majuscule en Javascript contrairement au HTML.
Activité publiée le 21 06 2020
Dernière modification : 10 07 2020
Auteur : ows. h.