Techniques CSS pour formulaires web

Les formulaires web ont une apparence de base qui n'est pas uniforme dans tous les navigateurs.

De plus, la majorité des champs sont trops petits pour être considérés conviviaux pour l'utilisation multi-plateformes. En effet, il faut penser à l'utilisation du tactile pour comprendre qu'un doigt n'est pas aussi précis qu'une souris.

Il est donc très important de modifier l'apparence des formulaires pour :

• uniformiser leur présentation
• rendre plus convivial et agréable à utiliser

Image cliquable

Noter : le HTML est exactement le même entre ces deux pages. C'est le CSS qui change toute la mise en page!

Présentation des champs

Champs

Pour produire les champs d'entrée d'information de l'image ci-haut, on applique du CSS directement sur les champs <input> :

input {
    padding: 1rem;                  /*espace à l'intérieur des champs*/
    border: 0.1rem solid orange;    /*bordure orange*/
    border-radius: 0.3rem;          /*arrondir les coins*/
}

Case à cocher

Pour ce qui est de la case à cocher, elle est beaucoup trop petite par défaut pour être facilement utilisable avec le doigté.

On modifie donc sa taille :

input[type="checkbox"]{
    transform:scale(1.5);           /*augmenter la taille de la case*/
}

Ou encore :

input[type="checkbox"]{
    width: 1.5rem;           /*augmenter la taille de la case*/
    height: 1.5rem;
}

Boutons

Les boutons ont les mêmes styles que les champs de données, sauf pour l'affichage en bloc afin qu'ils se positionnent côte à côte par défaut.

button {
    padding: 1rem;
    border: 0.1rem orange solid;
    border-radius: 0.3rem;
}

Bootstrap vs CSS

Évidemment, il est conseillé d'abord d'appliquer les classes Bootstrap qui vont apporter beaucoup de modifications à l'apparence des champs, avant d'ajouter du CSS pour compléter.