Multiple Login Forms with Highlighting

This is a little specific… but I figured what the heck maybe it will be useful for someone. I recently had occasion to make multiple different login forms on a single page. With CSS we know we can apply styling to active inputs with :active. That’s useful… and we’ve covered how to do both input and label highlighting before. But now we need go one step up and highlight the current form itself.

This article is pretty old. You’d probably just use :focus-within these days.

HTML

Three blocks, each with a form:

<div class="login-block">
    <h3>Sharepoint Login</h3>
    <form action="#" method="post" target="_blank">
        <p><label for="sharepoint-company-name">Company</label><input type="text" name="sharepoint-company-name" id="sharepoint-company-name" /></p>
        <p><label for="sharepoint-user-name">User Name</label><input type="text" name="ftp-user-name" id="ftp-user-name" /></p>
        <p><label for="sharepoint-password">Password</label><input type="password" name="ftp-password" id="ftp-password" /></p>
        <p class="submit-wrap"><input type="submit" id="sharepoint-submit" class="button" value="Login" /></p>
    </form>
</div>

<div class="login-block">
    <h3>FTP Login</h3>
    <form action="#" method="post" target="_blank">
        <p><label for="ftp-user-name">User Name</label><input type="text" name="ftp-user-name" id="ftp-user-name" /></p>
        <p><label for="ftp-password">Password</label><input type="password" name="ftp-password" id="ftp-password" /></p>
        <p class="submit-wrap"><input type="submit" id="ftp-submit" class="button" value="Login" /></p>
    </form>
</div>

<div class="login-block last"> 
    <h3>Secret Area Login</h3>
    <form action="#" method="post" target="_blank">
        <p><label for="secret-user-name">User Name</label><input type="text" name="ftp-user-name" id="ftp-user-name" /></p>
        <p><label for="secret-password">Password</label><input type="password" name="ftp-password" id="ftp-password" /></p>
        <p class="submit-wrap"><input type="submit" id="ftp-submit" class="button" value="Login" /></p>
    </form>
</div>

CSS

The CSS isn’t particularly interesting. The forms themselves have a white border around them, and we set up a class that has a colored border. That class will be applied and removed with JavaScript, properly keeping style information out of JavaScript.

.login-block {
    float:left;
    margin:0 49px 25px 0;
    text-align:center;
    width:260px;
}

.login-block form {
    -moz-border-radius:15px 15px 15px 15px;
    -moz-box-shadow:0 0 10px #333333;
    border:3px solid white;
    padding:20px;
}

.login-block .active-form {
    border-color:#d09e6d;
}

jQuery JavaScript

The bit that makes this “work” is here. When an input is focused, it removes highlighting from all forms on the site, and adds it back to the form which contains this newly-focused input. Thanks to bartaz for pointing out that jQuery 1.4 now supports “focusin” and “focusout” events for forms, which fire when any input inside them is active. We can watch for that. When focusin fires, we’ll remove highlighting from all forms and add it back to the one that just fired the event.

$(function() {
    var $forms = $("form");
    $forms.focusin(function() {
        $forms.removeClass("active-form");
        $(this).addClass("active-form");
    });
});

Demo

Note that uses an ancient version of jQuery. Newer versions don’t support that focusin usage directly.