Placeholders en de zoekfunctie
Een gebruikelijke opzet voor een zoekoptie in de header is:
- een onzichtbaar label;
- de placeholder als zichtbaar label;
- rechts naast het formulierveld een submitbutton met de tekst "Zoek" en/of een icoontje van een loopje.
Hierbij wordt het zoekloopje als zichtbaar label gebruikt over wat in te vullen als de placeholder verdwijnt. Omdat dit een veel gebruikte constructie is, is dit prima. Het is door buttontekst of icoon voldoende duidelijk wat er wordt verwacht.
Doen
De placeholder samen met tekst van de submitbutton gebruiken zichtbaar label in een kort zoekformulier.
<label class="sr-only" for="header-search">Zoek</label><input id="header-search" placeholder="Zoek" type="search"/><button>Zoek</button>
Over deze richtlijnen
Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.
We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Deel je mening op GitHub met je suggesties.