隐藏登录表单HTML

我想知道是否有可能用HTML和CSS创建一个隐藏的表单？如果需要的话，可能是Javascript

我在想一个只有密码的表单，所以当你进入一个网页时，你只会看到一个由div标签输入的图像。我想让您可以在不显示密码的情况下输入密码，这样当您单击“输入”时，如果密码正确，您就可以登录

我是这样想的：

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

#覆盖{
背景：url(http://link/ex.png)无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
框大小：边框框；
位置：绝对位置；
底部：0；
左：0；
右：0；
排名：0；
}

因此，用户只能看到div标签覆盖的图像，但用户可以输入密码并单击enter登录。这我不想被看到，所以只有用户登陆这个页面，并知道你可以登录它。其他看到这一页的人会想什么

我在想，有没有可能用z-index来做这个？ 如果叠加z指数为1

---

表单的另一个div，例如：#form和#form i like-2的z索引

可能使用

左键：-1000px属性，但这样做可能不是一个好主意。原因如下：

如果密码表单字段没有显示给用户，他们将永远不会知道需要输入一个。。。即使是在屏幕外。这将产生一个奇怪的用户体验问题，这只会让用户感到困惑
将密码存储到隐藏的表单字段或JavaScript字段中，将首先否定使用登录门的原因。因此，登录门将被删除&页面内容将公开，而不是受到保护
在屏幕外隐藏表单字段可能被一些搜索引擎机器人视为他们可以搜索网站的东西，因为表单内容和文本是隐藏的&用户无法访问它们。这可能会对网站的SEO价值产生负面影响。这完全取决于谁编写了bot&他们在代码中检查什么。不同的机器人有不同的规则
只是一个建议：

一个更好的解决方案可能是制作一个标签系统，在第一页加载时，用户将看到一组“注册/登录”链接或标签或图像的HTML。因此，可以使站点看起来很漂亮，在注销时不会看到表单字段

然后第一次单击“注册”链接/选项卡，将隐藏的选项卡/表单翻转到视图中，并显示3个表单字段：用户名、密码和提交按钮。（但是，当页面加载时，请将密码字段留空。否则，它看起来像点或星号，用户有退格或高亮显示，并按下“删除”按钮以删除这些未知/隐藏的字符。）显然，网站在提交表单时会保存其用户名和密码

然后，在第一次登录之后，脚本将为该用户创建一个cookie。在使用相同浏览器的PageLoad2+上，站点只需检查cookie即可。如果找到，则显示页面内容。用户不需要查看表单输入框、任何覆盖图或“注册/登录”链接/选项卡/图像。如果需要，您可以在该区域中使用“注销”链接，或者什么都不使用。单击“注销”链接将删除cookie并重新显示默认的第一页视图（“注册/登录”链接或选项卡或图像）

切换浏览器时，用户可以使用“登录”链接+之前存储的用户名和密码登录，这将在第二个浏览器中设置cookie

这通常会带来更干净的用户体验，这是用户所熟悉和接受的。
我举了一个简单的例子

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

如果按enter键，则会看到它已提交


可以删除此警报以隐藏用户正在关注的事实，但我添加了此警报以使示例更易于理解。
为什么要使用覆盖？不能仅仅通过给表单一个否定的位置来把表单放在页面边界之外吗？我不知道，我只是想得很快。你是什么意思？如果你给我一个JS方法的例子，我会很高兴，看看这个答案：哦，我会考虑这个问题，并阅读更多！谢谢你的信息！
div{
  height:265px;
  width:265px;
  background-image: url("someimgurl");
}