Posted By

cfleschhut on 03/25/10

Tagged

Versions (?)

Last Edited at 03/25/10 04:32am

Statistics

Viewed 638 times

Favorited by 0 user(s)

Related snippets

Accessible Compact Forms

/ Published in: JavaScript

adopted from:
http://www.alistapart.com/articles/makingcompactformsmoreaccessible/

Highlighted TextExpand

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>

URL: http://jsfiddle.net/rYp59/3/

Report this snippet Tweet