Mise en forme du formulaire

On peut modifier apparence de notre formulaire et la plupart de ses éléments avec des règles css. Tout ce qui touche le texte et les polices de caractères sont utilisable. On aussi facilement modifier l'apparence des "boites" des éléments avec les propriétés associées comme padding, marging, border, etc.

On ne fera pas le tour de toutes les possibilités mais voici quelques ressources pour vous guider :

• https://developer.mozilla.org/fr/docs/Learn/Forms/Styling_web_forms
• https://www.w3schools.com/css/css_form.asp
• https://blog.logrocket.com/how-to-style-forms-with-css-a-beginners-guide/

Pseudo-classe

On peut aussi utiliser des pseudo-classes pour modifier l'apparence des éléments du formulaire selon leur état. Les plus pertinentes sont les suivantes :

:focus

Applicable quand l'élément est sélectionné. Peut nous permettre par exemple de donner un effet "de surlignement" de l'élément que l'usager est en train de remplir.

/* Jeux que pour tout mes éléments input la couleur de fond devienne rose quand on le sélectionne */
input:focus {
    background-color: pink !important;
}

Note

Si je veux supprimer le surlignement par défaut de l'élément quand il a le focus, je peux utiliser la proptiété css outline: none;

input:focus {
    outline: none;
}

:required

Applicable uniquement quand l'élément à l'attribut required. Peut être utile si on veut avoir une mise en forme différente pour les éléments obligatoires.

Html

<input type='text' id='cle-activation' name='cle_activation' required>

Css

input:required{
    background-color: rgb(255, 153, 0);
}

:invalid

Applicable quand l'usager à saisie une valeur invalide, comme par exemple une adresse courriel non conforme dans un élément input de type courriel.

Html

<input type="email" name="courriel_usager" id="courriel_usager">

Css

/* Quand l'usager va entrer une valeur pour le input courriel_usaager, la bordure sera rouge si le courriel est invalide. */
#courriel_usager:invalid {
    border: 2px solid #ff0000;
}