web前端登录界面代码是什么 • Worktile社区

worktile

Worktile官方账号

Web前端登录界面的代码一般由HTML、CSS和JavaScript组成。下面是一个简单的示例：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>登录界面</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <h1>登录</h1>
        <form>
            <div class="form-group">
                <label for="username">用户名：</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">密码：</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">登录</button>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS代码（style.css）：

.container {
    width: 300px;
    margin: auto;
    padding: 20px;
    background: #f2f2f2;
    border: 1px solid #ccc;
}

.container h1 {
    text-align: center;
}

.form-group {
    margin-bottom: 10px;
}

label {
    display: block;
}

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
}

button {
    width: 100%;
    padding: 10px;
    background: #4caf50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background: #45a049;
}

JavaScript代码（script.js）：

document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault();  // 阻止表单提交
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    
    // 进行登录验证
    if (username === 'admin' && password === '123456') {
        alert('登录成功！');
    } else {
        alert('用户名或密码错误！');
    }
});

上述代码实现了一个简单的登录界面，用户输入用户名和密码后，点击登录按钮进行验证，如果用户名和密码正确，则弹出登录成功的提示，否则弹出用户名或密码错误的提示。注意，代码中的样式可以根据需要进行修改和美化。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Web前端登录界面代码可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>登录界面</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="login-container">
    <h2>用户登录</h2>
    <form id="login-form">
      <input type="text" id="username" placeholder="用户名" required>
      <input type="password" id="password" placeholder="密码" required>
      <button type="submit">登录</button>
    </form>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS代码（style.css）：

.login-container {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

h2 {
  text-align: center;
}

form input[type="text"],
form input[type="password"] {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
}

form button {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
}

form button:hover {
  background-color: #45a049;
}

JavaScript代码（script.js）：

document.getElementById("login-form").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单提交

  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  // 在这里进行登录验证逻辑
  if (username === "admin" && password === "admin") {
    alert("登录成功");
    // 登录成功后的操作
  } else {
    alert("用户名或密码错误");
  }
});

以上代码实现了一个简单的登录界面，包含一个用户名输入框、一个密码输入框和一个登录按钮。当用户点击登录按钮时，JavaScript代码会获取输入框中的用户名和密码，并进行简单的登录验证。如果用户名和密码匹配，弹出登录成功的提示，否则弹出错误提示。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Web前端登录界面的代码主要包括HTML、CSS和JavaScript三个部分。下面以一个简单的登录界面为例进行讲解。

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>Login</h2>
        <form id="login-form">
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <button type="submit">Login</button>
            </div>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（style.css）：

.container {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f8f8f8;
}

h2 {
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}

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

button[type="submit"] {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
}

JavaScript部分（script.js）：

document.getElementById("login-form").addEventListener("submit", function(event){
    event.preventDefault(); // 阻止表单默认提交动作

    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    // 进行登录验证
    if(username === "admin" && password === "password"){
        alert("Login successful!");
        // 登录成功后跳转到其他页面
        window.location.href = "home.html";
    }else{
        alert("Username or password is incorrect!");
    }
});

以上是一个简单的登录界面的代码示例，通过HTML创建了登录表单，CSS设置了样式，JavaScript添加了表单提交事件处理函数，进行登录验证。用户输入正确的用户名和密码后，会弹出"Login successful!"的提示并跳转到其他页面，否则会弹出"Username or password is incorrect!"的提示。

1年前 0条评论