info2gestion

Les formulaires html ou web proposent le plus souvent d'envoyer et de recevoir des données d'un serveur de base de données.

Javascript permet de contrôler les données échangées et par exemple d'éviter le rechargement de la page et l'affichage d'un formulaire vide.

Exemple d'un formulaire

Ci-dessus, les éléments les plus courants d'un formulaire web. Il est possible de personnaliser ces éléments (placement, disposition...) avec une feuille de style.

Le bouton Afficher saisies permet d'afficher les différentes saisies des champs de ce formulaire dans un tableau. Cet affichage est crée avec javascript.

Les différentes valeurs de ce formulaire peuvent être gérées par javascript. Ci dessous, les principales instructions qui permettent d'accéder aux valeurs d'un formulaire web.

<script>
function lecture_chps_formulaire() {

  /* champ Saisie utilisateur */
  const frm_utilisateur = document.getElementById("saisie_txt_id01").value;
  
  /* champ Saisie email */
  const frm_email = document.getElementById("saisie_mail02");
  
  const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;// 1
  const isValid = frm_email.value.length === 0 || emailRegExp.test(frm_email.value); 
  if (!isValid){
    frm_email.value = "saisie email invalide";
  }
  
  /* champ Saisie mot de passe */
  const frm_mdp = document.getElementById("saisie_mdp_id03");
  const shaObj = new jsSHA("SHA-256", "TEXT", { encoding: "UTF8" }); // 2
  shaObj.update(frm_mdp.value);
  const hash = shaObj.getHash("HEX");
  //console.log(hash);
  
  /* champ sélection incrémenter/décrémenter nombre 4-20 */
  const frm_nb = document.getElementById("saisie_nb").value;
  
  /* champ sélection unique */
  const frm_btn_radio = AfficherValeurBtnRadio(); // 3
  
  /* champ sélection multiple */
  const frm_btn_cbox = AfficherValeursCheckBoxes(); // 4
  
  /* champ sélection date */
  const frm_date1 = document.getElementById("chp_date_01").value;
  
  /* champ sélection date et heure */
  const frm_date2 = document.getElementById("chp_date_hr_02").value;
  var splitarray = new Array(); // 5
  splitarray= frm_date2.split("T");
  const frm_date2d = splitarray[0];
  const frm_date2t = splitarray[1];
  
  /* champ sélection liste menu déroulant */
  const frm_listd = document.getElementById("chp_ddown01"); // 6
  const frm_listder = frm_listd.options[frm_listd.selectedIndex].text;
  
  /* champ saisie ou valeurs présaisies */
  const frm_presaisie = document.getElementById("chp_saisie_datalist").value;
  
  /* champ saisie sur plusieurs lignes */
  const frm_saisiemlig = document.getElementById("saisie_mlignes").value; 
  
}
</script>

1 Validation de la saisie d'une adresse email. Validation simplifiée qui teste la validité de la saisie avec la présence d'un @.

2 Saisie d'un mot de passe. Utilisation d'une librairie de cryptographie. Sur un serveur non sécurisé avec un certificat SSL, les données sont transférées en clair. Si la connection est interceptée, c'est une vulnérabilité possible s'agissant de données confidentielles.

Des sécurités supplémentaires peuvent s'ajouter au niveau du serveur par exemple avec php et le moteur de base de données sql. Il faudra utiliser la même librairie que celle utilisée par le navigateur pour comparer le mot de passe crypté avec le mot de passe de l'utilisateur et utiliser une librairie de cryptage php ou sql pour ne pas stocker le mot de passe en clair dans la base de données.

Cette librairie de cryptographie se retrouve sur github https://github.com/Caligatio/jsSHA. Mes connaissances ne sont pas suffisantes pour qualifier cette librairie en termes de sécurité. A ce jour, les commentaires de la page github ne montrent pas de critiques négatives ou de réserves sur l'utilisation de cette librairie. Des alternatives existent.

3 Fonction qui extrait la valeur des sélections uniques sur les boutons radio.

function AfficherValeurBtnRadio(){
  const ele = document.getElementsByName('brad01');
  for (let i = 0; i < ele.length; i++) {
    if (ele[i].checked) return ele[i].value;
  }
}

Cette fonction peut être présentée et améliorée de différentes manières.

4 Fonction qui extrait les valeurs des sélections multiples sur les cases à côcher.

function AfficherValeursCheckBoxes(){
  var cboxes = '';
  const checkboxes = document.getElementsByName('cbox01');

  for (let i = 0; i < checkboxes.length; i++) {
    if (i < checkboxes.length-1){
       if (checkboxes[i].checked){
          cboxes += checkboxes[i].value + ',';
       }
    } else if (i = checkboxes.length-1) {
      cboxes += checkboxes[i].value
  }
  return cboxes;
}

Cette fonction peut être présentée et améliorée de différentes manières.

5 Lecture de la saisie date et heure. Cette saisie est séparée en deux (date et heure) pour simplifier une éventuelle requête en base de données.

6 Lecture de la sélection de la liste déroulante. Il faut passer par une instruction intermédiaire pour lire la valeur sélectionnée de ce contrôle.

Ces instructions sont une manière d'accéder aux valeurs saisies et sélectionnées d'un formulaire web.

Il est possible d'utiliser ces valeurs avec un moteur de base de données hébergé sur un serveur. Ajax, peut notamment gérer ces valeurs avec des traitements supplémentaires (envoi en format brut, xml, json...).