页面或视频上的简单密码字段

Question

我正在为我哥哥和姐姐的 30 岁生日制作一个非常简单的网站。这基本上是一个真实世界的寻宝游戏。在某个时候他们会得到我网站的网址，并且在那个网站上会有一个视频给他们提供线索。

现在，我还希望他们有一个密码（他们早先会找到），允许他们访问网站或视频。包含视频的页面受密码保护或视频本身受密码保护。

我对 HTML 有非常的基本知识，我找到了密码字段的 HTML 代码，正确时会打开一个新页面，但是这似乎不起作用..从阅读其他博客我认为它可能不像一个 HTML 代码那么简单？

有人可以帮忙吗？我不需要任何 username/login 字段，只需要一个密码字段 - 以及播放视频的密码或将他们带到包含视频的新页面的密码...

我也非常乐意使用网站构建器，如果有人知道一个像样的网站构建器可以让我轻松地做到这一点...

谢谢！

Answer 1

一个超基本的例子可能会有所帮助：

const goodPassword = 'thisisthepassword';
document.forms.pwd.addEventListener('submit', function(e) {
  if (e.target.elements[0].value !== goodPassword) {
    e.target.elements[0].value = '';
    e.preventDefault();
  }
})

<!-- Put your website link as the form action attribute value -->
<form name="pwd" method="GET" action="[ Your video page URL ]">
  <label for="q">Password:
    <input type="password" name="q" />
  </label>
  <button type="submit">Go</button>
</form>

页面或视频上的简单密码字段

Simple password field on page or video

html

passwords