随着移动设备的普及，越来越多的用户通过手机和平板电脑访问网站。为了提供更好的用户体验，我们需要确保我们的网站在不同设备上都能良好地展示。本文将介绍如何制作一个响应式的登录表单样式，以适应不同屏幕尺寸的设备。

文章目录

HTML 结构

首先，让我们来定义登录表单的 HTML 结构。我们将使用 <form> 元素作为整个表单的容器，并在其中放置用户名和密码的输入框，以及登录按钮。

<form class="login-form">
  <input type="text" placeholder="用户名">
  <input type="password" placeholder="密码">
  <button type="submit">登录</button>
</form>

CSS 样式

接下来，我们将使用 CSS 来美化我们的登录表单。我们将使用 Flexbox 布局来实现简单的响应式设计。

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  margin: 0 auto;
}

.login-form input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

.login-form button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

@media screen and (max-width: 600px) {
  .login-form {
    width: 90%;
  }
}

在上面的代码中，我们使用了 flex-direction: column 将输入框和按钮垂直排列，并使用 align-items: center 和 justify-content: center 将它们居中对齐。我们还设置了输入框和按钮的宽度为100%，并添加了一些样式来增强可读性和可点击性。

在 @media 查询中，我们使用 max-width: 600px 来定义在屏幕宽度小于等于 600 像素时的样式。在这种情况下，我们将表单的宽度调整为 90%。

JavaScript 交互

最后，我们可以添加一些 JavaScript 代码来增强登录表单的交互性。例如，我们可以在用户点击登录按钮时验证输入是否有效。

const form = document.querySelector('.login-form');
const usernameInput = form.querySelector('input[type="text"]');
const passwordInput = form.querySelector('input[type="password"]');

form.addEventListener('submit', function(event) {
  event.preventDefault();

  const username = usernameInput.value;
  const password = passwordInput.value;

  if (username === '' || password === '') {
    alert('请输入用户名和密码');
  } else {
    // 执行登录操作
    // ...
  }
});

在上面的代码中，我们首先获取表单元素以及用户名和密码输入框的引用。然后，我们添加了一个事件监听器来捕获表单的提交事件。在事件处理程序中，我们获取输入框的值，并进行简单的验证。如果用户名或密码为空，我们将显示一个警告框。否则，我们可以执行登录操作，例如向服务器发送请求。

结论

通过使用 HTML、CSS 和 JavaScript，我们可以制作出一个响应式的登录表单样式，以适应不同屏幕尺寸的设备。我们使用了 Flexbox 布局来实现简单的响应式设计，并添加了一些交互性来提升用户体验。你可以根据自己的需求进一步定制和扩展这个登录表单。

希望本文对你有所帮助！如有任何问题，请随时提问。

© 版权声明
分享是一种美德，转载请保留原链接
CSS 响应式设计 JavaScript HTML 登录表单