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 {
    display: block;                 /*affichage avec retour de ligne*/
    padding: 1rem;                  /*espace à l'intérieur des champs*/
    border: 0.1rem solid orange;    /*bordure orange*/
    border-radius: 0.3rem;          /*arrondir les coins*/
    margin: 0.5rem;                 /*marge autours de chaque champ*/
}

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;
    margin: 0.5rem;
}

Alignement libellés / champs

Pour un alignement en bloc d'un champ avec son libellé, on doit :

• créer un bloc
• insérer le champ input et le libellé label dans le bloc
• positionner le bloc

<div>
    <label for="champPrenom">Prénom :</label>
    <input id="champPrenom" type="text" name="prenom">
</div>

Au besoin :

• rendre les input et label inline-block
• positionner dans le bloc parent avec width et text-align

---

Pour un alignement parfait des champs dans la page par rapport aux libellés, on doit :

• créer des blocs de contenu
• donner une taille aux blocs
• positionner les blocs côte à côte

HTML

<div id="libelles">
    <!--Insérer les libellés ici avec la balise <label> -->
</div>

<div id="champs">
    <!--Insérer les champs ici avec la balise <input> -->
</div>

CSS

/*bloc div contenant les libellés de la première section*/
#libelles { 
    width: 25%;                 
    display: inline-block;     
    line-height: 3rem;        /*hauteur de ligne équivaut au padding des champs*/
}

/*bloc div contenant les champs de la première section*/
#champs {
    width: 70%;
    display: inline-block;
}

Largeur de champs : ajouter width:100%; dans le CSS des champs input pour qu'ils prennent 100% de la largeur de la div et ainsi être parfaitement alignés et de même taille.