Welkom bij TheHotSeat, pseudoniem voor een Gentse freelance webontwikkelaar. Maar bovenal een blog over webdesign, webontwikkeling en (digitale) vormgeving
Een stijlvol zoekformulier met xhtml en css
23 sep 2008•Toen ik aan deze website werkte, wilde ik een zoekfunctie die qua ontwerp mooi aansloot bij de rest van de hoofding. Het resultaat kan je zien in de rechter bovenhoek. In deze blogpost kan je lezen hoe de zoekfunctie vormgegeven werd met html en css.
De zoekfunctie is uiteraard een html formulier en daar zit nu net het addertje onder het gras: elke browser heeft zo zijn eigen manier om knoppen en tekstveldjes weer te geven.
Omdat ik het uitzicht van de zoekfunctie in alle grote hedendaagse browsers identiek wilde, heb ik de knop en het tekstveldje vervangen door een afbeelding. Beeldjes worden door elke browser wel identiek weergegeven natuurlijk.
Hieronder vind je de xhtml. Je zal zien dat die vrij eenvoudig is en enkel de basiselementen bevat voor een standaard zoekformulier. Beweeg je muis over het gele vlak om de volledige code te zien:
<div id="omgeving">
<div id="search_box">
<form method="post" action="#">
<fieldset>
<input type="text" id="keywords" name="keywords" />
<input type="image" src="zoeken-knop.gif" id="submit" alt="Zoeken" title="Zoeken" />
</fieldset>
</form>
</div>
</div>
De buitenste div (‘omgeving’) zorgt straks voor de donkere achtergrond. De submitknop vervangen we zoals je nu al kan zien door een beeldje (zoeken-knop.gif). De bovenstaande htmlcode ziet er zo uit in Firefox:
Niet erg verrassend natuurlijk. De kern van de vormgeving zit in de css. Om de ruimte voor en na het formulier en de fieldset te doen verdwijnen zette ik de padding van die elementen eerst op 0.
form, fieldset {
padding: 0;
}
De donkere fijne rand die je rondom het formulier ziet is altijd zichtbaar bij een fieldset maar is eenvoudig te verwijderen:
form, fieldset {
padding: 0;
border: 0;
}
De rand en de witruimte rondom de fieldset en het formulier zijn nu verdwenen. Vervelend is wel nog dat op Mac tekstveldjes omrand worden met een blauwe lijn wanneer je ze aanklikt:
Dit effect past niet in de huidige vormgeving van de website. Gelukkig kunnen we het snel verwijderen: (Weet wat je doet! Zie lezersreacties op dit artikel.)
input {
outline: 0;
}
Het donkere vlak waarin het zoekformulier zit is vormgegeven met hele eenvoudige css:
div#omgeving {
background-color: #333;
height: 80px;
width: 400px;
padding: 30px 0 0 40px;
}
Dit leverde me het volgende resultaat op:
Het tekstvakje zelf moet natuurlijk nog aangepast worden. Het ziet er veel te wit uit en heeft een lelijke rand die dan nog eens verschilt van browser tot browser. Mijn eerste idee was om het tekstveldje zelf via css te gaan stylen, maar op die manier kreeg ik het beeldje van het vergrootglas nooit in het tekstveld zelf. Daarbij kwam dat er nog altijd veel verschillen merkbaar waren tussen de verschillende browsers. Daarom heb ik de volledige zoekfunctie in een div gestopt en aan die div een achtergrondafbeelding meegegeven:
div#search_box {
width: 146px;
height: 22px;
background: url(zoeken-achtergrond.gif);
margin: 0;
}
Hieronder zie je het resultaat. Omdat de search_box niet breed genoeg is om zowel het invulveld als de submitknop weer te geven, springt de submitknop naar een volgende regel.
Ik moest het invulveld dus kleiner maken. Via de background en border properties zorgde ik er ook voor dat de witte achtergrond en de randen weg zijn. Het invulveld is er nu nog wel samen met al zijn functionaliteit, maar is eigenlijk onzichtbaar geworden.
div#search_box #keywords {
width: 110px;
background: none;
border: none;
}
Dit is nu ons resultaat:
Door de submitknop wat css mee te geven kon ik die ook op z’n plaats doen springen. De float zorgt er voor dat de knop naast het invulveld kan blijven staan.
div#search_box #submit {
float: right;
margin: 5px 9px 0 0;
width: 15px;
height: 14px;
}
Zo ziet het formulier er nu uit wanneer er een zoekterm ingegeven wordt:
Het formulier ziet er nu goed uit, alleen staat de tekst daar nog een beetje te zweven. Die moet nog een aantal pixels opgeschoven worden om mooi uitgelijnd te zijn met de submitknop en het invulveld. Ook mag het corps wat groter. Door hier ook een float mee te geven blijven de twee elementen mooi naast elkaar staan en mogen ze indien nodig mekaar een beetje overlappen.
div#search_box #keywords {
float: left;
padding: 0;
margin: 3px 0 0 6px;
width: 110px;
background: none;
border: none;
font-size: .8em;
}
En dan is dit ons resultaat! Ik was er best tevreden mee en het ziet er identiek uit op Internet Explorer 7 (Windows), Firefox 3 (Windows en Mac), Safari 3 (Windows en Mac), Chrome 1 (Windows) en Opera 9 (Windows):
Alle grote browsers geven het formulier dus identiek weer… behalve Internet Explorer 6 (Win) natuurlijk. Die is nu eenmaal altijd de boosdoener. IE6 geeft het formulier zo weer:
De search_box div lijkt te hoog te zijn waardoor IE6 het achtergrondbeeldje herhaalt. Dit is eenvoudig op te lossen door ‘no-repeat’ aan de background mee te geven:
div#search_box {
width: 146px;
height: 22px;
background: url(zoeken-achtergrond.gif) no-repeat top left;
margin: 0;
}
Het formulier ziet er niet alleen goed uit, het blijft ook heel functioneel en gebruiksvriendelijk. Hier kan je het formulier in actie zien, in de broncode vind je nog eens alle code op een rijtje.
Categorieën: Ontwerp, Ontwikkeling,
Over 
TheHotSeat is Thomas Byttebier, freelance webontwikkelaar en grafisch ontwerper.
Op deze website blog ik over alles wat met webdesign en digitale vormgeving te maken heeft. Meer informatie over mij.
RSS Feed TheHotSeatLaatste blog posts
- Upgraden naar ExpressionEngine 2.0
- Hoe het ontwerp van Transistor tot stand kwam
- Transistor: radio op de iPhone
- Over HTML5
- Scrollen in het oneindige
Laatste reacties
- Hendrik op Upgraden naar ExpressionEngine…
- Thomas Byttebier op Hoe het ontwerp van Transistor…
- Thomas Byttebier op Upgraden naar ExpressionEngine…
- Kevin op Upgraden naar ExpressionEngine…
- Frederik Severijns op Hoe het ontwerp van Transistor…
Categorieën
Alle • ExpressionEngine • iPhone • Transistor • Marketing • SEO • Ontwerp • Typografie • Ontwikkeling • jQuery • PHP • Zend Framework • Opinies • Overige • Photoshop • Webomgeving
Gelijkaardige blog posts
4 reacties op dit bericht
beire post, zo’n onderwerpen mogen voor mijn part blijven komen. Gimme gimme gimme :D
Toffe post, ben van plan om een nieuwe site te maken. De steek ik er zeker in.
Merci
Thomas, die blauwe focusring in Safari is daar voor een reden, nl om de gebruiker duidelijk en visueel aan te geven op welk veld hij zich bevindt. De manier van focus aangeven is eigen aan Safari en een deel van de browserfunctionaliteit. Gebruikers van Safari zijn eraan gewend en verwachten dit bij het invullen van formuliervelden. Deze focusaanduiding onderdrukken omdat “het niet in het design past” is even erg als de scrollbar gaan kleuren om bij het design te passen, of te zeggen dat de backbutton niet bij de website past. Standaard browserfunctionaliteit zou onder geen enkele voorwaarde mogen gewijzigd worden.
Trouwens wel heel vervelend is dat bij het invullen van dit commentaarveld er geen cursoraanduiding is, eveneens een standaard browserfunctionaliteit die verdwenen is.
@Danny:
Hoewel ik je vergelijking met de backbutton wat overdreven vind, heb je hier zeker een punt. De blauwe focusring heeft zijn nut en de standaard vormgeving van een invulveld veranderen is gevaarlijk. Niet iedereen kan in één oogopslag zien dat het hier om een invulveld gaat. Ik besef dan ook dat ik me op glad ijs begeef als ik zeg dat ik het in bepaalde gevallen ok vind om die focusring weg te halen en de standaard vormgeving van formuliervelden te wijzigen.
Er is hier bijvoorbeeld maar 1 invulvakje en het focuseffect is aanwezig door het weliswaar minder opvallende javascripteffect (het woord “zoeken” verdwijnt). Een standaard invulveld (met focusring en standaard vormgeving) zou ook meer aandacht vragen dan nodig vind ik. Maar je reactie is in het licht van deze tutorial zeker op zijn plaats. Bedankt daarvoor.
Dit is helemaal niet de bedoeling. Ik heb het even onderzocht en kan het reproduceren in Firefox op Windows. Het zou wel eens deze bug kunnen zijn. Ik zoek alvast naar een oplossing. Bedankt om dit te melden.
Plaats een reactie
Reageren is niet mogelijk op dit bericht.