Étiquette de champs

Étiquette de champs simulant le visuel du texte affiché par défaut dans un champ de formulaire.

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

Dans un formulaire, il est possible d’afficher un texte par défaut dans un champ via l’attribut placeholder. Or, tout champ de formulaire doit avoir un label associé. Le fait de remplacer le libellé label par un attribut placeholder empêche l’accessibilité du champ du formulaire puisque le libellé du placeholder disparaît au focus.
Le motif de conception suivant propose donc de simuler un placeholder en donnant au label le rendu visuel du placeholder.

Visuel

Extraits de code

Code HTML

 <form id="motif-placeholder">
    <div class="field">
       <label for="prenom">Prénom</label>
        <input type="text" id="prenom" name="prenomTextField">
    </div>
    <div class="field">
        <label for="nom">Nom</label>
        <input type="text" id="nom" name="nomTextField">
    </div>
    <div class="field">
        <label for="email">Adresse mail</label>
        <input type="text" id="email" name="emailTextField">
    </div>
    <button>Envoyer</button>
</form>

Code CSS

Pour adapter la couleur de la barre de navigation et des liens, modifier les codes couleurs dans la déclaration :root.

:root {
    --COULEUR-1: #a2aabd;
    --COULEUR-2: #b5bdce;
    --COULEUR-3: #333;
    --COULEUR-4: #027dc7;
    --COULEUR-5: #FFF;
  }
  #motif-placeholder {
    width: 450px;
    border: 1px dotted var(--COULEUR-1);
    padding: 3em;
  }
  #motif-placeholder .field {
    margin-bottom: 1.75em;
    position: relative;
  }

  #motif-placeholder label {
    color: var(--COULEUR-1);
    font-size: 1.75em;
    font-weight: 500;
    left: .5em;
    position: absolute;
    top: .25em;
    transition: all 0.1s linear;
  }

  #motif-placeholder input {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--COULEUR-2);
    color: var(--COULEUR-3);
    font-size: 1.5em;
    padding: .75em .5em .5em;
    width: 100%;
  }

  #motif-placeholder input:focus {
    border-color: var(--COULEUR-4);
    outline: 0;
  }

  #motif-placeholder input:focus+label,
  #motif-placeholder input+label.show {
    border-radius: 4px;
    color: var(--COULEUR-4);
    font-size: 1em;
    left: .5em;
    padding: 0 .15em;
    text-transform: uppercase;
    top: -1em;
  }
  #motif-placeholder button {
    background: var(--COULEUR-4);
    border: none;
    border-radius: 5px;
    color: var(--COULEUR-5)&nbsp;
    font-size: 1.5em;
    padding: .75em;
    text-transform: uppercase;
    width: 100%;
  }

Code javascript


var PlaceHolderInputElements = document.querySelectorAll('.field input');
const button = document.querySelector('button[type="reset"]');

for (var i = 0; i < PlaceHolderInputElements.length; i++)
{
	scaleLabel(PlaceHolderInputElements[i], true);
	PlaceHolderInputElements[i].addEventListener('focus', function () { scaleLabel(this, false) });
	PlaceHolderInputElements[i].addEventListener('blur', function () { scaleLabel(this, true) });
  button.addEventListener('click', function () { scaleLabel(this, true) });
}

function scaleLabel(element, isLikePlaceholder)
{
	if (isLikePlaceholder)
	{
		if (element.value === '')
		{
			element.parentNode.querySelector('label').classList.add('like-placeholder');
		}
	}
	else
	{
		element.parentNode.querySelector('label').classList.remove('like-placeholder');
	}
}