Informatique


Les formulaires

Aller à

L'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 de form

Les événements du formulaire:

  • focus
  • blur
  • input
  • change

focus et blur
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>