cours2018

Formulaire Javascript : Site d’objets perdus

Auteurs: Jie Song, Samar MAMI, Thabet CHAAOURI, Youssef FEHRI

Introduction

Danc ce cours, nous allons traiter en première partie comment écrire un formulaire en HTML puis en deuxième partie nous allons étudier l’interaction avec l’utilisateur grâce aux nombreuses propriétés et méthodes dont sont dotés les éléments HTML utilisés dans les formulaires.

Plan du cours

1. Ecrire un formulaire en HTML

2. Traitement de la saisie: Propriétés et méthodes du formulaire

3. CSS

4. Exemple (TP openclassroom)

Partie I. Ecrire un formulaire en HTML

Pour bien enregistrer les données concernant un objet perdu, nous listons les composants nécessaires au formulaire:

Selon les attributs des différents composants, html nous offre plusieurs elements à utiliser:

1.1. Html pour les texts

Pour laisser l’espace blanc pour mettre les texts, <input type='text'> peut le faire en utilisant value et onfocus pour la phrase de guide et size pour limiter la taille.

1.2. Html pour la date

Pour choisir une date dans le calendrier, <input type='date'> support de prendre le calendrier et faire le choix:

1.3. Html pour le choix

Pour faire la liste et choisir un element <select>, </select> est un choix:

1.4. Html pour le téléchargement

Pour télécharger les images de l’objet perdu et faire un apperçu, on peut utiliser <input type="file"> pour permettre le téléchargement et le boutton <input type="button"> et l’activité associé avec le button onclick="nom_fonction()". Quand on clique sur le button, la fonction qui permet faire l’aperçu des photos va être activé.

1.5. Html pour le choix multiple

Pour enregistrer les couleurs de ce objet qui peuvent servir à faire un mieux filitre de la cherche, on peut utiliser <input type="checkbox" onclick="selectSingle()">.

Partie II. Traitement de la saisie: Les propriétés du formulaire

Pour pouvoir utiliser les formulaires, il faut comprendre quelques propriétés de celui-ci. Dans les formulaires comme pour le HTML, on peut accéder à n’importe quelle propriété en saisissant son nom comme pour les propriétés “value”, “disabled”, “checked”, etc. Nous allons traiter dans le paragraphe qui suit quelques propriétés de base du formulaire.

2.1. Propriété 1 : “Value”

<script>
     var text = document.getElementById('text');
   
     text.addEventListener('focus', function(e) {
         e.target.value = "Vous avez le focus !";
     });
 
     text.addEventListener('blur', function(e) {
         e.target.value = "Vous n'avez pas le focus !";
     });
</script>

2.2. Propriété 2: “Valider un formulaire” (Contrôle de saisie)

<script type="text/javascript">

     function ValiderMail(formulaire) {
        if (formulaire.mail.value.indexOf("@",0)<0) 
        {alert("Adresse mail saisie invalide.\n
        Le formulaire ne sera pas validé.")}
        else {
           alert("formulaire validé.\nPour valider un formulaire : formulaire.submit()");
           // Pour valider le formulaire en javascript :
           // formulaire.submit()
        }
     }
</script>

2.3. Propriété 3: “Checked” (cocher une case)

Code de l’exemple:

<label><input type="radio" name="check" value="1" /> 10</label><br />
<label><input type="radio" name="check" value="2" /> 11</label><br />
<label><input type="radio" name="check" value="3" /> 12</label><br />
<label><input type="radio" name="check" value="4" /> 13</label><br />

 <input type="button" value="Afficher la case cochée" onclick="check();" />

<script>
     function check() {
         var inputs = document.getElementsByTagName('input'),
             inputsLength = inputs.length;
 
         for (var i = 0; i < inputsLength; i++) {
             if (inputs[i].type === 'radio' && inputs[i].checked) {
                 alert('La case cochée est la n°' + inputs[i].value);
             }
         }
     }
</script>

2.4. Propriété 4: “SelectedIndex+options” (Les listes déroulantes)

Les listes déroulantes comme les boutons radio possèdent des propriétés bien spécifiques. Parmis ces propriétés on cite:

<select id="list">
     <option>Sélectionnez votre sexe</option>
     <option>Homme</option>  
     <option>Femme</option>
 </select>

-Afficher le contenu de la valeur choisie

<script>
     var list = document.getElementById('list');
 
     list.addEventListener('change', function() {
 
         // On affiche le contenu de l'élément <option> ciblé par la propriété selectedIndex
         alert(list.options[list.selectedIndex].innerHTML);
 
     });
</script>

2.5. Propriété 5: Ajouter, insérer et supprimer des lignes dans une liste

2.6. Méthode 1: Submit (Soumettre/Envoyer le formulaire)

  var element = document.getElementById('un_id_de_formulaire');
  element.submit(); // Le formulaire est expédié

2.7. Méthode 2: Reset (Réinitialiser le formulaire)

 var element = document.getElementById('un_id_de_formulaire');
 
 element.reset();  // Le formulaire est réinitialisé

2.8. Méthode 3: Focus/Blur (Donner ou retirer le focus)

-Définir le texte à saisir au clavier

<input id="text" type="text" value="Entrez un texte" />

-Donner le focus

<input type="button" value="Donner le focus" onclick="document.getElementById('text').focus();" />

-Retirer le focus

<input type="button" value="Retirer le focus" onclick="document.getElementById('text').blur();" />

Partie III. Manipuler le CSS

3.1. Petits rappels

<div style="color:red;"> Ici on modifie la couleur du texte en rouge.</div> 

div {color : red};

Ici on modifie la couleur de texte de tous les éléments div en rouge.

<style> div {color:red;}
</style>
<div style="color:blue;"> Ici, le texte est bleu </div>

3.2 Modifier les éléments CSS en Javascript

<script>element.style.backgroundColor = 'blue'; 
</script>

Partie V. Exemple (TP openclassroom)

Pour mettre en oeuvre ces acquis, on vous invite à faire le TP de Openclasrooms

Ressouces:

This site is open source. Improve this page.