设计一个网页登录界面，点击登录链接到一个新地址

我写代码菜如坤

已于 2024-07-22 11:58:54 修改

阅读量444

点赞数 1

文章标签： eclipse java javascript

于 2024-07-22 11:57:02 首次发布

本文链接：https://blog.csdn.net/sunyao1314/article/details/140606007

版权

更新 action 属性：将 <form> 标签中的 action 属性设置为 http:/192.168.1.200:8030。
确保使用正确的协议：为了使表单能够提交到服务器，请确保使用 http:// 或 https:// 协议（如果服务器支持 HTTPS）。

以下是 HTML 示例：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录界面</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }

  .login-form {
    width: 300px;
    padding: 40px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
  }

  h1 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
  }

  form {
    margin-bottom: 10px;
  }

  input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 2px solid #ddd;
    border-radius: 5px;
  }

  input[type="submit"] {
    width: 100%;
    padding: 10px;
    margin-top: 20px;
    background-color: #4CAF50;
    border: none;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    cursor: pointer;
  }

  input[type="submit"]:hover {
    background-color: #45a049;
  }

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

  .error-message {
    color: red;
    font-size: 0.9em;
  }
</style>
</head>
<body>

<div class="login-form">
  <h1>登录</h1>
  <form id="loginForm" action="http://192.168.1.88:8031" method="post">
    <label for="username">用户名:</label><br>
    <input type="text" id="username" name="username" required><br>
    <label for="password">密码:</label><br>
    <input type="password" id="password" name="password" required><br>
    <div id="error-message" class="error-message"></div>
    <input type="submit" value="登录">
  </form>
</div>

<script>
  document.getElementById('loginForm').addEventListener('submit', function(event) {
    // 清除之前的错误信息
    document.getElementById('error-message').textContent = '';

    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    var errorMessage = '';

    // 简单验证用户名和密码
    if (username.trim() === '') {
      errorMessage += '用户名不能为空。<br>';
    }
    if (password.trim() === '') {
      errorMessage += '密码不能为空。<br>';
    }

    if (errorMessage !== '') {
      // 如果有错误，显示错误信息并阻止表单提交
      document.getElementById('error-message').innerHTML = errorMessage;
      event.preventDefault();
    }
  });
</script>

</body>
</html>

说明

action="http://192.168.1.200:8030"：这个属性指定了表单提交的目标 URL，即你的服务器地址。你需要确保这个 URL 是有效的，并且服务器能够接受 POST 请求。
method="post"：这个属性指定了表单数据提交的方式。post 方法通常用于提交表单数据。
JavaScript 验证：在 submit 事件处理函数中，我们简单验证了输入。如果表单验证不通过，我们阻止表单提交并显示错误信息。