Toute page HTML peut être enrichie de formulaires interactifs, qui invitent nos visiteurs à renseigner des informations : saisir du texte, sélectionner des options, valider avec un bouton… etc

Nous arrivons cependant aux limites du langage HTML car il faut ensuite pouvoir analyser les informations que le visiteur a saisies… et cela ne peut pas se faire en langage HTML.

Le traitement des résultats devra s’effectuer dans un autre langage, comme le PHP.

<!-- Formulaire -->
  <form method="get" action="traitement.php">
	  <!-- Envois des données dans l'url, recuperation avec $_GET['nom de la variable']-->
  <form method="post" action="traitement.php">
	  <!-- Envois des données dans la page, recuperation avec $_POST['nom de la variable']-->

<!-- Zone de texte monoligne -->	
	
   <label for="pseudo">Votre pseudo</label> : 
  <input type="text" name="pseudo" id="pseudo" />
	  <!-- Attribut "for" = "id" du champ à lier -->

<!-- Zone de mot de passe -->
	
   <label for="pass">Votre mot de passe :</label>
  <input type="password" name="pass" id="pass" />

<!-- Zone de texte multiligne -->

   <label   for="ameliorer">Question ?</label><br />
  <textarea name="ameliorer" id="ameliorer"></textarea>

<!-- Zone de saisie enrichies -->

  <input type="email" />
  <input type="url" />
  <input type="tel" />
	
  <input type="number" />
	  <!-- Attributs "min" , "max" , "step" disponibles-->

  <input type="curseur" />
	  <!-- Attributs "min" , "max" , "step" disponibles-->

  <input type="color" />
	
<!-- Pas pour tous les navigateurs -->
	
  <input type="date" />
  <input type="time" />
  <input type="week" />
  <input type="month" />
  <input type="datetime" />
  <input type="datetime-local" />	
	
  <input type="search" />
	
<!-- Les élements d'options-->
	
	<p>
       Cochez les aliments que vous aimez manger :<br />
       
		<input type="checkbox" name="frites" id="frites" /> 
		<label for="frites">Frites</label><br />
    
		<input type="checkbox" name="steak" id="steak" /> 
		<label for="steak">Steak haché</label><br />
      
		<input type="checkbox" name="epinards" id="epinards" /> 
		<label for="epinards">Epinards</label><br />
      
		<input type="checkbox" name="huitres" id="huitres" /> 
		<label for="huitres">Huitres</label>
   </p>
	  <!-- Attribut "Checked" pour cocher une case par defaut-->
	
<!-- Les zones d'options-->
	
	<p>
       Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />
     
		<input type="radio" name="age" value="moins15" id="moins15" /> 
		 <label for="moins15">Moins de 15 ans</label><br />
      
		<input type="radio" name="age" value="medium15-25" id="medium15-25" /> 
		 <label for="medium15-25">15-25 ans</label><br />
       
		<input type="radio" name="age" value="medium25-40" id="medium25-40" /> 
		 <label for="medium25-40">25-40 ans</label><br />
       
		<input type="radio" name="age" value="plus40" id="plus40" /> 
		 <label for="plus40">Encore plus vieux que ça ?!</label>
   </p>
	  <!-- Attribut "Checked" pour cocher une case par defaut-->
	
<!-- Les listes deroulantes-->

	<p>
        <label for="pays">Dans quel pays habitez-vous ?</label><br />
       <select name="pays" id="pays">
           <option value="france">France</option>
           <option value="espagne">Espagne</option>
           <option value="italie">Italie</option>
           <option value="royaume-uni">Royaume-Uni</option>
           <option value="canada">Canada</option>
           <option value="etats-unis">États-Unis</option>
           <option value="chine">Chine</option>
           <option value="japon">Japon</option>
       </select>
   </p>
	  <!-- Attribut "Selected" pour selectionner une case par defaut-->
	
<!-- Regrouper les champs -->
	
	<fieldset>
     	<legend>Vos coordonnées</legend> <!-- Titre du fieldset --> 

        <label for="nom">Quel est votre nom ?</label>
       <input type="text" name="nom" id="nom" />
   </fieldset>
	
<!-- Le bouton d'envoi -->
	
  <input type="submit" value="Envoyer" />
  	    <!-- Conduit le visiteur à la page indiquée dans l'attribut action du formulaire -->
  <input type="reset" value="Envoyer" />
	    <!-- Remise à zero du formulaire -->
  <input type="image" value="Envoyer" />
	    <!-- = Bouton submit mais sous forme d'image -->
  <input type="button" src="mon image" value="Envoyer" />
	    <!-- Bouton générique qui n'aura pas d'effet par defaut, géré en JavaScript -->

</form>