verstecktes Login-Formular HTML

Question

Ich war betrübt, wenn es möglich ist, eine versteckte Form mit HTML und CSS zu erstellen? Vielleicht Javascript wenn nötig?

Ich dachte ein Formular mit nur Passwort, also wenn Sie eine Webseite eingeben, wird das einzige, was Sie sehen werden, ein Bild durch ein Div-Tag eingeben. Und ich möchte es möglich machen, ein Passwort einzugeben, ohne es zu zeigen, wenn Sie auf Enter klicken, können Sie sich anmelden, wenn es das richtige Passwort ist.

Ich war so etwas wie dieses Denken:

<div id="overlay"> 
<form method="POST" action="index.php"> 
<input type="password" name="pw" AUTOFOCUS> 
</form> 
</div> 

#overlay {   
background: url(http://link/ex.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    box-sizing: border-box; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 0; 
} 

Das einzige, was der Benutzer sehen, ist das Bild aus dem div-Tag Overlay aber der Benutzer kann ein Kennwort und drücken Sie die Eingabetaste um sich einzuloggen. Das möchte ich nicht gesehen haben also nur User landen auf dieser Seite und wissen, dass man sich einloggen kann. Andere, die diese Seite sehen, werden denken, was das ist.

Ich dachte, ist es möglich, dies mit Z-Index zu tun? Vielleicht wenn Overlay Z-Index ist 1 und ein anderes Div für das Formular, Beispiel: #form und der Z-Index für #form mag ich -2?

Answer 1

Ich habe ein einfaches Beispiel

<div onclick="myFunction()"> 
    <form action="demo_form.asp"> 
     <input type="text" style=" opacity: 0;" name="fname" ID="test"> 
    </form> 
<div> 
<script> 
function myFunction() { 
    alert('you can type now, end with enter'); 
    $("#test").focus(); 
} 
</script> 

CSS

div{ 
    height:265px; 
    width:265px; 
    background-image: url("someimgurl"); 
} 

Wenn Sie die Eingabetaste drücken Sie sehen es submited ist.

Fiddle

Der Alarm kann die Tatsache, dass der Benutzer focust zu verstecken entfernt werden, aber Ive hinzugefügt es das Beispiel verständlicher zu machen.

Answer 2

Es kann möglich sein, mit einer left: -1000px; Eigenschaft in der #overlay CSS-Code zu tun, aber es ist wahrscheinlich keine gute Idee, dies zu tun. Hier ist warum:

1. Wenn ein Passwort Formularfeld für einen Benutzer nicht angezeigt wird, werden sie nie wissen, dass sie ein ... eingeben müssen, auch wenn es offscreen ist. Dies würde ein seltsames UX-Problem verursachen, das die Benutzer einfach verwirrt.
2. Das Speichern von Passwörtern in einem versteckten Formularfeld oder einem JavaScript-Feld würde den Grund für die Verwendung des Login-Gate an erster Stelle zunichte machen. So würde das Login-Gate entfernt & der Inhalt der Seite würde öffentlich werden, anstatt geschützt.
3. Das Ausblenden von Formularfeldern außerhalb des Bildschirms könnte von einigen Suchmaschinen-Bots als etwas angesehen werden, für das sie eine Website erstellen können, da die Formularinhalte und der Text nicht sichtbar sind & Benutzer können nicht darauf zugreifen. Es könnte sich negativ auf den SEO-Wert Ihrer Website auswirken. Alles hängt davon ab, wer den Bot & geschrieben hat, nach was sie im Code suchen. Verschiedene Bots haben unterschiedliche Regeln.

Nur ein Vorschlag:

Eine bessere Lösung könnte darin bestehen, eine Registerkarte System zu machen, wo auf der 1. Seite einen Benutzer laden würde für HTML sehen entweder eine Reihe von „Anmelden/Login“ Links oder Tabs oder Bilder. So kann die Seite so gestaltet werden, dass sie schön aussieht, ohne bei der Abmeldung Formularfelder zu sehen.

Wenn Sie dann zum ersten Mal auf den Link "Anmelden" klicken, wird die ausgeblendete Registerkarte/das Formular in die Ansicht geblättert. & Anzeige der 3 Formularfelder für: Benutzername, Passwort & a submit button. (Lassen Sie das Passwortfeld jedoch leer, wenn die Seite geladen wird. Ansonsten sieht es aus wie Punkte oder Sterne und der Benutzer hat die Rücktaste oder markieren Sie & Drücken Sie eine "Löschen" -Taste, um diese unbekannten/maskierten Zeichen zu löschen.) Offensichtlich würde die Website Speichern Sie ihren Benutzernamen & Passwort, wenn das Formular übermittelt wird.

Dann nach dem Login zum ersten Mal, das Skript würde ein Cookie für diesen Benutzer erstellen. Auf Seite laden 2+ mit dem gleichen Browser würde die Website einfach nach dem Cookie suchen. Wenn gefunden, zeigen Sie den Seiteninhalt an. Der Benutzer müsste weder Formulareingabefelder noch Overlays noch die Links/Tabs/Bilder "Anmelden/Anmelden" sehen.Sie können einen "Abmelden" -Link in diesem Bereich verwenden, falls gewünscht oder gar nicht. Ein Klick auf einen "Abmelden" -Link würde den Cookie löschen & die Standardseite der ersten Seite wieder anzeigen ("Anmelden/Login" -Links oder Tabs oder Bilder).

Switching Browser, der Benutzer könnte den "Login" -Link + ihren zuvor gespeicherten Benutzernamen & Passwort zum Login verwenden, die einen Cookie in diesem 2. Browser einrichten würde.

Das sorgt normalerweise für eine sauberere UX-Erfahrung, die Benutzer mit & vertraut sind.