制作一个登录页面

最新推荐文章于 2024-05-17 13:52:13 发布

杨峥1111

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量876

点赞数 25

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_66996090/article/details/135585881

版权

制作登陆页面是网站开发中的基础工作。下面我将为大家介绍如何制作一个简单的登陆页面。

步骤一：创建 HTML 文件
首先，我们需要创建一个 HTML 文件。在文件中添加一个表单元素，以便用户输入用户名和密码。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
</head>
<body>
  <form action="" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"><br>
    <label for="password">密&nbsp;&nbsp;&nbsp;码：</label>
    <input type="password" id="password" name="password"><br>
    <input type="submit" value="登&nbsp;&nbsp;&nbsp;录">
  </form>
</body>
</html>

代码中，我们使用了元素来创建表单，使用元素和元素来创建输入框和标签，并设置了提交按钮。

步骤二：添加 CSS 样式
接下来，我们需要为页面添加样式。可以使用内嵌样式或外部样式表来定义样式。代码如下：

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
  <style>
    body {
      background-color: #f6f6f6;
      font-family: Arial, sans-serif;
    }

    form {
      margin: 50px auto;
      width: 400px;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    label {
      display: inline-block;
      width: 80px;
      text-align: right;
      margin-right: 10px;
      font-weight: bold;
    }

    input[type="text"],
    input[type="password"] {
      width: 200px;
      padding: 5px;
      margin-bottom: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }

    input[type="submit"] {
      display: block;
      width: 100%;
      padding: 10px;
      margin-top: 20px;
      background-color: #4caf50;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <form action="" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"><br>
    <label for="password">密&nbsp;&nbsp;&nbsp;码：</label>
    <input type="password" id="password" name="password"><br>
    <input type="submit" value="登&nbsp;&nbsp;&nbsp;录">
  </form>
</body>
</html>

代码中，我们使用了 CSS 属性来设置页面样式，包括背景颜色、字体、表单样式等。

步骤三：添加 JavaScript 功能
最后，我们可以使用 JavaScript 来添加一些交互功能，例如表单验证、记住密码等功能。代码如下：

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
  <style>
    /* 样式代码... */
  </style>
</head>
<body>
  <form action="" method="post" onsubmit="return validateForm()">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"><br>
    <label for="password">密&nbsp;&nbsp;&nbsp;码：</label>
    <input type="password" id="password" name="password"><br>
    <label><input type="checkbox" id="remember" name="remember">记住密码</label><br>
    <input type="submit" value="登&nbsp;&nbsp;&nbsp;录">
  </form>

  <script>
    function validateForm() {
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;

      if (username == "") {
        alert("请输入用户名");
        return false;
      }

      if (password == "") {
        alert("请输入密码");
        return false;
      }

      return true;
    }
  </script>
</body>
</html>

代码中，我们为表单添加了 onsubmit 属性，并定义了一个名为 validateForm() 的函数来验证表单是否正确填写。在函数中，我们获取了用户名和密码的值，并进行判断。如果其中有一个为空，则弹出提示框，并返回 false，否则返回 true。

以上就是制作登陆页面的基本步骤。当然，根据实际需求，我们还可以添加更多功能，例如记住密码、自动填充等。希望这篇文章能够对你有所帮助。

杨峥1111

关注

25
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
制作一个登录页面

代码中，我们为表单添加了 onsubmit 属性，并定义了一个名为 validateForm() 的函数来验证表单是否正确填写。在函数中，我们获取了用户名和密码的值，并进行判断。当然，根据实际需求，我们还可以添加更多功能，例如记住密码、自动填充等。最后，我们可以使用 JavaScript 来添加一些交互功能，例如表单验证、记住密码等功能。接下来，我们需要为页面添加样式。代码中，我们使用了 CSS 属性来设置页面样式，包括背景颜色、字体、表单样式等。代码中，我们使用了元素来创建表单，使用。
复制链接

扫一扫