hidden login form HTML

Question

I was woundering if it's possible to create a hidden form with HTML and CSS? Maybe Javascript if needed?

I was thinking a form with only password so when you enter a webpage the only thing you will se is an image enter by a div tag. And I want to make it possible to enter a password without showing it so when you click enter you can login if it is the right password.

I was thinking something like this:

<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;
}

So the only thing the user see is the image from the div tag Overlay but the user can input a password and click enter to login. This I do not want to been seen so only users land on this page and know that u can login do it. Other who see this page will think whatthef*ck.

I was thinking, is it possible to do this with z-index? Maybe if overlay z-index is 1 and another div for the form, example: #form and the z-index for #form i like -2 ?

Why an overlay? Can't just just put the form outside of the page boundaries by giving it a negative position? — GolezTrol, Apr 08 '16 at 17:18
I dont know, was just thinking fast. How do you mean? I would love if u gave me an example — Chris, Apr 08 '16 at 17:21
For a JS approach, see this answer: http://stackoverflow.com/a/21070237/2844992 — Andrew Quebe, Apr 08 '16 at 18:35

Sven van den Boogaart · Accepted Answer · 2016-04-08T18:41:14.770

I made a simple example

<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");
}

If you press enter you see it is submited.

Fiddle

The alert can be removed to hide the fact that the user is focust but Ive added it to make the example more understandable.

score -1 · Answer 2 · answered Apr 08 '16 at 18:19

It may be possible to do with a left: -1000px; property in the #overlay CSS code, but it's probably not a good idea to do so. Here's why:

If a password form field isn't displayed to a user, they'll never know that they need to input one... even if it's offscreen. This would create a weird UX issue, which will simply confuse users.
Storing passwords into a hidden form field or a JavaScript field, would negate the reason for using the login gate in the first place. So the login gate would be removed & the page contents would become public, rather than protected.
Hiding form fields off-screen could be seen by some search engine bots as something that they can ding a website for, because the form contents and text are hidden & users can't access them. It could negatively affect your site's SEO value. It all depends upon who wrote the bot & what they are checking for in the code. Different bots have different rules.

Just a suggestion:

A better solution might be to make a tab system, where upon 1st page load a user would see HTML for either a set of "Signup / Login" links or tabs or images. So the site can be made to look nice, without seeing form fields when logged out.

Then clicking on the "Signup" link/tab for the 1st time, would flip the hidden tab/form into view & display the 3 form fields for: username, password & a submit button. (However leave the password field blank, when the page loads. Otherwise, it looks like dots or asterisks and the user has backspace or highlight & press a "Delete" button to wipe out those unknown/masked characters.) Obviously, the website would save their username & password when the form is submitted.

Then after the login for the 1st time, the script would create a cookie for that user. On page load 2+ with the same browser, the site would simply check for the cookie. If found, then show the page contents. The user wouldn't need to see either form input boxes, nor any overlays, nor the "Signup / Login" links/tabs/images. You could use a "Logout" link in that area if desired, or nothing at all. Clicking on a "Logout" link would would delete the cookie & redisplay the default 1st page view ("Signup / Login" links or tabs or images).

Switching browsers, the user could use the "Login" link + their previously stored username & password to login, which would set up a cookie in that 2nd browser.

That usually makes for a cleaner UX experience, which users are familiar with & would accept.

Ohh i will think about this and read more! Thanks for the information! — Chris, Apr 08 '16 at 20:10

hidden login form HTML

2 Answers2