html - 如何制作一个简单的密码页面

标签 html web passwords

<分区>

(当心,英语不好) 我正在尝试创建一个页面,其中只有一个“小块”,您可以在其中输入我设置的密码。

如果您输入了正确的密码并按下“进入站点”按钮,您将被转到下一页。

这不一定是一个完全 protected 网站,只是一个 1line 表单,如果输入的密码正确,它会将您发送到 html 代码指定的页面。

我是我学校的一年级学生,非常喜欢使用 html 工作,但由于我比类其他人领先很多,所以我想学习更多,所以我希望有人能帮助我有了这个。

提前致谢!

Here is an example I made in photoshop

最佳答案

仅靠 HTML 无法做到这一点,您需要在后端使用其他语言来检查密码。或者您可以使用 javascript,它将在前端验证密码,但只有当您这样做是为了好玩时,您才必须在代码本身中指定密码。否则,要开发带有登录页面的 Web 应用程序,您需要后端语言(如 php 或 python)和数据库(如 mysql 或 mariadb)来存储密码。

示例代码
您需要创建两个文件,一个用于您的登录表单 (login.html),另一个用于在输入正确密码后重定向 (welcome.html)。

此代码用于 login.html

    <!DOCTYPE html>
<html>
<head>
    <title>Login page</title>
</head>
<body>
<form>
    <label for="pswd">Enter your password: </label>
    <input type="password" id="pswd">
    <input type="button" value="Submit" onclick="checkPswd();" />
</form>
<!--Function to check password the already set password is admin-->
<script type="text/javascript">
    function checkPswd() {
        var confirmPassword = "admin";
        var password = document.getElementById("pswd").value;
        if (password == confirmPassword) {
             window.location="welcome.html";
        }
        else{
            alert("Passwords do not match.");
        }
    }
</script>
</body>
</html>

此代码用于 welcome.html

<!DOCTYPE html>
<html>
<head>
    <title>Welcome page</title>
</head>
<body>
<h1>Welcome!! you entered a right password</h1>
</body>
</html>

关于html - 如何制作一个简单的密码页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42180103/

相关文章:

node.js - 如何发布nodejs网站

javascript 访问参数名称以进行调试

php - MySQL哈希函数的实现

django - 生成 Django SHA1 密码

html - DIV 上的第一个 child 选择不起作用

javascript - 使用 html javascript 同步文本和音频

html - Css 边缘动画问题

html - 我无法在我的 CSS 网格中正确对齐我的 TicTacToe 元素,边框变得困惑

javascript - 每次单击按钮时打开顺序链接的脚本

php - 加密密码并存储在android上的数据库中