Informatique


Les formulaires

Aller à

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>