07 Mon premier formulaire HTML

Dans ce TP, nous allons concevoir un formulaire de contact simple.

Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu'il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web.

Concevoir le formulaire

Avant de passer au code, il est souhaitable de prendre un peu de recul et accorder quelques instants de réflexion à votre formulaire. Dessiner un rapide croquis vous permettra de définir les informations que vous souhaitez demander à l'utilisateur.

Du point de vue de l'expérience utilisateur, il est important de garder à l'esprit que plus vous demandez d'informations, plus vous risquez que votre utilisateur s'en aille. Restez simple et ne perdez pas votre objectif de vue : ne demandez que ce dont vous avez absolument besoin.

La conception de formulaires est une phase importante de la construction d'un site internet ou d'une application.

Votre croquis est réalisé ? Vous pouvez passer à la suite de ce TP.

Mise en œuvre de notre formulaire HTML

1. Créer un squelette HTML5 de base,
2. Au sein de ce squelette en vous basant sur les éléments vus en cours, créer votre formulaire grâce aux éléments HTML suivant: <form>, <label>, <input>, <textarea> et <button>,
3. Encapsuler chaque couple label/input et le bouton dans un div,
4. Les noms des champs seront user_name, user_mail et user_msg,
5. L'attribut action de notre formulaire prendra comme url https://allosaurus.delahayeyourself.info/form/contact/.

Mise en page élémentaire du formulaire

Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre navigateur préféré, vous verrez qu'il est plutôt laid.

Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui-ci exemple de formulaire

1. Créer une feuille de style (au sein d'un répertoire style) pour mettre en forme votre formulaire.
2. Ajouter le code ci-dessous à votre feuille de style:

form {
  /* Uniquement centrer le formulaire sur la page */
  margin: 0 auto;
  width: 400px;
  /* Encadré pour voir les limites du formulaire */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

form div + div {
  margin-top: 1em;
}

label {
  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea {
  /* Pour s'assurer que tous les champs texte ont la même police.
     Par défaut, les textarea ont une police monospace */
  font: 1em sans-serif;

  /* Pour que tous les champs texte aient la même dimension */
  width: 300px;
  box-sizing: border-box;

  /* Pour harmoniser le look & feel des bordures des champs texte */
  border: 1px solid #999;
}

input:focus, textarea:focus {
  /* Pour souligner légèrement les éléments actifs */
  border-color: #000;
}

textarea {
  /* Pour aligner les champs texte multi‑ligne avec leur étiquette */
  vertical-align: top;

  /* Pour donner assez de place pour écrire du texte */
  height: 5em;
}

.button {
  /* Pour placer le bouton à la même position que les champs texte */
  padding-left: 90px; /* même taille que les étiquettes */
}

button {
  /* Cette marge supplémentaire représente grosso modo le même espace que celui
     entre les étiquettes et les champs texte */
  margin-left: .5em;
}

Notre formulaire devrait avoir meilleure allure désormais. Essayez donc de changer la couleur du texte des champs ou encore de leurs bordures et pourquoi pas celle de notre bouton ?

Envoyer les données au serveur Web

Comme dit auparavant, un formulaire HTML est une manière pratique de demander de l'information à un utilisateur et de les adresser à un serveur web.

L'élément <form> définit où et comment les données sont envoyées, merci aux attributs action et method.

Mais ce n'est pas tout. Nous avons aussi besoin de donner un nom à nos données. Ces noms sont importants pour deux raisons. Du côté du navigateur, cela sert à définir le nom de chaque élément de donnée. Du côté du serveur, chaque information doit avoir un nom pour être manipulée correctement.

Pour nommer vos données vous devez utiliser l'attribut name pour identifier bien précisément l'élément d'information collecté par chacun des widgets.

1. Ajouter les attributs name à chaque champs du formulaire
2. Ajouter les attributs for à chaque libellé
3. Et si nous soumettions notre formulaire à présent ?

Félicitations vous venez de découvrir les bases des formulaires.