0byt3m1n1
Path:
/
data
/
applications
/
aps.bak
/
coppermine
/
1.5.12-0
/
standard
/
htdocs
/
docs
/
fr
/
[
Home
]
File: dev_coding.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <title>Guide de codage et de programmation - Documentation du développeur - Coppermine Photo Gallery - Documentation & manuel</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="language" content="fr" /> <meta name="copyright" content="Coppermine dev team" /> <meta name="description" content="Cette partie de la documentation n'est pas destinée aux utilisateurs finaux, mais uniquement pour les développeurs. Il n'y a pas d'aide pour cette section, elle est là telle qu’elle." /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta http-equiv="imagetoolbar" content="no" /> <!-- SVN version info: Coppermine version: 1.5.12 $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.5.x/docs/fr/dev_coding.htm $ $Revision: 8154 $ --> <link rel="stylesheet" type="text/css" href="../style/style.css" media="all" /> <link rel="stylesheet" type="text/css" href="../style/screen.css" media="screen" /> <link rel="stylesheet" type="text/css" href="../style/print.css" media="print" /> <link rel="shortcut icon" href="../favicon.ico" /> <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.treeview.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> </head> <body> <h1 id="docheader">Coppermine Photo Gallery v1.5.x: Documentation et manuel</h1> <div id="toc"> <a href="toc.htm">Table des matières</a> </div> <a name="dev_coding"></a><h1>Règles de travail pour le codage<a href="#dev_coding" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h1> <a name="dev_coding_target_audience"></a><h2>Public ciblé<a href="#dev_coding_target_audience" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>Cette partie de la documentation n'est pas à destination des utilisateurs de Coppermine, mais uniquement pour les développeurs. Il n'y a pas d'aide pour ces chapitres, ils sont livrés tels quels.</p> <p>Les utilisateurs finaux qui veulent modifier leur copie de Coppermine, sont encouragés à suivre ces règles eux aussi.</p> <a name="dev_coding_scope"></a><h2>Objet<a href="#dev_coding_scope" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>Comme Coppermine est un travail d'équipe, les membres de l'équipe qui contribuent doivent s'assurer que le code reste facile à lire, à comprendre et à maintenir. C'est pourquoi il y a ici un certain nombre de règles qu'il faut respecter lorsque l'on travaille sur le code source de Coppermine. Bien que cette partie de la documentation soit pour les membres de l'équipe de développement de Coppermine, les utilisateurs qui souhaitent contribuer avec leur code de quelque manière que ce soit sont priés de répéter ces règles autant que possible (si vous les comprenez totalement).</p> <p>Les règles de codage de cette page ne sont pas gravées dans le marbre - si vous (en tant que membre de l'équipe de développement) trouvez pendant le développement, qu'une de ces règles doit être révisée ou changée, commencez un sujet sur le forum de discussion dédié au développement (dev board) pour en discuter.</p> <hr /> <a name="dev_coding_indentation"></a><h2>Indentation<a href="#dev_coding_indentation" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <ul> <li>Utilisez une indentation de 4 espaces sans tabulations. La plupart des éditeurs peuvent être configurés pour cela.</li> <li>N'hésitez pas à laisser des lignes vides entre les "sections logiques" du code, mais n'en utilisez pas de trop, l'ensemble deviendrait trop espacé</li> </ul> <hr /> <a name="dev_coding_encoding"></a><h2>Encodage<a href="#dev_coding_encoding" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> L'encodage standart dans Coppermine est UTF-8 sans <abbr title="Byte Order Mark">BOM</abbr>. Tous les fichiers non-binaires doivent être encodés en UTF-8 (Unicode). <hr /> <a name="dev_coding_general"></a><h2>Règles générales<a href="#dev_coding_general" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <ul> <li>Dans les requêtes ou dans le code, mettez toujours un espace avant et après un opérateur</li> </ul> <hr /> <a name="dev_coding_php"></a><h2>Code PHP<a href="#dev_coding_php" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <a name="dev_coding_formatting"></a><h3>Formatage<a href="#dev_coding_formatting" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <ul> <li>Le signe égal doit être aligné avec les éléments environnants<br /> <div class="cpg_example"> Mauvais exemple: <pre class="cpg_code code">$pic_title = 'My picture'; $album = 'lastup'; $update_time = true;</pre> Bon exemple: <pre class="cpg_code code">$pic_title = 'My picture'; $album = 'lastup'; $update_time = true;</pre> </div> </li> <li>Les tableaux à valeurs multiples ne doivent pas être déclarés sur une seule ligne. Ils ne peuvent être déclarés sur une seule ligne que s’ils ne contiennent qu'une seule valeur</li> <li>Toujours mettre une virgule après la dernière valeur dans la déclaration d'un tableau (array)</li> <li>Toujours aligner les doubles flèches d'un tableau sur une ligne, et il doit y avoir un espace simple après la flèche (avant la valeur)</li> <li>Chaque ligne dans la déclaration 'un tableau doit se terminer par une virgule<br /> <div class="cpg_example"> Mauvais exemples: <pre class="cpg_code code"> $foo = array('one', 'two', 'three'); $bar = array( 'one' => 1, 'two' => 3, 'three' => 3 ); $multi = array('first' => 'one', 'second' => array('2'), 'third' => array('foo' => 'bar', 'hello' => 'world')); </pre> Bons exemples: <pre class="cpg_code code"> $foo = array( 'one', 'two', 'three', ); $bar = array( 'one' => 1, 'two' => 2, 'three' => 3, ); $multi = array( 'first' => 'one', 'second' => array('2'), // Comme il n'y a qu'une valeur dans le tableau, il peut être déclaré dans la même ligne 'third' => array( 'foo' => 'bar', 'hello' => 'world', ), ); </pre> </div> </li> <li>Utilisez <tt class="code">echo</tt> à la place de <tt class="code">print</tt></li> <li>Utilisez des guillemets simples au lieu des guillemets doubles <div class="cpg_example"> Mauvais: <pre class="cpg_code code">$foo_array["bla"] = "whatever";</pre> Bon: <pre class="cpg_code code">$foo_array['bla'] = 'whatever';</pre> </div> </li> <li>N'utilisez pas d'espaces ni de majuscules dans les définitions associées aux tableaux <div class="cpg_example"> Mauvais: <pre class="cpg_code code">$bla_array['foo Bar'] = 'some string';</pre> Bon: <pre class="cpg_code code">$bla_array['foo_bar'] = 'some string';</pre> </div> </li> </ul> <a name="dev_coding_control_structures"></a><h3>Structures de contrôle<a href="#dev_coding_control_structures" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <p>cela inclue <tt class="code">if</tt>, <tt class="code">for</tt>, <tt class="code">while</tt>, <tt class="code">switch</tt>.</p> <ul> <li>Les éléments de contrôle doivent avoir un espace entre le mot-clé de contrôle et l'ouverture de la parenthèse, pour les distinguer des appels de fonctions</li> <li>Toujours utiliser les accolades, même dans les cas ou elles sont techniquement optionnelles - cela augmente la lisibilité et diminue le risque d'erreur lors de l'ajout de lignes</li> <li>Toujours commencer une nouvelle ligne pour l'ouverture ou la fermeture des accolades<br /> <div class="cpg_example">Mauvais exemple:<pre class="cpg_code code">if ($foo = 'bar') { echo 'Hello world'; }</pre>Mauvais exemple:<pre class="cpg_code code">if ($foo = 'bar') { echo 'Hello world'; }</pre>Bon exemple:<pre class="cpg_code code">if ($foo = 'bar') { echo 'Hello world'; }</pre>Bon exemple:<pre class="cpg_code code">if ($foo = 'bar') { echo 'Hello world'; }</pre></div></li> </ul> <a name="dev_coding_function_calls"></a><h3>Appel des fonctions<a href="#dev_coding_function_calls" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <ul> <li>Les fonctions doivent être appelées sans espaces entre le nom de la fonction, l'ouverture de la parenthèse, et le premier paramètre, des espaces entre les virgules et chaque paramètres, et sans espace entre le dernier paramètre, la parenthèse de fin et le point-virgule.</li> <li>Il doit y avoir un espace de chaque coté du signe égal utilisé pour assigner la valeur retournée par une fonction vers une variable. Dans le cas d'un bloc de tâches liées, plus d'espace doivent être insérés pour une plus grande lisibilité.</li> </ul> <a name="dev_coding_function_definitions"></a><h3>Définition des fonctions<a href="#dev_coding_function_definitions" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <ul> <li>La définition des fonctions suit le modèle d'indentation 1TBC:<pre class="cpg_code code"><?php function fooFunction($arg1, $arg2 = '') { if (condition) { statement; } return $val; } ?></pre></li> <li>Les arguments avec une valeur par défaut doivent être en fin de liste des paramètres</li> <li>Il doit y avoir deux lignes vierges avant et après la déclaration de la fonctionT</li> <li>N'utilisez pas de fonctions qui n'existent pas dans PHP4.3 ou précédent (et n'utilisez pas non plus de fonctions qui ont été enlevées par la suite!) à moins de les définir pour leurs versions.</li> </ul> <a name="dev_coding_php_tags"></a><h3>Balise de code PHP<a href="#dev_coding_php_tags" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <ul> <li>Utilisez toujours <tt class="code"><?php ?></tt> pour délimiter le code PHP, pas la version abrégée <tt class="code"><? ?></tt>, parce que la version longue fonctionne avec tous les paramétrages de serveur, alors que la version abrégée ne fonctionne pas partout.</li> </ul> <a name="dev_coding_html_nesting"></a><h3>Imbrication de HTML en PHP<a href="#dev_coding_html_nesting" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <p>Lorsqu'il y a plus d'une ligne d'HTML à afficher, la <a href="http://de2.php.net/manual/fr/language.types.string.php#language.types.string.syntax.heredoc" rel="external" class="phpnet">syntaxe Heredoc</a> doit être utilisée au lieu de suspendre le processus PHP pour le rependre ensuite.</p> <div class="cpg_example"> <p>Bon:</p> <pre class="cpg_code code">// PHP content here if ($foo == $bar) { print <<< EOT <h1>Hello {$bla}</h1> EOT; }</pre> <p>Mauvais:</p> <pre class="cpg_code code">// PHP content here if ($foo == $bar) { ?> <h1>Hello <?php echo $bla; ?></h1> <?php }</pre> </div> <hr /> <a name="dev_coding_linebreaks"></a><h3>Fin de ligne<a href="#dev_coding_linebreaks" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <p>Pour afficher une fin de ligne dans la sortie HTML, utilisez <a href="http://www.php.net/manual/fr/language.types.string.php#language.types.string.syntax.heredoc" rel="external" class="phpnet">la syntaxe heredoc</a> ou utilisez la variable <tt class="code">$LINEBREAK</tt> au lieu de coder des fins de lignes en dur dans le code.</p> <p>N'oubliez pas de rendre la variable <tt class="code">$LINEBREAK</tt> globale dans les fonctions.</p> <div class="cpg_example"> <p>Bon:</p> <pre class="cpg_code code">echo '<h1>Hello world</h1>' . $LINEBREAK; echo '<p>foo bar</p>'; }</pre> <p>Mauvais:</p> <pre class="cpg_code code">echo "<h1>Hello world</h1>\n"; echo '<p>foo bar</p>'; }</pre> </div> <hr /> <a name="dev_coding_naming_conventions"></a><h3>Convention de nommage<a href="#dev_coding_naming_conventions" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <ul> <li><strong>Les fonctions</strong> elles doivent être nommées en minuscules et utiliser l'annotation avec soulignement ex: <tt class="code">function_name()</tt></li> <li><strong>Les variables</strong> Suivez la même convention (minuscule et utilisation du caractère de soulignement), par contre les variables globales doivent être en MAJUSCULES (ex: <tt class="code">$CONFIG</tt>)</li> <li>Les superglobales (e.x. $_GET ou $_POST) doivent être sécurisées en utilisant Inspekt - référez vous au chapitre "<a href="dev_superglobals.htm#superglobals_sanitization">Sécurisation des Superglobales en utilisant Inspekt</a>"</li> <li><strong>Les constantes</strong> doivent être définies en MAJUSCULES avec le caractère de soulignement comme séparateur de mots</li> <li><strong>Les noms de fichiers</strong> doivent suivre la même convention d'utilisation du caractère de soulignement mais doivent être entièrement en minuscules</li> <li>Comme toujours, les noms descriptifs (pour les répertoires/fichiers/fonctions/variables/constantes) sont préférables au genre "$egYtesIopnfer". (sauf pour l'utilisation de compteurs, $i, etc.)</li> </ul> <div class="cpg_message_success">Pour les créateurs de plugins il y a une section plus détaillée <a href="dev_plugins.htm#plugin_writing_naming_conventions">sur les conventions de nommage</a> décrivants aussi les noms de packages.</div> <hr /> <a name="dev_coding_database"></a><h2>Requêtes dans la base de données<a href="#dev_coding_database" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <ul> <li>Toujours libérer les ressources MySQL. (ainsi que les autres!)</li> <li>Dans les requêtes, toujours mettre en capitales les commandes : <tt class="code">SELECT</tt>, <tt class="code">INSERT</tt>, <tt class="code">REPLACE</tt>, <tt class="code">UPDATE</tt>, <tt class="code">DELETE</tt>, etc. doivent toutes être en capitales</li> <li>Dans les requêtes, mettre toujours en capitales <tt class="code">WHERE</tt>, <tt class="code">AND</tt>, <tt class="code">OR</tt>, <tt class="code">LIMIT</tt>, <tt class="code">FROM</tt>, <tt class="code">JOIN</tt>, <tt class="code">AS</tt>, <tt class="code">ON</tt>, etc.</li> <li>Ne pas utiliser de noms de champs qui sont aussi des mots-clés de MySQL</li> <li>N'utilisez pas de fonctions Mysql qui ne sont pas utilisables avec MySQL 3.23.4 et précédent</li> <li>Optimisez toutes les requêtes pour MySQL 4, même si comme dit plus haut elles doivent fonctionner avec une version antérieure</li> <li>Utilisez <tt class="code">LIMIT</tt> pour les requêtes à chaque fois que c'est possible</li> <li><tt class="code">LEFT JOIN</tt> est plus lent que le simple <tt class="code">JOIN</tt> (ou les virgules) donc vous devez les éviter si possible</li> <li>Ce n'est pas <tt class="code">messages as m</tt>, mais <tt class="code">messages AS m</tt>, parce que <tt class="code">AS</tt> est un mot clé MYSQL</li> <li>Lorsque vous faites un <tt class="code">JOIN</tt>, la(les) table(s) reliées sont en premier dans la clause <tt class="code">ON</tt></li> </ul> <hr /> <a name="dev_coding_documentation"></a><h2>Documentation<a href="#dev_coding_documentation" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <ul> <li>Laissez la documentation correctement intégrée en haut des fichiers</li> <li>Laissez la documentation/les commentaires en tête de fichier avec une limite de 80 caractères</li> <li>Commencez chaque ligne avec une majuscule, et utilisez une grammaire correcte. (temps et le reste!)</li> <li>Il y a un sous-chapitre de la documentation du développeur qui traite de <a href="dev_documentation.htm">modifier la documentation</a> - Merci d'en tenir compte</li> <li>Il y a des étapes particulières lors de <a href="dev_config.htm">l'ajout d'une option de configuration</a> - Merci de vous référer au chapitre correspondant de la documentation.</li> </ul> <hr /> <a name="dev_coding_html_output"></a><h2>Sortie HTML<a href="#dev_coding_html_output" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <ul> <li>Toujours refermer les input, img, hr, et autres éléments qui ne peuvent rien contenir. (<tt class="code"><tagname <strong>/</strong>></tt>)</li> <li>Coppermine est destiné à être conforme aux standards Web, Il faut donc toujours essayer de faire du code HTML et CSS valide. En particulier, les sorties vues par les visiteurs de la galerie (et par les robots des moteurs de recherche) doivent être totalement valides; les sorties uniquement vues par l'administrateur peuvent être moins strictes (Mais vous devez <em>essayer</em> de coder des sorties valides pour la partie administrateur malgré tout). Il y a une exception à cette règle de validité aux standards: si le code respectueux des standards brise les fonctionnalités de base des navigateurs principaux comme l'actuelle implémentation des objets embarqués qui ne sont pas respectueux des standards parce que IE5.x " ne respecte pas" le mode standard, il est acceptable de créer une sortie qui n'est pas valide au regard des standards. Dans ce cas, assurez vous de rendre attentif les autres en les dirigeant vers la section (<a href="known_issues.htm">problèmes connus</a> de la documentation, mais au moins ajoutez quelques commentaires au code).</li> <li>Assurez vous qu'il n'y a pas de caractère <tt class="code">&</tt>-(esperluettes) non échappés dans les sorties HTML. Les esperluettes doivent toujours être échappés comme ceci <tt class="code">&amp;</tt>.</li> <li>Les caractères<tt class="code"><</tt> et <tt class="code">></tt>-qui doivent s'afficher dans la sortie (qui ne composent pas de balises) doivent être codées ainsi <tt class="code">&lt;</tt> et <tt class="code">&gt;</tt></li> <li>Laissez les attributs id uniques, et essayez de faire en sorte que id et name soient les mêmes si les deux sont définis</li> </ul> <a name="dev_coding_html_output_images"></a><h3>Balises images dans les sorties HTML<a href="#dev_coding_html_output_images" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <ul> <li>Toujours mettre un attribut "alt" à tous les éléments images, même si le "alt" est vide</li> <li>L'attribut "border" est obligatoire - si vous l'oubliez, les vieux navigateurs vont afficher un cadre par défaut</li> <li>Si possible (par exemple si les dimensions d'une image sont connues) utilisez les attributs "width" et "height"</li> <li>N'utilisez pas le titre comme contenu du "alt", ne l'utilisez que si le titre est nécessaire (comme pour les icônes)</li> <li>Si vous avez besoin d'un gif aveugle; utilisez celui qui est toujours dans Coppermine (<tt class="code">./images/spacer.gif</tt>) au lieu d'en créer un pour votre thème personnalisé, plugin ou autres</li> </ul> <a name="dev_coding_html_output_links"></a><h3>Liens dans les sorties HTML<a href="#dev_coding_html_output_dev_coding_html_output_links" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <ul> <li>N'utilisez pas l'attribut "target", il est invalide. Utilisez <tt class="code"><a href="http://exemple.com/" rel="external" class="external"></tt> à la place. L'utilisateur final peut alors facilement utiliser JavaScript pour ouvrir le lien dans une nouvelle fenêtre s'il le souhaite.</li> </ul> <a name="dev_coding_html_output_form"></a><h3>Eléments de formulaires dans les sorties HTML<a href="#dev_coding_html_output_form" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <ul> <li> Il est obligatoire d'utiliser des classes CSS particulières pour cetains éléments de formulaires: <ul> <li><tt class="code"><input type="text" class="textinput" /></tt></li> <li><tt class="code"><input type="submit" class="button" /></tt></li> <li><tt class="code"><input type="radio" class="radio" /></tt></li> <li><tt class="code"><input type="checkbox" class="checkbox" /></tt></li> <li><tt class="code"><select class="listbox" /></tt></li> </ul> </li> </ul> <a name="dev_coding_html_output_deprecated"></a><h3>Balises dépréciées<a href="#dev_coding_html_output_deprecated" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <p>Les balises HTML dépréciées comme <tt class="code"><font></tt> ne doivent pas être introduites dans Coppermine sans qu'il n'y ait une raison valide et documentée de faire de la sorte.</p> <a name="dev_coding_html_prefered_tags"></a><h3>Balises préférées<a href="#dev_coding_html_prefered_tags" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <p>Les balises populaires comme <tt class="code"><b></tt> et <tt class="code"><i></tt> sont considérées comme dépréciées. Du fait de leur popularité, les navigateurs les supporteront certainement encore pendant un certain temps. Néanmoins, il y a de meilleures alternatives. Pour <tt class="code"><b></tt>, la balise de remplacement est <tt class="code"><strong></tt>. Pour <tt class="code"><i></tt>, la balise de remplacement est <tt class="code"><em></tt>. Si possible, utilisez ces balises de remplacement aussi bien pour les sorties générées par Coppermine que pour la documentation.</p> <hr /> <a name="dev_coding_credits"></a><h2>Crédits pour les règles de codage<a href="#dev_coding_credits" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>Les règles principales de cette page ont été esquissées par Dr. Tarique Sani comme un sous-ensemble de lignes directrices de codage PEAR. Les sorties HTML et la section concernant la base de donnée sont basées sur un sujet crée par Unknown W. Brackets <a href="http://www.simplemachines.org/" rel="external" class="external">Simplemachines</a>.</p> <hr /> <a name="dev_coding_usability"></a><h2>Facilité d'utilisation<a href="#dev_coding_usability" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> Avoir de bonnes connaissances en programmation est important, mais il est tout aussi important de coder correctement en terme de facilité d'utilisation. <a name="dev_coding_usability_forms"></a><h3>Formulaires<a href="#dev_coding_usability_forms" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <a name="dev_coding_usability_forms_less_clicks"></a><h4>Moins il y a de clics, mieux c'est<a href="#dev_coding_usability_forms_less_clicks" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h4> Les listes déroulantes sont géniales s'il y a beaucoup d'options de choix, mais elles sont moins bonnes si il n'y a que deux ou trois options: l'utilisateur doit cliquer sur la liste pour voir quelles options existent. <div class="cpg_example"> Au lieu de venir avec un liste de sélection comme <div class="border1"> <select name="some_name" size="1" class="listbox"> <option value="0" selected="selected">Aller à la première</option> <option value="1">Restez ou vous êtes</option> <option value="2">Aller à la dernière</option> </select> </div> il est plus intuitif pour l'utilisateur d'afficher les différentes options possibles sous forme de boutons radio: <div class="border1"> <input type="radio" name="option" id="option0" value="0" class="radio" checked="checked" /><label for="option0" class="clickable_option">Allez à la première</label> <input type="radio" name="option" id="option1" value="1" class="radio" /><label for="option1" class="clickable_option">Restez ou vous êtes</label> <input type="radio" name="option" id="option2" value="2" class="radio" /><label for="option2" class="clickable_option">Allez à la dernière</label> </div> </div> <div class="cpg_example"> Si vous voulez juste un commutateur pour basculer d'une option à l'autre utilisez une boite à cocher comme <div class="border1"> <input type="checkbox" name="display_graph" id="display_graph" value="1" class="checkbox" /><label for="display_graph" class="clickable_option">Afficher le graphique</label> </div> au lieu de <div class="border1"> Afficher le graphique: <input type="radio" name="option_display_graph" id="option_display_graph0" value="0" class="radio" checked="checked" /><label for="option_display_graph0" class="clickable_option">Oui</label> <input type="radio" name="option_display_graph" id="option_display_graph1" value="1" class="radio" /><label for="option_display_graph1" class="clickable_option">Non</label> </div> ou même <div class="border1"> <select name="bad_usage_of_select" size="1" class="listbox"> <option value="0" selected="selected">Afficher le graphique</option> <option value="1">Ne pas afficher le graphique</option> </select> </div> </div> <a name="dev_coding_usability_forms_label"></a><h4>Une plus grande surface cible pour les clics<a href="#dev_coding_usability_forms_label" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h4> Il peut être difficile de cliquer sur une simple case à cocher ou un bouton radio - c'est la raison pour laquelle la balise HTML <tt class="code"><label></tt> a été inventée: si vous l'utilisez judicieusement, le texte correspondant à une option particulière représentée par une case à cocher ou un bouton radio peut être cliquable pour changer l'état de la case à cocher ou du bouton radio. <table cellspacing="0" cellpadding="0" border="0" width="100%" class="maintable"> <tr> <th class="tableh1" width="50%"> Mauvais exemple </th> <th class="tableh1" width="50%"> Bon exemple </th> </tr> <tr> <td class="cpg_message_error"> <fieldset class="cpg_example"> <legend>Sortiet</legend> <input type="radio" name="option_nolabel" value="0" class="radio" checked="checked" />Aller au premier<br /> <input type="radio" name="option_nolabel" value="1" class="radio" />Restez ou vous êtes<br /> <input type="radio" name="option_nolabel" value="2" class="radio" />Aller au dernier </fieldset> <fieldset class="cpg_code"> <legend>Code</legend> <div class="smallcode"><input type="radio" name="option_nolabel" value="0" class="radio" checked="checked" />Aller au premier<br /><br /> <input type="radio" name="option_nolabel" value="1" class="radio" />Restez ou vous êtes<br /><br /> <input type="radio" name="option_nolabel" value="2" class="radio" />Allez au dernier</div> </fieldset> </td> <td class="cpg_message_success"> <fieldset class="cpg_example"> <legend>Sortie</legend> <input type="radio" name="option_label" id="option_label0" value="0" class="radio" checked="checked" /><label for="option_label0" class="clickable_option">Aller au premier</label><br /> <input type="radio" name="option_label" id="option_label1" value="1" class="radio" /><label for="option_label1" class="clickable_option">Restez ou vous êtes</label><br /> <input type="radio" name="option_label" id="option_label2" value="2" class="radio" /><label for="option_label2" class="clickable_option">Allez au dernier</label> </fieldset> <fieldset class="cpg_code"> <legend>Code</legend> <div class="smallcode"><input type="radio" name="option_label" id="option_label0" value="0" class="radio" checked="checked" /><br /> <label for="option_label0" class="clickable_option">Aller au premier</label><br /><br /> <input type="radio" name="option_label" id="option_label1" value="1" class="radio" /><br /> <label for="option_label1" class="clickable_option">Restez ou vous êtes</label><br /><br /> <input type="radio" name="option_label" id="option_label2" value="2" class="radio" /><br /> <label for="option_label2" class="clickable_option">Allez au dernier</label></div> </fieldset> </td> </tr> <tr> <td class="cpg_message_error"> <fieldset class="cpg_example"> <legend>Sortie</legend> <input type="checkbox" name="display_graph_nolabel" value="1" class="checkbox" />Display graph </fieldset> <fieldset class="cpg_code"> <legend>Code</legend> <div class="smallcode"><input type="checkbox" name="display_graph_nolabel" value="1" class="checkbox" />Display graph</div> </fieldset> </td> <td class="cpg_message_success"> <fieldset class="cpg_example"> <legend>Sortie</legend> <input type="checkbox" name="display_graph_label" id="display_graph_label" value="1" class="checkbox" /><label for="display_graph_label" class="clickable_option">Afficher le graphique</label> </fieldset> <fieldset class="cpg_code"> <legend>Code</legend> <div class="smallcode"><input type="checkbox" name="display_graph_label" id="display_graph_label" value="1" class="checkbox" /><label for="display_graph_label" class="clickable_option">Afficher le graphique</label></div> </fieldset> </td> </tr> <tr> <td class="tablef" colspan="2" align="center">Cliquez sur les mots à côté des boutons radio pour voir la différence !</td> </tr> </table> <div id="doc_footer"> <div class="doc_info_wrapper"> <span id="doc_last_changed">$LastChangedDate: 2011-01-02 20:44:22 +0100 (So, 02 Jan 2011) $</span> <span id="doc_revision">$Revision: 8154 $</span> </div> </div> </body> </html>