Advanced Search

Return to Snippet

Revision: 25269
at March 25, 2010 04:32 by cfleschhut
Initial Code 
function initOverLabels() {
    var labels, id, field;
    labels = document.getElementsByTagName("label");
    for(var i=0; i<labels.length; i++) {
        if (labels[i].className == "overlabel") {
            id = labels[i].htmlFor || labels[i].getAttribute("for");
            if (!id || !(field = document.getElementById(id))) {
                continue;
            }
            labels[i].className = "overlabel-apply";
            if (field.value != "") {
                hideLabel(field.getAttribute("id"), true);
            }
            field.onfocus = function() {
                hideLabel(this.getAttribute("id"), true);
            }
            field.onblur = function() {
                if (this.value == "") {
                    hideLabel(this.getAttribute("id"), false);
                }
            }
        }
    }
}

function hideLabel(field_id, hide) {
    var field_for;
    var labels = document.getElementsByTagName("label");
    for(var i=0; i<labels.length; i++) {
        field_for = labels[i].htmlFor || labels[i].getAttribute("for");
        if (field_for == field_id) {
            labels[i].style.textIndent = (hide) ? "-9999px" : "0";
        }
    }
}

window.onload = function() {
    initOverLabels();
}


form#login {
    position: relative;
}
div#username, div#password {
    position: relative;
    float: left;
    margin-right: 3px;
}
input#username-field, input#password-field {
    width: 10em;
}
label.overlabel {

}
label.overlabel-apply {
    position: absolute;
    top: 3px;
    left: 5px;
    z-index: 1;
}


<form name="login" action="#" method="post">
    <div id="username">
        <label for="username-field" class="overlabel">Username</label>
        <input id="username-field" type="text" name="username" title="Username" value="" tabindex="1" />
    </div>
    <div id="password">
        <label for="password-field" class="overlabel">Password</label>
        <input id="password-field" type="password" name="password" title="Password" value="" tabindex="2" />
    </div>
    <div id="submit">
        <input type="submit" name="submit" value="Login" tabindex="3" />
    </div>
</form>
Initial URL 
http://jsfiddle.net/rYp59/3/
Initial Description 
adopted from:
http://www.alistapart.com/articles/makingcompactformsmoreaccessible/
Initial Title 
Accessible Compact Forms
Initial Tags 
css, javascript, html, forms
Initial Language 
JavaScript