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

• l'attribut name est indispensable pour récupérer les informations transmises par chaque champ de formulaire, en php chaque name devient un indice associatif dans le tableaux $_POST (ou $_REQUEST)
• le champ submit permet d'envoyer l'ensemble des champs de formulaire encadrés par <form> et </form>, son attribut value permet de placer un texte sur le bouton
• Lorsque l'utilisateur clique sur le bouton submit les informations encodées dans le formulaire sont envoyées sous la forme d'un tableau, le tableau $_POST, par exemple:
  

  Démo
  	<form action=<?php echo $_SERVER['PHP_SELF'];?> 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>
  	
  	<?php
  	echo $_POST['nom']." ".$_POST['pass']." ".$_POST['sexe']." ".$_POST['dn'];
  	?>
  

  Pour les valeurs on aura comme tableau $_POST:

  Valeurs	"Charles"	"123456"	"M"	"1962-05-17"
  Indices associatifs provenant des attributs name	nom	pass	sexe	dn

  
  
• le tableau $_POST est récupéré par un script php, ce script permettra de traîter les informations envoyées par l'utilisateur
• fieldset et la balise legend permet de grouper des éléments de formulaire
• l’élément label permet de donner un intitulé à un champ de formulaire; en général un clic sur l’intitulé donnera le focus au champs de formulaire.

---

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