Formulaire de recherche

Le formulaire de recherche est un système de navigation qui permet à l'utilisateur d’accéder rapidement à un contenu du site en utilisant un mot clé ou une expression.

Règles d’implémentation pour l’accessibilité

Le formulaire de recherche sur tout le site sera identifié avec le rôle aria role="search".
Une bonne pratique consiste à la proposer sur toutes les pages, positionné au même endroit.

Visuel

Extraits de code

Code HTML

<form action="/" method="POST" role="search" class="formRecherche">
    <div class="champs">
    <label for="recherche" class="like-placeholder">Rechercher</label>
    <input type="search" name="recherche" id="recherche">
    </div>
    <button type="reset">
        <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512" fill="#19003C" aria-hidden="true" focusable="false" role="presentation"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path></svg>
        <span class="sr-only">Effacer</span>
    </button>
    <button type="submit">
        <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" fill="#19003C" aria-hidden="true" focusable="false" role="presentation"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path></svg>
        <span class="sr-only">Rechercher</span>
    </button>
</form>

Code CSS

Les valeurs marges et de position devront peut-être être adaptées selon la police de caractère choisie pour votre site.

:root {
     --FRONT-color: #333333;
     --BORDER-color: #555555;
     --BUTTON-color: #85d84e;
     --BACKGROUND-color: #FFFFFF;
     --FOCUS-color:  #448000;
}
/** Rechercher */
.formRecherche {
  display: flex;
  margin-bottom: 1.5em;
}
.formRecherche .champs {
  display: inline-block;
  position: relative;
}
.formRecherche .champs label {
  position: absolute;
  left: 0.5em;
  top: -0.5em;
  padding: 0 0.5em;
  font-size: 0.9em;
  color: var(--FRONT-color);
  background-color: var(--BACKGROUND-color);
  transform-origin: 1em -2em;
  transition: transform 0.15s ease;
}
.formRecherche .champs label.like-placeholder {
  transform: scale(1.25);
  top: -0.25em;
  color: var(--FRONT-color);
  background-color: var(--BACKGROUND-color);
}
.formRecherche .champs input {
  font-size: 1em;
  padding: 0.75em 0.5em 0.25em 0.5em;
  border: 1px solid var(--BORDER-color);
  border-radius: 0.25em 0 0 0.25em;
  background-color: var(--BACKGROUND-color);
  color: var(--FRONT-color);
  width: 200px;
}
.formRecherche .champs input:focus {
  border: 3px solid var(--FOCUS-color);
  outline: 0;
}
.formRecherche button {
  background-color: var(--BUTTON-color) !important;
  color: var(--BORDER-color);
  border: 1px solid var(--BORDER-color) !important;
  padding: 0 0.5em;
}
.formRecherche button[type="reset"] {
  border-radius: 0;
}
.formRecherche button[type="submit"] {
  border-radius: 0 0.25em 0.25em 0;
  border-left: 1px solid var(--BORDER-color);
}
.formRecherche button:hover,
.formRecherche button:focus {
  background-color: var(--FOCUS-color) !important;
  color: var(--BACKGROUND-color);
  outline: 0;
}
.formRecherche button svg {
  padding-top: 0.25em;
}