Sélectionner un objet form
Comment accéder à un objet form.
L'accès à l'objet
form peut se faire de 4 façons différentes:
- par recherche sur l'id du formulaire
- avec l'indice 0 du tableau forms
- avec l'indice associatif du tableau forms
- directement avec le name du formulaire
Les 4 façons peuvent bien sûr être utilisées, mais la façon document.nomFormulaire est la plus facile et la plus compacte.
Démo
<h2>Un bien beau formulaire</h2>
<div>
<form id=f1 action=# method=post name=mbformu>
Nom: <input id=i0 type=text name=nom> <span id=a0 class=aide></span> <br>
Prénom: <input id=i1 type=text name=preno> <span id=a1 class=aide></span> <br>
Mot de passe: <input id=i2 type=password name=pass> <span id=a2 class=aide></span> <br>
<input type=submit value=envoyer>
</form>
</div>
<script>
var monf1=document.getElementById("f1");
var monf2=document.forms[0];
var monf3=document.forms["mbformu"];
var monf4=document.mbformu;
console.log(monf1,monf2,monf3,monf4);
</script>
Les événements principaux
Les événements du formulaire:
- focus
- blur
- input
- change
- submit
focus et blur
Ces événements détecte la prise ou la perte de focues pour les <input type=text>, <input type=password> ou <textarea>.
Démo
<div>
<form id=f1 action=# method=post name=mbformu>
Nom: <input id=i0 type=text name=nom> <span id=a0 class=aide></span>
<br>
<input type=submit value=envoyer>
</form>
</div>
<script>
var moninput0=document.getElementById("i0");
var message0=document.getElementById("a0");
moninput0.addEventListener("focus",test);
moninput0.addEventListener("blur",test);
function test(e){
if(e.type==="focus"){
message0.textContent="L'input "+e.target.id+" a le focus.";
}
else{
message0.textContent="L'input "+e.target.id+" a perdu le focus.";
}
}
</script>
input
Cet événement détecte un changement de valeur au sein d'un input, on a donc à faire à du direct.
Démo
<div>
<form id=f1 action=# method=post name=mbformu>
Nom: <input id=i0 type=text name=nom> <span id=a0 class=aide></span><br>
Prénom: <input id=i1 type=text name=prenom> <span id=a1 class=aide></span><br>
Password: <input id=i2 type=password name=pass> <span id=a2 class=aide></span><br>
<input type=submit value=envoyer>
</form>
</div>
<script>
var moninput2=document.getElementById("i2");
var message2=document.getElementById("a2");
moninput2.addEventListener("input",test);
function test(e){
var longueur=e.target.value;
if(longueur.length>=8){
message2.textContent="Sécurité élevée";
message2.style.color="darkcyan";
}
else if(longueur.length>=6){
message2.textContent="Sécurité moyenne";
message2.style.color="orange";
}
else{
message2.textContent="Sécurité faible";
message2.style.color="red";
}
}
</script>
change
Cet événement détecte un changement de choix au niveau des <radio> et <select>.
Démo
<div>
<form id=f1 action=# method=post name=mbformu>
Nom: <input id=i0 type=text name=nom> <span id=a0 class=aide></span>
<br>
Sexe: Masculin: <input id=i1 type=radio name=sexe value="M" checked>
Féminin: <input id=i2 type=radio name=sexe value="F"> <span id=a1 class=aide></span><br>
<input type=submit value=envoyer>
</form>
</div>
<script>
var moninput1=document.getElementsByName("sexe");
var message1=document.getElementById("a1");
for(let i=0;i<moninput1.length;i++){
moninput1[i].addEventListener("change",test);
}
function test(e){
message1.textContent="Le bouton radio de value "+e.target.value+" a été coché.";
}
</script>
submit
Cet événement détecte l'envoi du formulaire.
Démo
<body>
<h2>Un bien beau formulaire</h2>
<div>
<form id=f1 action=# method=post name=mbformu>
Nom: <input id=i0 type=text name=nom> <span id=a0 class=aide></span><br>
<input type=submit value=envoyer>
</form>
<div id=res></div>
</div>
<script>
var monFo=document.forms[0];
var res=document.getElementById("res");
monFo.addEventListener("submit",test);
function test(e){
var flag;
flag=window.confirm("Voulez-vous vraiment envoyer le formulaire!");
(flag)?alert("Le formulaire a été envoyé"):alert("Le formulaire n'a pas été envoyé");
}
</script>
</body>
Les propriétés principales
Les propriétés des éléments de formulaire:
- checked
- selectedIndex
- value
- disabled
checked
Propriété utilisée avec <input type=radio> et <input type=checkbox>.
Démo
<body>
<h2>Un bien beau formulaire</h2>
<div>
<form id=f1 action=# method=post name=mbformu>
Nom: <input id=i0 type=text name=nom> <span id=a0 class=aide></span><br>
Sexe: Masculin: <input id=i1 type=radio name=sexe value="M">
Féminin: <input id=i2 type=radio name=sexe value="F"><br>
<input type=submit value=envoyer>
</form>
<div id=res></div>
</div>
<script>
var moninput1=document.getElementsByName("sexe");
var message1=document.getElementById("res");
for(let i=0;i<moninput1.length;i++){
moninput1[i].addEventListener("change",test);
}
function test(e){
message1.textContent=this.checked +" "+this.value;
}
</script>
</body>
selectedIndex
Propriété utilisée avec <option>.
Démo
<body>
<h2>Un bien beau formulaire</h2>
<div>
<form id=f1 action=# method=post name=mbformu>
Pays: <select id=i0 type=text name=pays>
<option value="-">---Votre choix---</option>
<option value="BE">Belgique</option>
<option value="FR">France</option>
<option value="CH">Suisse</option>
<option value="D">Allemagne</option>
</select>
<input type=submit value=envoyer>
</form>
<div id=res></div>
</div>
<script>
var res=document.getElementById("i0");
var res=document.getElementById("res");
i0.addEventListener("change",test);
function test(e){
switch(this.selectedIndex){
case 1: res.textContent=this.value;
break;
case 2: res.textContent=this.value;
break;
case 3: res.textContent=this.value;
break;
case 4: res.textContent=this.value;
break;
default:res.textContent="aucun choix";
}
}
</script>
</body>
desabled
Propriété utilisée avec <fieldset>, <input>, <button>, <option>, <select>, <textarea>.
Démo
<body>
<h2>Un bien beau formulaire</h2>
<div>
<form id=f1 action=# method=post name=mbformu>
<fieldset id=i0>
<legend>Profil</legend>
Nom: <input type=text><br>
Prénom: <input type=text><br>
Pays: <select type=text name=pays>
<option value="-">---Votre choix---</option>
<option value="BE">Belgique</option>
<option value="FR">France</option>
<option value="CH">Suisse</option>
<option value="D">Allemagne</option>
</select>
<input type=submit value=envoyer>
</fieldset>
</form>
<button id=res>Eteindre/Allumer</button>
</div>
<script>
var i0=document.getElementById("i0");
var res=document.getElementById("res");
res.addEventListener("click",OnOff);
function OnOff(e){
if(i0.disabled==false){
i0.disabled=true;
}
else{
i0.disabled=false;
}
}
</script>
</body>