Tel un leitmotiv, la question revient régulièrement sur le Forum :
- Est il possible de supprimer le texte "envoyer" d'un bouton submit ?
- Pourquoi le style de ma scrollbar ne s'affiche pas sur FireFox ?
- Comment faire pour changer l'aspect de ma checkbox ?
- Dites, y a pas moyen de styler le bouton parcourir ?
- ...
Quelle que soit la variante énoncée, le problème de fond est toujours le même pour ces webmasters à la recherche du Saint Graal, qui travaillent à l'obtention d'un rendu fidèle -jusque dans les moindres détails- au design imaginé :
"Mais comment diable fait-on pour modifier le rendu par défaut (pas très affriolant, il faut bien le dire) des éléments de formulaire ?"
La réponse est relativement simple : on ne peut pas (ou presque pas) le faire. En effet, les éléments de formulaire et autres éléments d'interaction (comme par exemple les scrollbars) sont propres aux navigateurs. En d'autre terme, il est fortement improbable d'arriver à les modifier selon une charte graphique rigoureuse, voire carrément impossible d'obtenir un rendu uniforme sur un panel de navigateurs uniquement par le biais du CSS. Ils ne gèrent qu'avec parcimonie et d'une manière qui leur est très personnelle les quelques éléments stylistiques modifiables. Dès lors, la mission se révèle perdue d'avance !
Oui mais ... ;o)
Je suis sûre que certains d'entre vous n'hésiteront pas à arguer qu'avec quelques lignes de JavaScript, il n'y a rien de plus simple ! Que cela reste très accessible et très facile à réaliser. Mais quid des personnes ayant désactivé le JavaScript ou surfant sur des navigateurs n'implémentant pas les fonctions utilisées ?
N'oublions pas que les éléments de formulaire sont essentiels à l'interactivité d'un site : réaction d'utilisateurs, demande de renseignements, validation d'un simple choix graphique... les applications sont aussi variées qu'utiles. Et il serait dommage d'en priver une partie des internautes !
Toujours pas convaincu... vous voulez à tout prix styler votre formulaire ?
Ok, mais alors faites-le intelligemment : optez pour une mise en forme soft et efficace. Certaines options permettent de séquencer et d'ordonner votre formulaire. Servez-vous en !
Utilisez par exemple les balises <fieldset></fieldset> pour distinguer visuellement les différentes étapes du formulaire, nommez-les au moyen des balises <legend></legend>, usez des <optgroup></optgroup> pour mettre en avant différentes catégories de liste et vous verrez que d'un coup, vous gagnerez en lisibilité !
Et si vous souhaitez vraiment ajouter votre touche personnelle à votre formulaire, contentez-vous de la mise en exergue de un ou deux éléments seulement.
Mais avant tout, pensez à l'utilisateur ! Le plus souvent, c'est lui rendre un bien grand service que d'utiliser des éléments dont l'aspect lui sera familier. Immédiatement reconnaissables, ils seront plus facilement utilisables. L'ergonomie de votre site sera améliorée et son attrait d'autant renforcé ! Et puis, regardez le bon côté des choses ... Ce sera toujours ça en moins à coder pour vous !
Liens annexes :
- Formal Weirdness : pourquoi Eric Meyer choisit de ne pas styler ses formulaires
- Styling form controls with CSS, revisited : l'illustation qu'une règle CSS unique ne donne pas un rendu identique sur différents navigateurs
- Front-End Architecture: Browsers : pourquoi le fait de vouloir changer l’apparence des formulaires est une perte de temps et un risque potentiel d’utilisabilité
Commentaires
Oh mais, les éléments du formulaire d'ajout de commentaires sont stylés... Qui l'eût cru ? :D
100 % d'accord : les "difficultés" à bien coder pour tous les navigateurs (ou presque) occupe déjà bien notre temps pour ne pas en plus dérouter l'utilisateur en modifiant des élements techniques. A mon sens, cela devrait rester standard. Même si c'est pas très beau :)
PS : mais c'est vrai qu'il est stylé ce formulaire :)
Disons qu'il n'est pas impossible de styler un peu certains éléments de formulaire. Mais :
- en restant simple ;
- en sachant que le rendu peut être différent d'un navigateur à l'autre ;
- et donc en ne faisant pas reposer la bonne utilisation du formulaire sur les styles choisis.
En plus le IE connaît pas le selecteur []. Du coup, impossible de styler une checkbox par exemple, grâce à input[type='checkbox'] { } …
Je vais imprimer cette page, et l'envoyer à tous mes clients :)
Le nombre de demandes par rapport aux styles sur les formulaire dépasse tout ce qu'on peut imaginer dans mon taf (plateforme d'inscription à des événements, où tout gravite autour d'un ou plusieurs formulaires).
Merci. Excellent billet, comme d'hab'.
Après avoir vu la difficulté, ou plutôt l'impossibilité et la vanité, de vouloir tout styler dans un formulaire, on pourrait voir ce qui est néanmoins faisable, sans risque. Pêle-mêle et non exhaustif :
Pour les champs de saisie (input type="text" />, <textarea>, ...) :
- la typographie
- les dimensions, malgré les attributs size, cols ou rows.
- les couleurs d'arrière-plan
- les bordures
Et en outre pour les boutons :
- les effets de roll-over
L'utilisation d'images d'arrière-plan est en revanche risquée et plutôt bloquante sur le plan de l'accessibilité.
Un autre point ardu dans la stylisation des formulaires porte sur le positionnement des formulaires.
Comme il est dit, les éléments <fieldset> et <legend> sont déjà bien utiles. En plus d'enrichir la sémantique du document, ils permettent par défaut d'améliorer sensiblement le rendu graphique global.
Une difficulté courante dans le positionnement vient du fait que les éléments <input /> sont de type en-ligne et quand un formulaire en comprend beaucoup, ils ne ressortent graphiquement que rarement dans leur positionnement par défaut, à savoir au fil du texte. Bien souvent on cherche à aligner les intitulés d'un côté, les éléments de saisie de l'autre. Quelle solution ?
1 - un tableau. Ce n'est pas idéal, mais c'est facile à mettre en œuvre. Surtout, ce n'est pas bloquant pour ceux qui ne maîtriseraient pas bien les styles css, et voudraient avoir des alignements qui facilitent la lecture et la saisie, et auxquels les internautes sont habitués.
2 - Changer la nature de certains éléments <input /> en éléments de type bloc. Et ici encore avec les éléments <label>, c'est le double effet Kiss cool : d'une part, ils facilitent la compréhension et la navigation non graphiques du document, d'autre part, ils peuvent se révéler bien utiles pour le positionnement. Si on les transforme en éléments de type bloc, on peut alors les dimensionner, leur attribuer des marges, les faire flotter.
On peut alors créer une mise en page de formulaire plus élaborée et conformes aux standards.
3 - Je ne connais pas, mais ça m'intéresse.
Bah... finalement, il y a trois école :
1 - Je ne style pas mon formulaire
2 - Je style ce que je peux en m'arrachant les cheveux lorsque je test sur plusieurs navigateurs, en me prenant la tête avec Javascript et les questions d'incompatibilités navigateur (et je commence a ne plus avoir beaucoup de cheveux là !)
3 - J'ai un client particulièrement obtus qui veux "un-formulaire-avec-exactement-le-même-look-sous-chaque-navigateur" et dans ce cas, j'utilise Flash (en mettant un formulaire HTML non stylé en contenu alternatif) ;)
Styliser un formulaire?
Je me limite généralement aux bordures des input, textarea.
Parfois aussi au div ou au form qui entoure tout le formulaire.
Pourquoi "L'utilisation d'images d'arrière-plan est en revanche risquée et plutôt bloquante sur le plan de l'accessibilité." ?
www.cssplay.co.uk/menu/fo...
Pas de réelles solutions dans cet article, mais un vrai constat intéressant.
@Samuel MARTIN : je pense que le constat est justement qu'il n'y a pas de réelles solutions ;)
Pour l'utilisation d'images en arrière-plan, c'est uniquement pour les images-texte que c'est bloquant d'un point de vue de l'accessibilité, mais le problème dépasse les formulaires. Et risqué parce que comme il est dit l'apparence des éléments de formulaires, donc des boutons, dépend en grande partie de l'environnement. Dans ce cas, l'élément avec une image d'arrière-plan aurait besoin d'être dimensionnée et c'est justement ce dimensionnement qui avec les formulaires est hasardeux.
Toutefois, pour les boutons de validation. Il est toujours possible d'utiliser la valeur image de l'attribut src avec un élément <input />.
C'est même prévu dans les normes ; avec comme pour l'élément <img /> la nécessité d'utiliser un attribut alt. Exemple :
<input type="image" src="img/valider.png" alt="Valider" />
Pour un éventuel effet de roll-over, on passe alors par du javascript, équivalent à :
<input type="image" src="img/valider.png" alt="Valider" onmouseover="this.src='valider_over.gif'" onmouseout="this.src='valider.gif'" />
C'est pas idéal d'un point de vue l'accessibilité (pas de possibilité pour l'utilisateur de styler le texte, comme par exemple agrandir la taille des caractères), mais convenable si on y prête attention et c'est une solution plutôt solide, où l'éventuelle utilisation de javascript pour le roll-over n'est pas bloquante.
Voici un lien à ajouter à la liste : particletree.com/features...
Suis-je beta ou n'aurai-je pas compris ? Les 2 ?
Nous parlons ici de "styler" les éléments de formulaire, donc de "designer". Si l'on retire le graphisme, théoriquement les éléments du formulaire sont toujours présents, dans une forme classique certes mais présents, donc accessibles ! La solution javascript est donc possible, à condition de proposer une soluce en cas de désactivation ou d'illisibilité, ce qui est un critère des bons usages.
(je n'évoque pas, volontairement, la notion de contraste dans le graphisme, ou de design permutable. Je veux juste revenir sur la soluce javascript...)
On peut encore lister celui-ci : digitarald.de/project/fan...
Question accessibilité c'est pas la panacée mais cette solution à le mérite d'exister.