|
| |
| PRATIQUE CLIENTS WEB |
 |
|
|
| Remplacer les éléments d'un formulaire par des images |
| |
| "Puis-je utiliser autre chose que les éléments HTML de formulaire par défaut, pour les adapter au design de mon site ?"
(20/10/2006) |
  |
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
En utilisant CSS, il est très facile de modifier l'apparence des boutons, des champs et des zones de texte. On peut modifier à l'envi la couleur du texte, celle du fond, les caractéristiques de la bordure...
Ainsi, on passera sans problème d'un formulaire banal...
...au même en plus attractif...
Code CSS du second formulaire :
input { color: #000; background: #fea; border: 1px solid #00d; } input[type=submit] { color: #eee; font-style: italic; font-weight: bold; background: #f00; border: 2px outset #dbc; }
En revanche, les cases à cocher et les boutons radio ne sont pas modifiables par défaut : leur appliquer les règles CSS classiques ne modifiera en rien leur apparence.
Des développeurs se sont évidemment penchés sur le problème. Une solution à la fois efficace et respectueuse des standards a été conçue par Philip Howard, sous le nom de formStyle. Pour résoudre ce problème, il remplace à la volée, grâce à JavaScript, les deux types d'éléments fautifs par des images. Les éléments restent donc présents sur la page, ne sont pas modifiés en cas d'absence de support JavaScript, et le tout reste valide. Les éléments sont remplacés par des images, une par état.
Le tout reste parfaitement accessible, et simple à appliquer : chaque champ à "refaire" doit être encadré par des balises SPAN, avec l'attribut class indiquant rbStyled ou cbStyled selon le type d'élément. Le JavaScript s'occupe du reste...
|
|
|
|
