Comparaison de révisions

Apparence des formulaires HTML

Révision 423385 :

Révision 423385 par tregagnon le

Révision 425143 :

Révision 425143 par Goofy le

Titre :
Apparence des formulaires HTML
Apparence des formulaires HTML
Identifiant d'URL :
Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML
Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML
Étiquettes :
"Formulaires","HTML"
"Formulaires","HTML"
Contenu :

Révision 423385
Révision 425143
n8      Dans cet article, nous allons apprendre comment utiliser <an8      Dans cet article, nous allons apprendre comment utiliser <a
> href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> avec les formul> href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> avec les formul
>aires <a href="/fr/docs/HTML" title="/fr/docs/HTML">HTML</a> pour>aires <a href="/fr/docs/HTML" title="/fr/docs/HTML">HTML</a> pour
> (espérons) améliorer leur apparence. Étonnament, ceci peut être > (espérons-le) améliorer leur apparence. Étonnament, ceci peut êt
>délicat. Pour des raisons techniques et historiques, les blocs de>re délicat. Pour des raisons techniques et historiques, les blocs
> formulaires ne s'allient pas très bien avec CSS. À cause de ces > de formulaires ne s'allient pas très bien avec CSS. À cause de c
>difficultés, de nombreux développeurs préfèrent <a href="/fr/docs>es difficultés, de nombreux développeurs préfèrent <a href="/fr/d
>/HTML/Formulaires/Comment_cr%C3%A9er_des_blocs_de_formulaires_per>ocs/HTML/Formulaires/Comment_cr%C3%A9er_des_blocs_de_formulaires_
>sonnalis%C3%A9s" title="/fr/docs/HTML/Formulaires/Comment_créer_d>personnalis%C3%A9s" title="/fr/docs/HTML/Formulaires/Comment_crée
>es_blocs_de_formulaires_personnalisés">construire leurs propres b>r_des_blocs_de_formulaires_personnalisés">construire leurs propre
>locs HTML</a> pour avoir plus de maîtrise sur leur apparence. Tou>s blocs HTML</a> pour avoir plus de maîtrise sur leur apparence. 
>tefois, avec les navigateurs modernes, les web designers ont de p>Toutefois, avec les navigateurs modernes, les web designers ont d
>lus en plus d'emprise sur l'apparence de leurs formulaires. Voyon>e plus en plus d'emprise sur l'apparence de leurs formulaires. Vo
>s cela de plus près.>yons cela de plus près.
n10    <h2 id="Why_is_it_so_hard_to_style_form_widgets_with_CSS.3F">n10    <h2 id="Pourquoi_est-ce_si_dur_de_modifier_l'apparence_des_fo
 >rmulaires_avec_CSS.C2.A0.3F">
11      Pourquoi est-ce si dur de modifier l'apparence des formulai11      Pourquoi est-ce si difficile de modifier l'apparence des fo
>res avec CSS&nbsp;?>rmulaires avec CSS&nbsp;?
n17      Quelques années plus tard, CSS a été créé et ce qui était un17      Quelques années plus tard, CSS a été créé et ce qui était u
>ne nécessité technique —&nbsp;c'est-à-dire, utiliser les blocs na>ne nécessité technique —&nbsp;c'est-à-dire, utiliser les blocs na
>tufs pour les formulaires&nbsp;— est devenu un préalable stylisti>tifs pour les formulaires&nbsp;— est devenu un préalable stylisti
>que. Et dans la jeunesse de CSS, l'apparence des formulaires n'ét>que. Et dans la jeunesse de CSS, l'apparence des formulaires n'ét
>ait pas une priorité.>ait pas une priorité.
18    </p>
19    <p>18    </p>
20      Puisque les utilisateurs se sont habitués à l'apparence de 
>leur plateformes respectives, les fournisseurs de navigateurs éta 
>ient rétissants à rendre possible la modification de l'apparence  
>des formulaires. Et pour être honnête, il est toujours extrêmemen 
>t difficile de reconstruire tous les contrôles pour que leur appa 
>rence soit modifiable. 
21    </p>19    <p>
20      Puisque les utilisateurs se sont habitués à l'apparence de 
 >leur plateforme spécifique, les fournisseurs de navigateurs étaie
 >nt réticents à rendre possible la modification de l'apparence des
 > formulaires. Et pour être honnête, il est toujours extrêmement d
 >ifficile de reconstruire tous les contrôles pour que leur apparen
 >ce soit modifiable.
22    <p>21    </p>
22    <p>
23      Même aujourd'hui, aucun des navigateurs n'a implémenté enti23      Même aujourd'hui, aucun des navigateurs n'a implémenté enti
>èrement CSS 2.1. Le temps faisant, les fournisseurs de navigateur>èrement CSS 2.1. Avec le temps, les fournisseurs de navigateurs o
>s ont toutefois amélioré la compatibilité de CSS avec les élément>nt toutefois amélioré la compatibilité de CSS avec les éléments d
>s de formulaires, et bien que ce soit de mauvaise réputation pour>e formulaires, et bien que ce soit de mauvaise réputation pour l'
> l'utilisabilité, vous pouvez désormais modifier l'apparene des <>utilisabilité, vous pouvez désormais modifier l'apparene des <a h
>a href="/fr/docs/HTML/Formulaires" title="/fr/docs/HTML/Formulair>ref="/fr/docs/HTML/Formulaires" title="/fr/docs/HTML/Formulaires"
>es">formulaires HTML</a>.>>formulaires HTML</a>.
n25    <h3 id="Not_all_widgets_are_created_equal_when_CSS_is_involven25    <h3 id="Tous_les_blocs_ne_sont_pas_cr.C3.A9.C3.A9s_.C3.A9gaux
>d">>_devant_CSS">
n29      À présent, quelques difficultés subsistent dans l'utilisatin29      À présent, quelques difficultés subsistent dans l'utilisati
>on de CSS avec les formulaires. Ces problèmes peuvent être classé>on de CSS avec les formulaires. Ces problèmes peuvent être classé
>dans trois catégories.>en trois catégories.
n31    <h4 id="The_good">n31    <h4 id="Le_bon">
n35      L'apparence de certains éléments peut être modifiée avec pen35      L'apparence de certains éléments peut être modifiée sans po
>u de problèmes au travers des différentes plateformes. Ceci inclu>ser beaucoup de problèmes au travers des différentes plateformes.
>t les éléments structurels suivants&nbsp;:> Ceci inclut les éléments structurels suivants&nbsp;:
n50    <h4 id="The_bad">n50    <h4 id="La_brute">
n57      Ceci inclut l'élément {{HTMLElement("legend")}}. Ce derniern57      Ceci inclut l'élément {{HTMLElement("legend")}}. Ce dernier
> ne peux pas être positionné correctement sur toutes les platefor> ne peut pas être positionné correctement sur toutes les platefor
>mes. De plus, l'apparence des cases à cocher et des boutons radio>mes. De plus, l'apparence des cases à cocher et des boutons radio
> ne peut pas être modifiée directement. Toutefois, grâce à CSS3 c> ne peut pas être modifiée directement. Toutefois, grâce à CSS3 c
>'est possible de contourner cette limitation. L'apparence du cont>'est possible de contourner cette limitation. L'apparence du cont
>enu {{htmlattrxref("placeholder", "input")}} ne peut pas être mod>enu {{htmlattrxref("placeholder", "input")}} ne peut pas être mod
>ifiée d'une manière standard. Mais tous les navigateurs qui sont >ifiée d'une manière standard. Mais tous les navigateurs qui sont 
>compatible avec cet attribut ont aussi implémenté des pseudo-clas>compatible avec cet attribut ont aussi implémenté des pseudo-clas
>ses ou pseudo-élément propriétaires qui permettent de modifier so>ses ou pseudo-élément propriétaires qui permettent de modifier so
>n apparence.>n apparence.
n62    <h4 id="The_ugly">n62    <h4 id="Le_truand">
n66      L'apparence de certains éléments n'est tout bonnement pas mn66      L'apparence de certains éléments n'est tout bonnement pas m
>odifiable en utilisant CSS. Ceci inclut toutes les interfaces ava>odifiable en utilisant CSS. Ceci inclut toutes les interfaces ava
>ncées comme les intervalles, la sélection de couleur ou de date a>ncées comme les intervalles, la sélection de couleur ou de date a
>insi que les éléments déroulants, incluant les éléments {{HTMLEle>insi que les éléments déroulants, y compris les éléments {{HTMLEl
>ment("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgr>ement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optg
>oup")}} et {{HTMLElement("datalist")}}. La sélection de fichiers >roup")}} et {{HTMLElement("datalist")}}. La sélection de fichiers
>est aussi connue pour ne pas pouvoir changer d'apparence. Les nou> est aussi connue pour ne pas pouvoir changer d'apparence. Les no
>veaux élément {{HTMLElement("progress")}} et {{HTMLElement("meter>uveaux éléments {{HTMLElement("progress")}} et {{HTMLElement("met
>")}} font aussi partie de cette catégorie.>er")}} font aussi partie de cette catégorie.
67    </p>
68    <p>67    </p>
68    <p>
69      Le principal problème avec tous ces blocs vient du fait que69      Le principal problème avec tous ces blocs vient du fait que
>leur structure est très complexe et CSS n'a pas assez d'expressio> leur structure est très complexe et CSS n'a pas assez d'expressi
>ns pour décrire et modifier l'apparence des éléments. Si vous sou>ons pour décrire et modifier l'apparence des éléments. Si vous so
>haitez modifier l'apparence des blocs vous devez utiliser JavaScr>uhaitez modifier l'apparence des blocs vous devez utiliser JavaSc
>ipt pour construire une arborescence DOM qui vous permet de modif>ript pour construire une arborescence DOM qui vous permet de modi
>ier l'apparence. Nous allons apprendre à faire cela dans l'articl>fier l'apparence. Nous allons apprendre à faire cela dans l'artic
>e <a href="/fr/docs/HTML/Formulaires/Comment_cr%C3%A9er_des_blocs>le <a href="/fr/docs/HTML/Formulaires/Comment_cr%C3%A9er_des_bloc
>_de_formulaires_personnalis%C3%A9s" title="/fr/docs/HTML/Formulai>s_de_formulaires_personnalis%C3%A9s" title="/fr/docs/HTML/Formula
>res/Comment_créer_des_blocs_de_formulaires_personnalisés">Comment>ires/Comment_créer_des_blocs_de_formulaires_personnalisés">Commen
> créer des blocs de formulaires personnalisés</a>.>t créer des blocs de formulaires personnalisés</a>.
n71    <h2 id="Basic_styling">n71    <h2 id="Apparence_de_base">
n75      Afin de modifier l'apparence <a href="/fr/docs/HTML/Formulan75      Afin de modifier l'apparence <a href="/fr/docs/HTML/Formula
>ires/Apparence_des_formulaires_HTML#Le_bon" title="/fr/docs/HTML/>ires/Apparence_des_formulaires_HTML#Le_bon" title="/fr/docs/HTML/
>Formulaires/Apparence_des_formulaires_HTML#Le_bon">des éléments q>Formulaires/Apparence_des_formulaires_HTML#Le_bon">des éléments q
>ui peuvent l'être facilement</a> avec CSS, vous ne devriez pas re>ui peuvent l'être facilement</a> avec CSS, vous ne devriez pas re
>ncontrer de difficulté, puisqu'ils se comportent comme n'importe >ncontrer de difficultés, puisqu'ils se comportent comme n'importe
>quel autre élément HTML. Toutefois, la feuille de styles du navig> quel autre élément HTML. Toutefois, la feuille de styles du navi
>ateur peut être inégale selon la plateforme, il y a donc un certa>gateur peut être inégale selon la plateforme, il y a donc un cert
>in nombre d'astuces à connaître.>ain nombre d'astuces à connaître.
n77    <h3 id="Search_fields">n77    <h3 id="Champs_de_recherche">
n83    <h4 id="Example">n83    <h4 id="Exemple">
n105    <h3 id="Fonts_and_text">n105    <h3 id="Textes_et_polices_de_caract.C3.A8res">
n109      Les focntionnalités liées au textes et aux polices de caracn109      Les fonctionnalités liées au texte et aux polices de caract
>tères dans CSS peuvent être utilisée facilement avec n'importe qu>ères dans CSS peuvent être utilisées facilement avec n'importe qu
>el bloc (et oui, vous pouvez utiliser {{cssxref("@font-face")}} a>el bloc (et oui, vous pouvez utiliser {{cssxref("@font-face")}} a
>vec les formulaires). Toutefois, le comportement des navigateur e>vec les formulaires). Toutefois, le comportement des navigateur
>st inconsistant. Par défaut, certains éléments comme {{cssxref("f>est souvent incompatible. Par défaut, certains éléments comme {{c
>ont-family")}} {{cssxref("font-size")}} n'héritent pas de leurs p>ssxref("font-family")}} {{cssxref("font-size")}} n'héritent pas d
>arents. De nombreux navigateurs utilisent les valeurs du système >e leurs parents. De nombreux navigateurs utilisent les valeurs du
>d'exploitation. Pour que l'apparence des formulaires soit cohéren> système d'exploitation. Pour que l'apparence des formulaires soi
>te avec le reste de votre contenu, vous pouvez ajouter les règles>t cohérente avec le reste de votre contenu, vous pouvez ajouter l
> suivantes à votre feuille de style&nbsp;:>es règles suivantes à votre feuille de style&nbsp;:
n124      Il existe un débat animé sur le fait qu'un formulaire ait un124      Il existe un débat animé sur le fait qu'un formulaire ait u
>ne meilleure apparence en utilisant les valeurs par défaut du sys>ne meilleure apparence en utilisant les valeurs par défaut du sys
>tème d'exploitation ou en utilisant des valeurs unifiant l'appare>tème d'exploitation ou en utilisant des valeurs unifiant l'appare
>nce. Cette décision est la vôtre en tant que designer du site ou >nce. C'est à vous de décider en tant que designer du site ou de l
>de l'application.>'application.
n126    <h3 id="Box_model">n126    <h3 id="Mod.C3.A8le_de_bo.C3.AEte">
n130      Tous les champs textuels sont compatibles avec les différenn130      Tous les champs textuels sont compatibles avec les différen
>tes propriétés du modèle de boîte CSS ({{cssxref("width")}}, {{cs>tes propriétés du modèle de boîte CSS ({{cssxref("width")}}, {{cs
>sxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} >sxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} 
>et {{cssxref("border")}}). Toutefois, comme précédemment les navi>et {{cssxref("border")}}). Toutefois, comme précédemment les navi
>gateurs s'appuient sur l'apparence par défaut du système d'exploi>gateurs s'appuient sur l'apparence par défaut du système d'exploi
>tation. C'est vore décision de choisir si vous souhaites intégrer>tation. C'est votre décision de choisir si vous souhaitez intégre
> vos formulaires à votre contenu d'un point de vue de l'apparence>r vos formulaires à votre contenu du point de vue de l'apparence.
>. Si vous souhaitez conserver l'apparence originale des blocs, vo> Si vous souhaitez conserver l'apparence originale des blocs, vou
>us aurez des difficultés à leur donner des dimensions cohérentes.>s aurez des difficultés à leur donner des dimensions cohérentes.
n149      Dans la capture d'écran ci-dessous, la colonne de gauche n'n149      Dans la capture d'écran ci-dessous, la colonne de gauche n'
>utilise pas {{cssxref("box-sizing")}}, alors que la colonne de dr>utilise pas {{cssxref("box-sizing")}}, alors que la colonne de dr
>oite utilise la propriété CSS <code>border-box</code>. Remarquez >oite utilise la propriété CSS <code>border-box</code>. Remarquez 
>comment tous les éléments occupent le même espace, bien que les v>comment tous les éléments occupent le même espace, malgré les val
>aleurs par défaut de la plateforme pour chacun des blocs.>eurs par défaut de la plateforme pour chacun des blocs.
n151    <h3 id="Positioning">n151    <h3 id="Positionnement">
n155      Le positionnement des formulaires HTML n'est pas un problèmn155      Le positionnement des formulaires HTML n'est pas un problèm
>e de manière générale. Seulement deux éléments nécessite une atte>e de manière générale. Seulement deux éléments nécessitent une at
>ntion particulière&nbsp;:>tention particulière&nbsp;:
t161      L'apparence de l'élément {{HTMLElement("legend")}} est facit161      L'apparence de l'élément {{HTMLElement("legend")}} est faci
>le à modifier à l'exception de sa position. Dans chacun navigateu>le à modifier à l'exception de sa position. Dans chaque navigateu
>r, l'élément {{HTMLElement("legend")}} est positionné au-dessus d>r, l'élément {{HTMLElement("legend")}} est positionné au-dessus d
>e la bordure supérieure de son élément {{HTMLElement("fieldset")}>e la bordure supérieure de son élément {{HTMLElement("fieldset")}
>} parent. Il n'existe aucune manière de changer sa position dans >} parent. Il n'existe aucune manière de changer sa position dans 
>le flux HTML. Vous pouvez toutefois le positionner de manière abs>le flux HTML. Vous pouvez toutefois le positionner de manière abs
>olue ou relative en utilisant la propriété {{cssxref("position")}>olue ou relative en utilisant la propriété {{cssxref("position")}
>}, sinon, ce sera une partie de la bordure de l'élément <code>fie>}, sinon, ce sera une partie de la bordure de l'élément <code>fie
>ldset</code>.>ldset</code>.

Retour à l'historique