Informatique


Fonctionnement d'un formulaire

Aller à

Qu'est-ce qu'un formulaire

Pour interagir avec l'utilisateur on peut intégrer des formulaires.
Chaque formulaire regroupe 1 ou plusieurs éléments qui permettrons à peu près tout: envoyer du texte, des images, des fichiers, de faire des choix etc.

On constatera que nous touchons maintenant aux limites du HTML, en effet HTML ne peut traîter les informations transmises par un formulaire.
Il faudra donc faire appel à un langage de programmation pour s'occuper des données envoyées.


Fonctionnement d'un formulaire avec PHP et JavaScript

Avec PHP


Avec JavaScript
Démo
<form action=# method=post>
	<label for=nom>Votre nom:</label>
	<input id=nom type=text name=nom>
<br>	
	<label for=pass>password:</label>
	<input id=pass type=password name=pass>
<br>	
	Votre sexe:
	<label for=mas>Masculin:</label> <input id=mas type=radio name=sexe value="M" checked>
	<label for=fem>Féminin:</label> <input id=fem  type=radio name=sexe value="F" >
<br>		
	Votre date de naissance:
	<input id=dn type=date name=dn>
	<input type=submit value="Envoyer">
</form>
<button id=go>Afficher</button>
<p id=resultat></p>
<script>
var res="";
var f1=document.forms[0];
var bouton=document.getElementById("go");
var resultat=document.getElementById("resultat");
bouton.addEventListener("click",affic);
function affic(){
for(let i=0;i<5;i++){
	if(f1[i].name==="sexe"){
		(f1[i].checked===true)? res=res+f1[i].value+"<br>":res=res+"";
	}
	else{
	res=res+f1[i].value+"<br>";
	}
}
resultat.innerHTML=res;
}
</script>

<form> et ses attributs

<form> définit un formulaire

  • method, cet attribut définit la méthode HTTP qui sera utilisée pour envoyer les données au serveur. Les valeurs possibles (par défaut get):
    • get, correspond à la méthode GET du protocole HTTP. Les données du formulaire sont ajoutées à l'URL de l'attribut action avec '?' comme séparateur. L'URL ainsi composée est ensuite envoyée vers le serveur. get est la valeur par défaut.
    • post, correspond à la méthode POST du protocole HTTP, les données du formulaire sont incluses dans le corps du formulaire et envoyées vers le server.
  • action spécifie le fichier (ou l'adresse mail) où les données seront envoyées pour y être traîtées
  • autocomplete permet ou non l'autocomplétion des champs, 2 valeurs possibles (par défaut on):
    • on, le navigateur peut remplir automatiquement les valeurs d'après les précédentes informations qu'a entrées l'utilisateur lors d'usages antérieurs du formulaire
    • off, l'utilisateur doit remplir lui-même la valeur de chaque champ, à chaque utilisation du formulaire; le navigateur ne doit pas remplir automatiquement les valeurs.
  • id pour nommer le formulaire. !!! Ne pas utiliser name !!!
  • target indique où afficher la réponse après avoir envoyé le formulaire.
    • _self, charge la réponse dans la même fenêtre (valeur par défaut)
    • _parent, charge la réponse dans le contexte de navigation parent
    • _top, charge la réponse dans le contexte de navigation le plus haut (c'est-à-dire le contexte de navigation qui est l'ancêtre de l'actuel, et qui n'a aucun parent). S'il n'y a pas de parent, l'option se comporte comme _self
    • _blank, charge la réponse dans une nouvelle fenêtre.

La balise <fieldset>

La balise <fieldset> permet d'organiser les formulaires.

Démo
	<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
	<fieldset>
	 <legend>Identification</legend>	
		<label for=nom>Votre nom:</label>
		<input id=nom type=text name=nom>
	<br>	
		<label for=pass>password:</label>
		<input id=pass type=password name=pass>
	</fieldset>
	<br>
	<fieldset>
	 <legend>Identification</legend>	
		Votre sexe:
		<label for=mas>Masculin:</label> <input id=mas type=radio name=sexe value="M">
		<label for=fem>Féminin:</label> <input id=fem  type=radio name=sexe value="F" checked>
	<br>		
		Votre date de naissance:
		<input id=dn type=date name=dn>
	</fieldset>
	<br>		
		<input type=submit value="Envoyer">
	</form>
	
	<?php
	echo $_POST['nom']." ".$_POST['pass']." ".$_POST['sexe']." ".$_POST['dn'];
	?>

La boîte à outils

Les éléments de formulaire sont très nombreux, dans la majorité des cas la connaissance des éléments suivants est suffisantes.

Les input Les balises
  • text
  • password
  • radio
  • checkbox
  • date
  • range
  • hidden
  • submit
  • select
  • textarea
  • datalist