HTML, création d’un formulaire complet

Voici un petit article pour la création d’un formulaire. Ce genre de formulaire fréquemment utilisé sur internet sont présents partout.

Les formulaires permettent une interactions avec l’internaute que ce soit pour transmettre des informations lors de création de compte ou de connexion, d’inscription à une newsletter, d’outils diverses disponibles en ligne….. Bref vous l’aurez compris, il est important de savoir les placer.

Objectifs

La création de formulaire a été vue à plusieurs reprises sur le net, je ne compte pas révolutionner le sujet mais simplement apporter un exemple complet intégrant :

  • les champs les plus répandues
  • une aide JavaScript (jquery) sur les champs
  • une mise en place d’une photo (la photo étant un fichier, n’importe qu’elle autre fichier pourrait être utilisé)
  • avoir des champs obligatoires

Chose importante qu’il faut avoir, ne protégez vos formulaires avec JavaScript, le JavaScript peut être facilement désactiver, la sécurisation se fera en PHP, côté serveur. JavaScript va nous servir de mettre de vie dans le formulaire.

Description des données

Avant de commencer, voici un détail de ce que devrait contenir les champs :

  • identifiant : entre 5 et 20 caractères et seulement des lettres sans espace
  • password : entre 5 et 20 caractères, des lettres minuscules, majuscule, des chiffres, sans espaces et les caractères suivants : !@_-
  • email : juste un email
  • le sexe : seulement deux champs possibles, homme ou femme
  • nombre d’enfant (pour l’exemple, j’en découpe)
  • la date d’anniversaire
  • une photo de profil (je ne détaillerai pas ici, car l’upload est vraiment à voir à part pour bien comprendre  mais je vous invite à lire cet article) avec une taille limite
  • votre description qui sera simplement limitée à 300 caractères.

Page HTML

Nous allons commencer par la mise en place de notre page pour l’exemple, comme je l’ai dit, je ne vais rien révolutionner, il s’agira d’une page simple, créer un fichier nommé index.php et y insérer :

<!DOCTYPE html> <html lang="fr">
     <head>
     <meta charset="utf-8" />
          <title>Formulaire HTML avec JQuery et PHP</title>
     </head>
<body>
<form method="POST" action="">
     <label>Identifiant : <input type="text" name="identifiant" value="" placeholder="Saisir l'identifiant" required /></label><br />
     <label>Mot de passe : <input type="password" name="password" value="" required /></label><br />
     <label>Mot de passe de vérification : <input type="password" name="verification_password" value="" /></label><br />
     <label>Email : <input type="email" name="email" value="" /></label><br />
     <label>votre sexe : <select name="sexe"><option value="" selected ></option><option value="homme">Homme</option><option value="femme">Femme</option></select></label><br />
     <label>Nombre d'enfants : <input type="number" name="nbr-enfant" step="0.1" min="0" value="10" required /></label><br />
     <label> Date d'anniversaire : <input type="date" name="anniversaire" value="" step="1" min="1950-01-01" max="2017-12-31" /></label><br />
     <label>Photo de profil : <input type="file" name="avatar" /></label><br />
     <label>Votre description : <textarea row="3" col="100" name="description">Une valeur par défaut</textarea><br />
     <input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
     <input type="submit" name="valider" value="Valider" />
</form>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
     jQuery(function(){
          //votre script
     });
</script>
</html>

Une fois cela fait, vous obtiendrez un magnifique formulaire, vous pouvez voir le résultat sur le site de tuto : la page.

Pour les explication, il faut noter que je télécharge JQuery depuis le CDN de google, pour l’instant, le script sera placer dans un second temps. Je place le script en bas afin de commencer à afficher le code puis les script.

Le formulaire se trouve entre les balises <form></form>, les attribut method et action de la balise form permettent de paramétrer le comportement du formulaire.

La balise form

Methode GET ou POST

La première différence entre ces deux méthodes résident dans la manière de transmission des données, la méthode GET transmettra les données dans la barre d’adresse, la méthode POST sera dans les entêtes HTTP. Dans les deux cas, il faut sécuriser les données reçues.

L’option Action

L’option action permet de rediriger les données vers la page indiquée, si rien n’est indiqué, ce sera vers la page en cours, avec un rechargement de la page.

Les différents balises input

Nous utiliserons dans cet articles les balises qui sont le plus couramment utilisées. Vous pouvez avoir une explications des différentes Input sur le site www3schools.com.

Text

Il s’agit d’un champ qui permettra de saisir n’importe quelle caractère sur une ligne.

Password

Comme le champ précédent mais au lieu d’afficher la saisie, chaque caractère sera remplacé par un *.

Email

Ce champ s’attend à avoir un mail, si la saisie ne correspond pas à un mail, la validation du mail, ne peut pas se faire.

Number

Assez simple à comprendre, il permet de saisir un nombre (sur les appareils mobiles, en fonction du navigateur, un clavier numérique devrait s’afficher plutôt qu’un clavier alphanumérique). Nous pouvons indiquer le pas de progression, la valeur min et max.

Date

L’entrée date affichera un calendrier afin de saisir une date. En fonction du navigateur, aucune aide particulière peut apparaître, dans ce cas, faire le contrôle sur le même modèle que plus bas avec les identifiants.

Input

Vous allez pouvoir sélectionner un fichier sur votre ordinateur.

Select

Cela affiche une liste déroulante, l’option selected permet de choisir la valeur choisie au chargement.

textarea

Comme l’entrée de type text mais vous allez saisir sur plusieurs ligne. On vient régler la taille avec les options row et col.

submit

Le bouton de validation du formulaire, il peut y en avoir plusieurs.

Les options communes

Il en existe bien d’autres mais nous allons voir principalement celle de ce formulaire.

Name

Il s’agit du nom donné à votre champ.

value

Cette option permet de saisir une valeur par défaut, elle peut être aussi rempli par un script JavaScript ou PHP, dans tous les cas, elle sera  envoyé si rien n’a été saisie dans le champ.

Dans le cas d’un textarea, il faudra mettre le texte par défaut entre la balise ouvrante et fermante.

required

Le formulaire sera validé seulement si l’enfant qui possède required a été renseigné.

placeholder

elle permet de saisir un texte qui sera temporaire sur le champ jusqu’à ce qu’une valeur soit saisie.

Mise en place du Javascript

Maintenant que nous avons créé notre formulaire, nous allons mettre en place un petit script JS qui va surtout aider l’internaute à saisir, rien de très spectaculaire. Nous allons ajouter des balises spans par champ qui seront donc identifiés. Vous devriez avoir cela :

<form method="POST" action="">
     <label>Identifiant : <input type="text" name="identifiant" value="" placeholder="Saisir votre identifiant" required /></label><span id="info-id"></span><br />
     <label>Mot de passe : <input type="password" name="password" value="" required /></label><span id="info-pwd"></span><br />
     <label>Mot de passe de vérification : <input type="password" name="verification_password" value="" /></label><span id="info-verif-pwd"></span><br />
     <label>Email : <input type="email" name="email" value="" required /></label><span id="info-email"></span><br />
     <label>votre sexe : <select name="sexe"><option value="" selected ></option><option value="homme">Homme</option><option value="femme">Femme</option></select></label><br />
     <label>Nombre d'enfants : <input type="number" name="nbr-enfant" step="0.1" min="0" value="10" required /></label><br />
     <label> Date d'anniversaire : <input type="date" name="anniversaire" value="" step="1" min="1950-01-01" max="2017-12-31" /></label><br />
     <label>Photo de profil : <input type="file" name="avatar" /></label><br />
     <label>Votre description (<span id="longueur_restant"></span> caractères restants): <textarea row="3" col="100" name="description">Une valeur par défaut</textarea></label><span id="info-desc"></span><br />
     <input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
     <input type="submit" name="valider" value="Valider" />
</form>

Nous allons toujours utiliser la même syntaxe pour la vérification des champs, lorsque tout sera valider le champs sera vert sinon en rouge avec une information qui apparaitra.

Mettons en place le script entres les balises <script type="text/javascript"></script>:

jQuery(function(){
  //votre script
  var regex_identifiant = new RegExp("^[a-z]{5,20}$","i");
  var message_identifiant = "Pour l'identifiant, il faut entre 5 et 20 caractères, seulement des lettres minuscule et majuscule";
  var regex_password = new RegExp("^[a-z0-9!@_-]{5,20}$","i");
  var message_password = "Pour le mot de passe, il faut entre 5 et 20 caractères, seulement des lettres minuscule et majuscule,@ ,! ,_ , -";
  var regex_email = new RegExp("^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$");
  var message_email = "Format du mail invalide";
  var regex_description = new RegExp("^.{0,300}$","m");
  var message_description = "La description doit faire maximum 300 caractères";
  controle_champ('identifiant',regex_identifiant,message_identifiant);
  controle_champ('password',regex_password,message_password);
  controle_champ('email',regex_email,message_email);
  controle_champ('description',regex_description,message_description);
  verif_pwd();
  longueur_description();
  // au chamgement dans identifiant, password, email et vérification correspondance password
  $('input:not(input[name="verification_password"]), textarea[name="description"]').on('keyup',function(){
    var regex , message;
    var input = $(this).attr('name');
    regex = eval('regex_'+input);
    message = eval('message_'+input);
    controle_champ(input,regex,message);
  });
  $('textarea[name="description"]').on('keyup',function(){
    longueur_description();
  });
  $('input[name$="password"]').on('keyup',function(){
    verif_pwd();
  });
  function longueur_description(){
    var longueur = $('textarea[name="description"]').val().length;
    $('#longueur_restant').html(300-longueur);
  }
  function verif_pwd(){
    if($('input[name="password"]').val() != $('input[name="verification_password"]').val()){
      affichage_span_erreur('verification_password','Le mot de passe de vérification ne correspond pas',true);
    }else{
      affichage_span_erreur('verification_password','',false);
    }
  }
  function affichage_span_erreur(champ,message,erreur){
    $('#'+champ).html(message);
    if(erreur){
      $('input[name="'+champ+'"]').css('border-color','red');
      $('input[name="'+champ+'"]').css('color','red');
    }else{
      $('input[name="'+champ+'"]').css('border-color','green');
      $('input[name="'+champ+'"]').css('color','green');				}
  }
  function controle_champ(champ, regex, message){
    var valeur;
    if(champ != "description"){
      valeur = $('input[name="'+champ+'"]').val();
    }else{
      valeur = $('textarea[name="'+champ+'"]').val();
    }
    if(regex.test(valeur)){
      affichage_span_erreur(champ,"",false);
    }else{
      affichage_span_erreur(champ,message,true);
    }
  }
});

Je ne vais pas rentrer dans les détails lignes par lignes, certaines sont parfaitement explicite.

Les sélecteurs JQuery

Je ne détaille pas les différents sélecteurs, il y a aura un article à part. Mais en gros :

  • $('input:not(input[name="verification_password"]), textarea[name="description"]') , tous les input sauf celle dont le nom est verification_password et le textarea nommé description.
  • $('input[name$="password"]') , input nommé password.
  • $('#longueur_restant'), permet de sélectionner en utilisant l’id de la balise.

new RegExp()

Cette fonction javascript permet de créer un objet qui représentera l’expression régulière (infos).

eval()

Eval() est une fonction javascript qui va nous permettre de composer une variable à partir de texte (info).

$(selecteur).css()

Cette fonction JQuery est très interessante, elle va permettre de modifier le style des sélections (info).

Fonction longueur_description()

Cette fonction permet de mesurer le nombre de caractères restant pour la description.

Fonction verif_pwd()

On verifie la correspondance entre le mot de passe et le mot de passe de vérification.

Fonction affichage_span_erreur()

On gère l’affichage et la mise en forme des champs.

Fonction controle_champ()

La fonction permet de pouvoir contrôler le contenue d’un champ en fonction d’une expression régulière et d’afficher un message (en passant par la fonction affichage_span_erreur()).

Conclusion

Vous pouvez voir le résultat sur tuto sur le web, bien entendu, aucune sécurisation n’a été faite, celle-ci est vraiment efficace en php (ou du moins le langage utilisé côté serveur). n’hésitez pas à partager et à commenter.

Laisser un commentaire