Mehrere Login-Formulare mit Hervorhebung

Das ist etwas spezifisch… aber ich dachte, was soll’s, vielleicht ist es für jemanden nützlich. Ich hatte kürzlich Gelegenheit, mehrere verschiedene Login-Formulare auf einer einzigen Seite zu erstellen. Mit CSS können wir aktive Eingabefelder mit:activestylen. Das ist nützlich… und wir haben bereits besprochen, wie man sowohl Eingabefelder und Labels hervorhebt. Aber jetzt müssen wir einen Schritt weiter gehen und das aktuelle Formular selbst hervorheben.

Dieser Artikel ist ziemlich alt. Heutzutage würde man wahrscheinlich nur :focus-within verwenden.

HTML

Drei Blöcke, jeder mit einem Formular

<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

Das CSS ist nicht besonders interessant. Die Formulare selbst haben einen weißen Rand, und wir richten eine Klasse ein, die einen farbigen Rand hat. Diese Klasse wird mit JavaScript angewendet und entfernt, wobei Stilinformationen ordnungsgemäß aus JavaScript herausgehalten werden.

.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

Das, was das „funktionieren“ lässt, ist hier. Wenn ein Eingabefeld fokussiert ist, werden die Hervorhebungen von allen Formularen auf der Website entfernt und dem Formular hinzugefügt, das dieses neu fokussierte Eingabefeld enthält. Dank bartaz für den Hinweis, dass jQuery 1.4 jetzt „focusin“- und „focusout“-Ereignisse für Formulare unterstützt, die ausgelöst werden, wenn ein beliebiges Eingabefeld darin aktiv ist. Wir können darauf achten. Wenn focusin ausgelöst wird, entfernen wir die Hervorhebungen von allen Formularen und fügen sie demjenigen hinzu, das gerade das Ereignis ausgelöst hat.

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

Demo

Beachten Sie, dass dies eine veraltete Version von jQuery verwendet. Neuere Versionen unterstützen diese focusin-Verwendung nicht direkt.