Webinaires
Réaliser des aides pour les formulaires avec CSS et Javascript
Depuis la version 0.14a d'e-majne, vous avez certainement rencontré une
nouveauté sur les formulaires. Lors de l'ajout de champs de formulaires, il est
possible de remplir un nouveau champ, le champ d'information : 
On peut se servir
de ce champ pour compléter le libellé du champ afin de donner plus
d'informations sur le champ à compléter. Nous allons voir comment gérer
l'affichage de ces champs de façon un peu moins brut, voir un peu tendance... Attention, ce billet est relativement
long, donc pour ceux qui n'ont pas trop le temps voici le résultat final
voir le résultat final
Le XHTML et le CSS :
Tout d'abord, il va falloir modifier vos templates si vous voulez pouvoir remonter ce champ de nouveauté pour qu'au niveau du HTML, cela nous donne quelque chose comme cela :
<div class="row">
<label for="libelleid">
libelle
<span class="obligatory">*</span> :
</label>
<span>
<input name="libelle" id="libelleid" type="text">
<span class="aide">
<p>
voici mon champ d'information
</p>
</span>
</span>
</div>
Ce qui impose pour le template creator_form.html de rajouter cet élément à la place des champs de formulaire :
<span >
<mx:text id="fields_input"/>
<mx:bloc id="additionnals_informations">
<span class="aide">
<mx:text id="additionnals_informations" />
</span>
</mx:bloc id="additionnals_informations">
</span>
Si maintenant on appliquait un peu de CSS afin de rendre tout ça un peu plus propre.
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:65%;
}
*{
margin:0;
padding:0;
}
form{
width:600px;
}
fieldset{
border: 1px solid #757575;
margin:10px;
padding:5px;
}
legend{
color:#757575;
font-size:1.1em;
font-weight: bold;
padding:0 5px;
}
.row{
clear:both;
margin: 5px;
padding: 5px;
position:relative;
}
label{
float:left;
width:170px;
}
input, select, textarea{
border: 1px solid #999999;
text-align:left!important;
width: auto;
}
Si maintenant on applique un style à nos aides, voici ce que cela donne. On
pourra remarquer que les aides sur les champs de formulaires sont masqués par
défaut à l'aide d'un display:none;, car nous allons afficher ces
aides uniquement lorsque l'internaute aura placé sa souris dans le champs
(focus).
.aide {
display:none;
width: 191px;
z-index:800;
margin:-5px 0 0 15px;
position:absolute;
background:url(/common_images/skin001/form_aide.gif) bottom right no-repeat;
}
.aide p{
margin:0;
padding:10px 12px 10px 18px;
background:url(/common_images/skin001/pointer_form.gif) top right no-repeat;
}
Le Javascript :
On va maintenant en javascript parser notre page afin de trouver tout les champs de formulaire de type input, et pour chacun d'entre eux, nous allons réagir au focus en affichant l'aide et enlever cette aide lorsque le curser de la souris ne se trouve plus dans mon champ de formulaire (onblur).
function prepareInputsForHints() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
inputs[i].onfocus = function () {
if(this.parentNode.getElementsByTagName("span").length>0){
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
}
inputs[i].onblur = function () {
if(this.parentNode.getElementsByTagName("span").length>0){
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
}
Il va falloir faire exactement la même manipulation pour les champs de type
select (liste déroulante) et textarea (texte multilignes), juste ici aucun
soucis, on change les input par les champs de formulaire correspondant.
Malheureusement, avec e-majine il existe un peu plus que ces champs de
formulaire, il faut aussi prévoir l'affichage de mes champs de formulaire de
type input radio et case à cocher qui ont une structure XHTML différente que
des champs de formulaire normaux, donc il va falloir gérer des conditions et un
fonctionnement différent de ce script. Et puis il y a aussi le soucis pour les
champs de formulaire de type file, pour lesquelles la réaction au comportement
focus se fait sur le bouton parcourir, ce qui en sera visible que pour les
utilisateur qui naviguent à l'aide de la touche tabulation, donc pour ces
champs de type fichier, l'affichage de l'aide se fera au survol.
Je vous fait grâce du fonctionnement de ce script, pour les plus curieux, tout
se trouve dans le ficher à télécharger ci-dessous.
Télécharger la première version du script.
Un peu d'animation avec tout ça :
Maintenant, si on jouait avec des effets à la sauce 2.0, jouer d'accord mais en toute légèetré d'abbord, voici donc une librairie qui regroupe juste des effets graphique pour seulement 4ko, simple.js. Parmis tout les effets que propose cette librairie javascript, il y en a un qui m'intéresse tout particulièrement c'est $opacity qui va me permettre d'afficher l'aide nom seulement dans la bulle grâce à mes styles, mais aussi en fondu, il faut donc tout d'abord faire appel à cette librairie :
<script type="text/javascript" src="/common_scripts/simple.js"></script>
Lorsqu'on regarde la documentation de cette librairie javascript pour cette fonction, il est écrit :
$opacity(id, opacStart, opacEnd, millisec)
On remarque donc que cette fonction s'applique à un identifiant, avec une
opacité de départ et de fin, et une durée en millisecondes entre les deux
opacités. Le soucis c'est qu'avec e-majine, nous n'avons pas d'identifiant sur
les balises span qui entourent nos aides, pas de soucis, grâce au
javascript et surtout du DOM, nous allons recréer ces identifiants.
var identifant = this.parentNode.getElementsByTagName("span")[0].setAttribute("id", this.id+'aide');
Et nous allons donc pouvoir appliquer la fonction qui gère l'opacité
$opacity(this.id+'aide', 0, 100, 1500);
Ce qui nous donne au final :
inputs[i].onfocus = function () {
if(this.parentNode.getElementsByTagName("span").length>0){
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
var identifant = this.parentNode.getElementsByTagName("span")[0].setAttribute("id", this.id+'aide');
$opacity(this.id+'aide', 0, 100, 1500);
return false;
}
}
inputs[i].onblur = function () {
if(this.parentNode.getElementsByTagName("span").length>0){
var identifant = this.parentNode.getElementsByTagName("span")[0].setAttribute("id", this.id+'aide');
$opacity(this.id+'aide', 100, 0, 1500);
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
return false;
}
}
Attention, il est important de remarquer qu'à la réaction sur le
onblur, je repasse l'opacité à 0, sinon lorsqu'on clique deux fois
sur un même élément de formulaire, la gestion de l'opacité ne sera pas
bonne.
Et l'accessibilité dans tout ça
Exact, comment font les utilisateurs ne disposant pas de javascript pour
avoir accès à ces champs d'aide dans les formulaires. Et bien plutôt que
d'appliquer les styles (avec un style display:none;) à ces champs
pour tout les utilisateurs, je vais insérer ces styles la via javascript.
document.write('<style type="text/css">.aide {filter:Alpha(opacity=0); -moz-opacity:0; opacity:0;display:inline;width: 191px;z-index:800;margin:-5px 0 0 15px;position:absolute;background:url(/common_images/skin001/form_aide.gif) bottom right no-repeat;}.aide p{margin:0;padding:10px 12px 10px 18px;background:url(/common_images/skin001/pointer_form.gif) top right no-repeat;}</style>');
Désormais, il ne reste plus qu'a intégrer ces deux fichiers javascript
<script type="text/javascript" src="/common_scripts/simple.js"></script> <script type="text/javascript" src="/common_scripts/helpForm.js"></script>
Voici le résultat final.
Billet original sur Simon Bonaventure