Formation PUB060 : HTML, 2020 Les formulaires HTML

3.2 La structure d'un formulaire Web


Voici quelques pistes que vous devez suivre lorsque vous générez un formulaire Web avec PHP.

Dans cette fiche :

Balise <form>

La balise <form> peut comporter différents attributs.

Ces attributs sont optionnels mais plusieurs deviendront essentiels pour permettre au formulaire de réaliser le travail escompté.

Attribut id

Cet attribut est intéressant lorsque vous désirez contrôler l'apparence du formulaire à l'aide de règles CSS ou effectuer un traitement JavaScript.

HTML

<form id="monformulaire" ...>
    ...
</form>

Pour contrôler l'apparence de ce formulaire sans affecter les autres formulaires :

CSS

#monformulaire {
    ...
}

#monformulaire input {
    ...
}

#monformulaire ... {
    ...
}

Pour contrôler le comportement spécifique de ce formulaire en JavaScript :

JavaScript

const monFormulaire = document.getElementById('monformulaire');

if (monFormulaire != null) {
    monFormulaire.addEventListener('submit', soumissionMonFormulaire);
}

function soumissionMonFormulaire(event) {
    ...
}

Attribut method

Il faut utiliser la méthode post pour que le programme PHP puisse retrouver les valeurs entrées dans les balises de formulaire à l'aide de la variable $_POST.

HTML

<form method='post' ...>

Si la méthode n'est pas spécifiée, la soumission se fera en GET. Ceci a deux impacts sur les valeurs entrées dans les balises de formulaire :

  • Les valeurs seront disponibles dans la variable $_GET.
  • Elles seront écrites en clair dans l'URL.

Attribut action

Cet attribut contient le nom du programme qui sera exécuté lors de la soumission du formulaire.

HTML

<form ... action='enregistrer.php'>

Remarque : si la balise <form> n'a aucun attribut action, il est possible d'ajouter un attribut formaction dans une balise <button>, <input type="button"> ou <input type="submit">.

HTML

<input type="button" formaction="enregistrer.php" value="Enregistrer" />

Bouton de soumission avec postback

Pour que le bouton fasse un postback, ce qui lui permettra de charger une nouvelle page Web et donc d'exécuter du code côté serveur, il doit être de type submit.

Le postback permettra d'exécuter le code du fichier .php cité dans l'attribut action.

Dans cet extrait, le bouton effectuera un postback :

HTML

<input type="submit" value="Enregistrer" />

Ceci aussi effectuera un postback :

HTML

<button type="submit">Enregistrer</button>

Bouton sans postback

Si un bouton ne fait pas de postback, il faudra coder un appel AJAX côté client pour effectuer un traitement côté serveur en PHP, par exemple pour enregistrer des informations dans la base de données. Il s'agit d'une technique intéressante mais plus complexe que ce qui est enseigné dans un premier cours de programmation Web.

Ce bouton ne fera pas de postback. Il devra faire l'objet d'un traitement côté client.

HTML

<input type="button" ... value="Cliquez ici" />

Ce bouton ne fera pas non plus de postback. Il devra faire l'objet d'un traitement côté client.

HTML

<button>Cliquez ici</button>

Accès aux valeurs saisies dans le formulaire

Pour que les valeurs saisies dans le formulaire soient visibles dans le code PHP, le bouton de soumission et les balises de saisie doivent être placés entre <form> et </form>.

De plus, les balises de saisie doivent avoir un attribut name. C'est par lui que le code PHP pourra retrouver la valeur saisie.

HTML

<form method='post' action='enregistrer.php'>
  <div class="ligne-formulaire">
    <label for="courriel">Courriel: </label>
    <input type="text" id="courriel" name="courriel">
  </div>
  <div class="ligne-formulaire">
    <label for="sujet">Sujet: </label>
    <input type="text" id="sujet" name="sujet">
  </div>
  <div class="ligne-formulaire">
    <label for="message">Message: </label>
    <textarea id="message" name="message"></textarea>
  </div>
  <div class="ligne-formulaire">
    <input type="submit" value="Envoyer">
  </div>
</form>

 

▼Publicité

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Merci de partager !
Soumettre