{"id":2109,"date":"2003-12-04T11:12:37","date_gmt":"2003-12-04T11:12:37","guid":{"rendered":"http:\/\/svay.com\/blog\/?p=2109"},"modified":"2003-12-04T11:12:37","modified_gmt":"2003-12-04T11:12:37","slug":"27-formulaires-et-css","status":"publish","type":"post","link":"https:\/\/svay.com\/blog\/27-formulaires-et-css\/","title":{"rendered":"Formulaires et CSS"},"content":{"rendered":"

Les feuilles de style sont puissantes, on ne le r\u00e9p\u00e8tera jamais assez. Au del\u00e0 du texte, les CSS<\/acronym> permettent aussi de modifier l’apparence des \u00e9l\u00e9ments de formulaires. <\/p>\n

<\/p>\n

Comme on le ferait pour des paragraphes, il est possible d’utiliser les attributs font<\/code>, background<\/code> ou border<\/code> pour eggayer les diff\u00e9rents contr\u00f4les qu’on peut rencontrer dans un formulaire. <\/p>\n

Prenons ce style: <\/p>\n

.champTexte{
\n \tbackground-color : #FFC;
\n \tborder : 1px solid #CFC;
\n \tfont-family : 'Courier New', monospace;
\n } <\/code> <\/p>\n

Appliquons le \u00e0 ce champ texte: <\/p>\n

<input type=\"text\" class=\"champTexte\" id=\"champ1\" value=\"Du texte\" \/> <\/code> <\/p>\n

Nous obtenons ceci:
\n <\/p>\n

C’est possible, mais doit-on le faire? Tout d\u00e9pend des cas, j’ai envie de dire. Lorsqu’un site poss\u00e8de une charte graphique tr\u00e8s marqu\u00e9e, il peut \u00eatre bon de renforcer (ou ne pas d\u00e9naturer) l’aspect graphique en stylisant les \u00e9l\u00e9ments de formulaires. Par contre, lorsqu’il s’agit d’un application web, je pense qu’il est pr\u00e9f\u00e9rable de conserver l’aspect d\u00e9fini par les syst\u00e8mes d’exploitation. D’ailleurs, ceux-ci d\u00e9finissent parfois de mani\u00e8re tr\u00e8s pr\u00e9cise l’apparence des contr\u00f4les dans des guidelines<\/span> tr\u00e8s compl\u00e8tes (LunaXP Guidelines<\/span>, Gnome HIG<\/span> mais pas Aqua Guidelines<\/span> o\u00f9 je n’ai pas trouv\u00e9 grand chose). <\/p>\n

En gros, il s’agit de savoir comment l’utilisateur se d\u00e9brouille lorsqu’il passe de l’interface utilisateur de son syst\u00e8me d’exploitation \u00e0 l’interface du site web. Je pense que l’utilisateur moyen est capable de reprendre ses marques, \u00e0 condition de ne pas trop le d\u00e9router avec des styles trop exotiques. Logique, direz-vous. Mais l’ergonomie, c’est de la logique apr\u00e8s tout, \u00e0 condition de prendre le temps d’y r\u00e9fl\u00e9chir un peu. Qu’en pensez-vous? <\/p>\n","protected":false},"excerpt":{"rendered":"

Les feuilles de style sont puissantes, on ne le r\u00e9p\u00e8tera jamais assez. Au del\u00e0 du texte, les CSS<\/acronym> permettent aussi de modifier l’apparence des \u00e9l\u00e9ments de formulaires. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21],"tags":[],"_links":{"self":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2109"}],"collection":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/comments?post=2109"}],"version-history":[{"count":0,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2109\/revisions"}],"wp:attachment":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/media?parent=2109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/categories?post=2109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/tags?post=2109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}