制作一个登录页面

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

步骤一:创建 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">   码:label>
    <input type="password" id="password" name="password"><br>
    <input type="submit" value="   ">
  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">   码:label>
    <input type="password" id="password" name="password"><br>
    <input type="submit" value="   ">
  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">   码:label>
    <input type="password" id="password" name="password"><br>
    <label><input type="checkbox" id="remember" name="remember">记住密码label><br>
    <input type="submit" value="   ">
  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。

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

你可能感兴趣的:(javascript,前端,开发语言)