Forum
Posez vos questions, ici

5.Formulaire avancé

5.1.Introduction

Dans la section HTML [c'est quoi?] nous avons vu comment créer un formulaire [comment?] nous avons aussi vu que le nombre de type de champs de formulaire et les paramétrages possibles, même s'ils permettent de répondre à tous les besoins, n'offrent pas de fonctionnalités avancées.
Pour aller plus loin, il faut habiller le code HTML avec une bonne dose de Javascript et de code CSS. Cela peut devenir vite complexe, nous ferons donc appel à un framework Javascript.
  • Notez bien que quelques soient les modifications apportées à l'apparence du formulaire, via ces frameworks, le traitement du formulaire reste inchangé (les champs de saisies même modifiés en apparence restent des champs de saisie). Le formulaire "habillé" se comporte exactement comme un formulaire "brut", les données sont transmises de la même façon en GET [c'est quoi?] ou en POST. Et le traitement qu'il se fasse en PHP [c'est quoi?] [comment?] ou autre reste inchangé.

5.2.Avec Dojo

5.2.1.Installation

Dojo est un de ces frameworks Javascript. Disponible au téléchargement en suivant ce lien Téléchargement de dojo mais surtout, il est disponible en ligne via les adresses:
  • http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.js
  • http://ajax.googleapis.com/ajax/libs/dojo/1.2/dojo/dojo.xd.js
Pour utiliser Dojo, il suffit donc d'intégrer (par exemple) le bout de code suivant dans la section head de la page HTML
<script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true"></script>
Les instructions dojo n'étant prises en compte qu'une fois le document HTML analysé (parsé), nous avons également ajouté l'instruction djConfig="parseOnLoad: true" pour que l'analyse se fasse une fois le document chargé.
Puisque nous allons utiliser la partie présentation de dojo, section appelée dijit, il va nous falloir un tout petit truc en plus. Il faut choisir un thème (comprendre un style de représentation). 3 thèmes sont proposés par défaut: tundra, nihilo et soria. Ceci ne doit pas être un sujet de préoccupation pour le moment et nous prendrons d'office le thème tundra. Pour cela, il y a 2 choses à faire:
  • Intégrer la feuille de style (CSS) associée à ce thème (ainsi que la feuille de style de base et idéalement fixer les marges du document à 0) via le code suivant à placer dans dans la section head et avant l'inclusion du script javascript:
    <style type="text/css">
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/resources/dojo.css";
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dijit/themes/tundra/tundra.css";
    body {
        margin:0;
    }
    </style>
  • Ajouter la classe de style choisie tundra dans la balise body comme suit
    <body class="tundra">
Bon, il se trouve que ce n'est pas encore tout à fait tout (eh oui, il faut souffrir un peu pour rendre beau les formulaires). Pour chaque nouvelle fonctionnalité que l'on souhaite intégrer, il faudra "faire appel" à cette fonctionnalité via un code similaire à
<script type="text/javascript">
    dojo.require("dijit.xxxxxxxxxxx");
</script>
Ce code est à placer, toujours dans la section head mais après les bouts de code précédents.
  • Les noms des différents paquets "dijit.xxxxxxx" vous sera communiqué le moment venu.
En conclusion, pour utiliser le framework dojo, vous devrez intégrer un bout de code similaire à
<html>
  <head>
    <style type="text/css">
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/resources/dojo.css";
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dijit/themes/tundra/tundra.css";
    body {
        margin:0;
    }
    </style>
    <script type="text/javascript" 
            src="http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.js"></script>
    <script type="text/javascript">
        //dojo.require("dijit.xxxxxxxxxxx");
    </script>
    <title>Titre de la page</title>
  </head>
  <body class="tundra">
    <!-- formulaire -->
  </body>
</html>