[Résolu] <button> intégré à input type="text"

Bonjour,

De nos jours la plupart champs de recherche en texte libre comprennent un bouton de soumission avec une image qui est visuellement intégré au champ text.

J'illustre l'idée avec ce codepen.

Ma question concerne le positionnement du <button>

Dans l'exemple j'utilise position absolute mais n'y a-t-il pas mieux à faire ?
Avec une flexbox ?

Je précise que le champ text occupe 100% du conteneur, autrement il me semble que laisser le button en display inline avec une marge négative serait suffisant.

Salut,

Oui, moi je le fais en flex. Ce qui permet notamment d'aligner sur une même hauteur l'input et son bouton de soumission même si, pour des raisons esthétique, j'impose à l'élément conteneur une hauteur par défaut :

.search {
    display: flex;
    width: 100%;
    height: 3em; /* pour des raisons esthétiques */
    align-items: stretch;
}

.search input {
    flex-grow: 1;
    max-height: 100%;
    /* etc... */
}

<div class="search">
  <label class="sr-only" accesskey="s">Rechercher</label>
  <input type="search" name="s" placeholder="Rechercher" required="" aria-label="Search through site content">
  <button>
    <svg class="icon" role="img" focusable="false">
      <use href="/sprites/util.svg#search"></use>
    </svg>
    <span class="sr-only">Rechercher</span>
  </button>
</div>

Comme vous le voyez dans la partie html, pour l'image je fais appel à un sprite SVG.

Exemple en ligne (`.search` tout en bas) : Forms
Modifié par Olivier C (11 Nov 2022 - 13:16)

Bonjour Olivier C,

Très intéressant, merci.

Mais j'ai l'impression que ton bouton n'est pas superposé sur l'input text, est-ce que je me trompe ?

La forme du svg donne l'illusion d'une superposition, pour arriver à ce résultat il faudrait que je modifie la forme de mon image.

Je viens de feuilleter le bouquin de Raphaël sur display GRID et j'ai vu un chapitre où il parle de la superposition d'éléments.

Si Flexbox permet la superposition (comme position absolute) c'est le plus simple.

Oui, mais alors dans ce cas là il faudra prévoir un padding-left suffisamment important, sinon le texte saisit passera sous le bouton.

bonjour boteha_2

attention, tu confond peut-être grid et flex dans leurs fonctionnements. (superposition ? )

flex construit une grille à partir des enfants sur un seul axe, mais ne définis pas de cellule où serait déposés ceux-ci. Ce sont les enfant qui créent les cellules de la grille et sur un seul axe et détermine leur taille.

grid construit une grille composée de cellule et sur les deux axes. Les enfant peuvent ensuite être assignés dans les cellules de cette grille ainsi qu'occuper plusieurs cellules adjacentes. En assignant 2 éléments à la même cellule, ceux ci se superposent (comme un positionnement absolu) mais reste dans le flux de la page contrairement au positionement absolu.

J'ai fait un fork de ton pen comme exemples. https://codepen.io/gc-nomade/pen/vYrmEzY

Si tu souhaites superposer deux éléments, pense aussi à la façon dont ils sont dessinés à l'écran , ils s'empilent les un sur les autres, le dernier sur le dessus.(visuel et survol)

cdt
Modifié par gcyrillus (12 Nov 2022 - 22:22)

Olivier C,

Tu as raison et je reconnais que ta solution par flexbox est objectivement meilleure.

Maintenant j'y pense :
Si je fais la bordure par le conteneur de l'input et du button (au lieu de le faire par l'input) alors ta solution Flexbox fonctionne aussi dans mon cas.

Je corrige mon codepen en fin de journée, je reviendrai vers vous.

gcyrillus

Merci pour tes exemples pédagogiques, cela servira à d'autres que moi.

En fait j'étais focalisé sur la nécessite d'une superposition alors que c'est inutile...
Modifié par boteha_2 (11 Nov 2022 - 15:51)

Bonjour,

j'ai mis à jour le codepen.

Cela me semble correct.

J'attends un peu avant de cocher Résolu.
Modifié par boteha_2 (12 Nov 2022 - 13:37)

Bonjour,

J'ai un peu peaufiné le codepen et je coche Résolu.

Merci à Olivier C et gcyrillus pour leur aide précieuse.