Joran Quinten.nl - Goodies

Inline formulier labels, maar dan semantisch

In een poging formulierlabels netjes vorm te geven binnen (in dit geval) een zoekformulier, kwam ik de volgende oplossingen tegen; ZURB gebruikt een combinatie van jQuery en CSS3, Mike Cravey een -in mijn ogen- breder toepasbare oplossing.

Beide methoden hebben zo hun voor -en nadelen, vandaar dat ik het beste uit twee oplossingen heb gecombineerd;

In dit geval heb ik (vanwege toepasbaarheid op huidige browsers) de basis van Mike Cravey gebruikt. Hierbij wordt ook gebruik gemaakt van jQuery om browser-events af te vangen en naar gelang te handelen. Punt is dat in dit geval bij het selecteren van het textveld het label direct verdwijnt, zodat je als gebruiker nog niet altijd weet wat ingevuld dient te worden, zeker wanneer je via TAB door een formulier navigeert; het label wordt dan direct gewist.

De methode van ZURB vangt dit af door bij focus het label een lichtere tint te geven; duidelijke feedback voor de gebruiker.

De combinatie is alsvolgt opgebouwd;

<div id="zoekformulier">
<form action="/" method="post">
<ul>
<li>
        <span class="wrap">
            <label for="zoekterm">Zoekterm</label>
            <input id="zoekterm" type="text" />
        </span></li>
<li>
        <input class="button" type="submit" value="Zoeken" /></li>
</ul>
</form></div>

De (minimale) CSS-opmaak. De class .overlayed wordt door middel van jQuery toegepast op alle labels binnen opgegeven div. Wanneer javascript uitgeschakeld staat, wordt het label netjes naast het input-veld weergegeven;

form span.wrap {
    position: relative;
}
form span.wrap label.overlayed {
    position: absolute;
    top: .15em;
    left: .2em;
    white-space: nowrap;
}
form span.wrap label.focus {
    color: #999;
}

De volgende javascriptcode (jQuery) verzorgt de interactie; bij focus van het input-veld wordt de .focus-class toegepast op het label, bij tekstinvoer in het input-veld wordt het label verborgen. In alle andere gevallen wordt het label in standaardvormgeving getoond;

$(document).ready(function(){
var oTxtFields = $('#zoekformulier input[type="text"]');
$.each(oTxtFields,function(){
    var label = $('label');
    label.addClass('overlayed');
    if (!$(this).val() == '') {
        label.hide();
    }
    $(this)
        .focus(function(e){ $('label').addClass('focus'); })
        .keypress(function(e){ $('label').hide(); })
        .blur(function(e){
            if ($(e.target).val() == ''){
                $('label').show();
                $('label').removeClass('focus');
            }
        });
    });
});

Tags: css, formulier, gebruiksvriendelijkheid, interface design, javascript, jquery, label, usability, ux, xhtml