Formulaire

Les formulaires permettent d'envoyer des données, soit dans une base de données, soit dans une page en PHP (mail, page de connexion, enregistrements de données, ...)

Il existe deux méthodes :

• GET : Tous ce qui est inscrit dans le formulaire est visible dans la barre d'adresse

  Exemple

  Vous pouvez tester, quoique vous écrivez, ça se retrouve dans la barre d'adresse

• POST : Permet d'envoyer beaucoup de données, avec une plus grandes sécurités, car rien ne s'affiche dans la barre d'adresse

Le code de base :

HTML

<form method="POST" action="" >
  <input type="text" name="pseudo">
  <input type="submit" value="envoyer">
</form>

On va décomposer :

• La balise form indique qu'on crée un formulaire.
• Dans la balise form on indique la methode : POST ou GET. Puis action qui peut être vide si la page de traitement des données est la même sinon indiquer la page de destination.
• La balise input indique un champ de saisie
• type indique quelle sorte de données sont attendues : texte, numéro, date, ...
• name est le nom qui sera utilisé en PHP pour récupérer les données
• Un bouton d'envoi : input type="submit" value="Valider"
  • type="submit" : permet de dire c'est un bouton pour envoyer le formulaire
  • value Permet d'indiquer d'écrire dans le bouton.
• et on ferme la balise form

Les formulaires en Bootstrap

Grâce à Bootstrap on peut faire de joli formulaire très simplement

HTML

<form action="" method="">
   <!-- Début du formulaire -->
   <div class="form-group">
      <!-- Début de la div prénom -->
      <label for="prenom">Prénom:</label> <!-- C'est la légende du champs for est en lien avec id du input -->
      <input type="text" class="form-control" id="prenom" name="prenom" placeholder="Prénom"> <!-- Le champs avec la class form-control et id qui correspond au for du label -->
   </div>
   <!-- Fin de la div prénom -->
   <div class="form-group">
      <!-- Début de la div mail -->
      <label for="email">Adresse mail :</label><!-- C'est la légende du champs. for est en lien avec id du input -->
      <input type="email" class="form-control" placeholder="Entrer votre email" id="email" name="email"> <!-- Le champs avec la class form-control et id qui correspond au for du label -->
   </div>
   <!-- Fin de la div prénom -->
   <div class="form-group">
      <!-- Début de la div mot de passe -->
      <label for="motdepasse">Mot de passe :</label> <!-- C'est la légende du champs. for est en lien avec id du input -->
      <input type="password" class="form-control" placeholder="Entrer votre mot de passe" id="motdepasse"> <!-- Le champs avec la class form-control et id qui correspond au for du label -->
   </div>
   <div class="form-group">
      <label for="commentaire">Commentaires :</label> <!-- Début de la div commentaire-->
      <textarea class="form-control" rows="5" id="commentaire" name="commentaire"></textarea>
      <!-- Affiche un bloc pour écrire un texte long -->
   </div>
   <div class="form-check">
      <!-- Début de la div case à cocher-->
      <label class="form-check-label">
      <input type="checkbox" class="form-check-input" value="fites">Frites
      </label>
   </div>
   <div class="form-check">
      <label class="form-check-label">
      <input type="checkbox" class="form-check-input" value="puree">Purée
      </label>
   </div>
   <br>
   <div class="form-check">
      <!-- Début de la div boutons radios -->
      <label class="form-check-label">
      <input type="radio" class="form-check-input" name="optradio" value="1">Choix 1 
      </label>
   </div>
   <div class="form-check">
      <label class="form-check-label">
      <input type="radio" class="form-check-input" name="optradio" value="2">Choix 2
      </label>
   </div>
   <div class="form-group">
      <label for="selection">Choix : </label>
      <select class="form-control" id="selection" name="choix">
         <option value="haricot">Haricot</option>
         <option value="navet">Navet</option>
         <option value="citron">Citron</option>
         <option value="epinard">Épinard</option>
      </select>
   </div>
   <button type="submit" class="btn btn-primary">Envoyer</button>
</form>

Résultat :

Récupérer les données

En php pour récupérer les données envoyées, il faut utiliser une variable $_POST ou $_GET

PHP

1
2
3
4
5
6
7
8

<?php 

if(isset($_GET['prenom'])) {
	echo "<p>" .$_GET['prenom'] . "</p>";
	echo "<p>" . $_GET['choix'] . "</p>";
	echo "<p>" . $_GET['email'] . "</p>";
} 
?>

Résultat

Remplacer $_GET par $_POST suivant la méthode utiliser