Faire un formulaire et l’approfondir en CSS – Tutoriel #1

Voici le premier tutoriel !
Voici comment personnaliser au maximum vos formulaires. On va tout personnaliser sauf les checkboxes et les radios. Dans ce formulaire, je reprends le style “Bootstrap” mais libre à vous de en faire ce que vous voulez.

Styles CSS personnels

Pour le début du formulaire, je vais rajouter quelques styles personnels, vous n’êtes pas obligé de les inclure dans votre code.

Il ne sert qu’à désactiver les outlines de Firefox qui ne sont pas très belles et pour que ce soit plus esthétique.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

body::-moz-focus-inner, 
.navbar-right::-moz-focus-inner, 
a::-moz-focus-inner, 
textarea::-moz-focus-inner, 
img::-moz-focus-inner, 
pre::-moz-focus-inner, 
.btnmenu::-moz-focus-inner, 
li::-moz-focus-inner, 
ul::-moz-focus-inner, 
.btn::-moz-focus-inner, 
input::-moz-focus-inner, 
textarea::-moz-focus-inner, 
select::-moz-focus-inner
{
outline-style:none;outline:none;border:none
}

Nous allons faire chaque élément de formulaire 1 par 1.

Personnalisation de la balise “input” , “textarea” et de la balise “select”

Dans cet extrait, nous allons personnaliser la balise input, les textarea et les select

Ca marche avec tout sauf avec l’input file, que nous allons voir plus tard.

Exemple de balise input :

1

<input type="text" placeholder="Champ de texte" required/>

Ce qui nous donne (peut varier en fonction de votre navigateur):

Patience, patience, le css arrive !

Donc, on va faire les styles généraux :

1
2
3

input, textarea{
    font-family: Helvetica;
}

Jusque là, rien d’extraordinaire, ça règle la police en Helvetica, vous pouvez bien sûr changer de police comme vous le voulez !

On y rajoute une bordure grise d’un pixel

1
2
3
4

input, textarea{
   ...
   border:1px solid #ccc;
}

Vous pouvez en mettre un rouge, une verte, bref libre à vous de faire comme vous voulez !

On y rajoute une marge de 4 pixels pour améliorer la visibilité. Pour l’instant quasiment rien ne change, mais nous n’allons pas nous arrêter là.

On va rajouter un magnifique border-radius, compatible avec la plupart des navigateurs (je n’allais pas mettre tous les attributs ) !

1
2
3
4
5
6
7
8

   {
   ...
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
}

Pareil pour ici, vous pouvez changer.

Non, ce n’est pas le but, ce n’est qu’un exemple, vous faites à votre goût, un design qui ressemble au vôtre.

Bref, continuons.

Ce qui nous donne :

Ca prend forme, mais ça reste léger.

Nous allons passer à la position active et focus, qui sont celles qui font embellir notre input !

1
2
3

input:active, textarea:active{
   background-color: #eeeeee;
}

C’est tout, quand l’utilisateur clique sur le champ, le background deviendra grisé et… c’est tout. Ce qui nous donne en active :

Nous allons approfondir avec le focus

Au focus, on va rajouter un box-shadow, un peu comme Bootstrap.

1
2
3

input:focus, textarea:focus{
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px #46aefe;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px #46aefe;

Ce qui nous donne :

Pour rendre encore plus beau, on rajoute une bordure bleue

1
2
3

   ...
   border-color: #46aefe;
}

Ce qui nous donne :

Si l’input est invalide (non rempli) on va changer ce box shadow et cette bordure en rouge pour avertir l’utilisateur qu’il doit remplir de champ !

1
2
3
4
5

input:focus:invalid, textarea:focus:invalid{
   border-color: #F53821;
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px #F53821;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px #F53821;
}

Ce qui nous donne :

Alors ? Pas mal hein ? Comme je le dis plus haut, vous personnalisez ça comme vous voulez.

Personnalisation du bouton de validation

Cette partie va être très courte car on va juste faire le JS du bouton.

Pour légèrement plus de sécurité, il va falloir cocher une case pour que le bouton d’envoi apparaisse.

1
2
3
4

function ChangeStatut(a) {
if(a.regagree.checked === true) {a.validation.disabled === false}
if(a.regagree.checked === false) {a.validation.disabled === true}
}

Explication de ce code : Cette fonction va être activée par un clic sur la checkbox nommée “regagree”, si la case est cochée, alors le bouton d’envoi nommée “validation” n’est pas désactivé, à si elle n’est pas cochée, alors le bouton d’envoi se désactive.

Normal, on va rajouter une ligne de CSS qui va faire disparaître le bouton d’envoi si il est désactivé.

1

input[type="submit"]:disabled{display:none}

Voilà, c’est tout pour cette très courte partie

Personnalisation de l’input “file”

En HTML, c’est différent car il faut rajouter des éléments en plus pour que ça fonctionne, car il est impossible de personnaliser l’input file uniquement avec du CSS.

Voici donc le code HTML pour intégrer un input de type file :

1
2
3
4

<div class="input-file-container"> 
    <input class="input-file" id="my-file" type="file">
    <label tabindex="0" for="my-file" class="input-file-trigger">S&eacute;lectionner un fichier...</label>
 </div>

Niveau CSS, c’est un peu carte blanche, je vais uniquement vous donner le début et vous personnaliserez comme vous voulez.

1
2
3
4

.input-file-container {
  position: relative;
  ...
}

Ca, c’est la div avec le bouton et le nom du fichier, donc vous le personnalisez comme vous voulez

1
2

.js .input-file-trigger {
}

Ca, c’est le bouton pour sélectionner le fichier.

1
2

.js .input-file {
}

Ca, c’est aussi le bouton pour sélectionner le fichier, mais ne mettez pas de background.

1
2
3
4

.js .input-file:hover + .input-file-trigger,
.js .input-file-trigger:hover,
.js .input-file-trigger:focus {
}

Ici, c’est l’hover du bouton.

1
2
3
4

.js .input-file:hover + .input-file-trigger,
.js .input-file-trigger:hover,
.js .input-file-trigger:focus {
}

Ici, c’est l’hover du bouton.

1
2
3
4
5

.js .file-return:not(:empty):after {
  content: "Fichier sélectionné: ";
  font-style: normal;
  font-weight: normal;
}

Ca, c’est obligatoire, cela permet d’écrire Fichier sélectionné lorsqu’un fichier est sélectionné par le navigateur.

Très simple, avec du Javascript (jQuery requis) ! Première ligne de code, elle va rajouter la class “js” au document html :

1

document.querySelector("html").classList.add('js');

Au lieu de cette ligne de code, vous pouvez très bien mettre ça dans le HTML, c’est pareil !

1

<html class="js">

Ensuite, on va inclure les différentes “parties” de notre input pour mieux se repérer.

1
2
3

var fileInput  = document.querySelector( ".input-file" ),
    button     = document.querySelector( ".input-file-trigger" ),
    the_return = document.querySelector( ".file-return" );

Ce bout de code va permettre de “cliquer” sur l’input file pendant que l’utilisateur presse sur le bouton.

1
2
3
4
5

button.addEventListener( "keydown", function( event ) {
    if ( event.keyCode == 13 || event.keyCode == 32 ) {
        fileInput.focus();
    }
});

C’est quasiment le même code, sauf que c’est lors du clic sur ce fameux bouton, c’est en réalité vraiment très simple !

1
2
3
4

button.addEventListener( "click", function( event ) {
   fileInput.focus();
   return false;
});

Ici, lorsque le fichier est sélectionné, on indique le nom du fichier dans le texte, c’est tout simple !

1
2
3

fileInput.addEventListener( "change", function( event ) {
    the_return.textContent = this.value;
});

Voilà, c’est tout pour l’input file, c’était assez complexe, mais on y est arrivés, non ?

Avec tous les codes que je vous ai donnés, vous allez pouvoir faire de supers formulaires ! Si vous avez des conseils ou si vous avez trouvé des erreurs, dites-le dans les commentaires !