如何制作一个简单的登录页面

最新推荐文章于 2025-03-11 11:28:52 发布

杀人鲸ORCA

最新推荐文章于 2025-03-11 11:28:52 发布

阅读量823

点赞数

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

本文链接：https://blog.csdn.net/qq_60597540/article/details/135127289

版权

本文详细介绍了如何通过HTML、CSS和JavaScript创建一个基础的登陆页面，包括表单元素、样式设置以及基本的JavaScript验证功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

步骤一：创建 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>