style="display:none" ou suppression via DOM

**sioux** · 01/05/2010, 23h02

Bonjour,
en faite je m'interroge sur la bonne méthode pour cacher ou montrer certain bloque d'une page web...
Plus précisément une partie d'un formulaire remplacer en fonction d'action utilisateur...

A savoir utiliser "style" ie style="display:none" ou via css
Ou plutot supprimer le tout en utilisant javascript et dom
Ou tout autre solution viable...

Merci d'avance pour vos conseil^^

**Erwan31** · 02/05/2010, 19h51

Bonsoir,
il est un peu difficile de te dire quelle serait la meilleur technique à implémenter sans connaître le contexte exacte mais généralement :

> Si tu veux masquer le contenu à tout le monde quelque soit le média de restitution (y compris les lecteurs d'écran), il faut jouer avec la propriété display (qui est une propriété de rendu et non d'affichage.

> Si tu veux masquer une information à tous les médias visuelle (navigateurs graphique/texte, tv...) mais que tu veux le conserver pour tous les autres, il faut utiliser CSS pour expédier le contenu hors de la zone affichable (via un text-indent négatif par exemple).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

A savoir utiliser "style" ie style="display:none"

Mauvaise idée, le display:none doit être injecté via Javascript tout simplement parce que les utilisateurs qui n'ont pas JS d'activé ne pourront pas y accéder dans les contextes d'utilisation les plus courant (avec CSS).

En règle général ajouter un onclick (indépendant du média, je ne sais pas si le onsubmit fonctionne bien sur les lecteurs d'écran) qui passera le display du bloc à afficher en block et afficher si possible ce bloc juste au dessous (au niveau du code) du bouton de soumissions pour que l'ordre de tabulation se fasse de manière naturelle (sinon il faudra injecter dynamiquement des tabindex pour que le bloc affiché prenne le focus).

Il se peut que j'oublie certains détails.

**sioux** · 02/05/2010, 19h57

voila une petite illustration de ce que j'ai en tête...

solution style="display:none"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>test style="display:none"</title>
 
<script type='text/javascript'>//<![CDATA[
  function start_connection()
  {
    document.getElementById("connection").style.display = "inline";
    document.getElementById("deconnection").style.display = "none";
    document.getElementById("inscription").style.display = "none";
  }
 
  function start_inscription()
  {
    document.getElementById("connection").style.display = "none";
    document.getElementById("deconnection").style.display = "none";
    document.getElementById("inscription").style.display = "inline";
  }
//]]></script> 
 
</head>
 
<body onload="start_connection();">
<!-- Plus loin dans le code -->
<form id="loggin" action="/loggin.php" method="post">
 
<fieldset id="connection" style="display:none;">
<legend>Cool!! Je vien de trouver la zone pour me connecter...</legend>
<p><label>Nom d'utilisateur : <input type="text" id="user_name" maxlength="20"  /></label></p>
<p><label>Mot de Passe : <input type="password" id="user_pwd" maxlength="20" /></label></p>
<p>
<button type="submit" value="connection">Connection</button>
<button type="reset">RaZ</button>
<button type="button" value="inscription" onclick="start_inscription();">Inscription</button>
</p>
</fieldset>
 
<fieldset id="deconnection" style="display:none;">
<legend>Bienvenue Sioux</legend>
<p><button type="submit" value="deconnection">Déconnection</button></p>
</fieldset>
 
<fieldset id="inscription" style="display:none;">
<legend>Cool!! Je vien de trouver la zone pour m'inscrire</legend>
<p><label>Nom d'utilisateur : <input type="text" id="name" maxlength="20" /></label></p>
<p><label>Mot de Passe : <input type="password" id="pwd" maxlength="20" /></label></p>
<p>
<button type="submit" value="inscription">Inscription</button>
<button type="reset">RaZ</button>
</p>
</fieldset>
 
</form>
 
</body>
</html>

solution DOM

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>test DOM</title>
 
<script type='text/javascript'>//<![CDATA[
 
  function clear_element_node(element){      
    // Suppression des noeuds enfants^^
    while (element.firstChild) {
          element.removeChild(element.firstChild);
    }  
  }
  
  function start_inscription(){
    // recherche du noeud parent
    var form = document.getElementById("loggin")
    clear_element_node(form);
  
// création des nouveaux noeuds
var noeud_fieldset = document.createElement("fieldset");
var noeud_legend = document.createElement("legend");
var noeud_p1 = document.createElement("p");
var noeud_label1 = document.createElement("label");
var input1 = document.createElement("input");
var noeud_p2 = document.createElement("p");
var noeud_label2 = document.createElement("label");
var input2 = document.createElement("input");
var noeud_p3 = document.createElement("p");
var button1 = document.createElement("button");
var button2 = document.createElement("button");
 
// paramétrage des nouveaux noeuds
noeud_fieldset.id = "inscription";
noeud_fieldset.style.display = "inline";
 
noeud_legend.appendChild(document.createTextNode("Cool!! Je vien de trouver la zone pour m'inscrire"));
noeud_label1.appendChild(document.createTextNode("Nom d'utilisateur : "));
noeud_label2.appendChild(document.createTextNode("Mot de Passe : "));
 
input1.setAttribute("type","text");//un autre moyen..
input1.id = "user_name";
input1.setAttribute("maxlength","20");
 
input2.id = "user_pwd";
input2.type = "password";
input2.setAttribute("maxlength","20");
 
button1.setAttribute("type","submit");
button1.setAttribute("value","inscription");
button1.appendChild(document.createTextNode("Inscription"));
 
button2.setAttribute("type","reset");
button2.appendChild(document.createTextNode("RaZ"));
 
// raccord des noeuds
form.appendChild(noeud_fieldset);
noeud_fieldset.appendChild(noeud_legend);
noeud_fieldset.appendChild(noeud_p1);
noeud_p1.appendChild(noeud_label1);
noeud_label1.appendChild(input1);
noeud_fieldset.appendChild(noeud_p2);
noeud_p2.appendChild(noeud_label2);
noeud_label2.appendChild(input2);
noeud_fieldset.appendChild(noeud_p3);
noeud_p3.appendChild(button1);
noeud_p3.appendChild(button2);
 
  }
  
  function start_connection(){
    // recherche du noeud parent
    var form = document.getElementById("loggin")
    clear_element_node(form);
  
// création des nouveaux noeuds
var noeud_fieldset = document.createElement("fieldset");
var noeud_legend = document.createElement("legend");
var noeud_p1 = document.createElement("p");
var noeud_label1 = document.createElement("label");
var input1 = document.createElement("input");
var noeud_p2 = document.createElement("p");
var noeud_label2 = document.createElement("label");
var input2 = document.createElement("input");
var noeud_p3 = document.createElement("p");
var button1 = document.createElement("button");
var button2 = document.createElement("button");
var button3 = document.createElement("button");
 
// paramétrage des nouveaux noeuds
noeud_fieldset.id = "connection";
noeud_fieldset.style.display = "inline";
 
noeud_legend.appendChild(document.createTextNode("Cool!! Je vien de trouver la zone pour me connecter..."));
noeud_label1.appendChild(document.createTextNode("Nom d'utilisateur : "));
noeud_label2.appendChild(document.createTextNode("Mot de Passe : "));
 
input1.setAttribute("type","text");//un autre moyen..
input1.id = "user_name";
input1.setAttribute("maxlength","20");
 
input2.id = "user_pwd";
input2.type = "password";
input2.setAttribute("maxlength","20");
 
button1.setAttribute("type","submit");
button1.setAttribute("value","connection");
button1.appendChild(document.createTextNode("Connection"));
 
button2.setAttribute("type","reset");
button2.appendChild(document.createTextNode("RaZ"));
 
button3.setAttribute("type","button");
button3.setAttribute("value","inscription");
button3.setAttribute("onclick","start_inscription();");
button3.appendChild(document.createTextNode("Inscription"));
 
// raccord des noeuds
form.appendChild(noeud_fieldset);
noeud_fieldset.appendChild(noeud_legend);
noeud_fieldset.appendChild(noeud_p1);
noeud_p1.appendChild(noeud_label1);
noeud_label1.appendChild(input1);
noeud_fieldset.appendChild(noeud_p2);
noeud_p2.appendChild(noeud_label2);
noeud_label2.appendChild(input2);
noeud_fieldset.appendChild(noeud_p3);
noeud_p3.appendChild(button1);
noeud_p3.appendChild(button2);
noeud_p3.appendChild(button3);
 
  }
    
//]]></script> 
 
</head>
 
<body onload="start_connection();">
<!-- Plus loin dans le code -->
<form id="loggin" action="/loggin.php" method="post">
 
</form>
 
</body>
</html>

bon on se passera de la partie dynamique ie php et un petit objet XMLHttpRequest comme ce n'est pas le sujet^^

Edit :
en réponse a Erwan31 :
- concernant les utilisateurs qui n'ont pas JS d'activé, le code sera ajouté sur un site perso ou je suis le seul a m'imposer des contraintes lol
Je veus dire par la que c'est un site fréquenté par des amis donc un coup de pieds au *** et ils auront JS

Pour le reste même chose >> pourvu que ça marche sur les navigateurs récents c'est bon^^

Tendance : je commence a opter pour la version DOM quitte a faire quelques fonctions pour faciliter la création des champs du formulaire

**Erwan31** · 02/05/2010, 20h21

Si tu veux savoir si ton code JS est correct, il faudra demander cela dans le salon JS, je ne suis pas du tout expert en JS désolé.

Sinon pour le reste, je te conseil d'ajouter au moins le type MIME dans le head
et d'autre part, si le serveur envoie celui-ci en text/html (préférable puisque IE ne reconnait pas les type MIME XML) alors la déclaration XML est inutile (en plus de faire basculer IE6 en mode Quirks) et les commentaires HTML classiques suffisent pour le JS.