如何使用 HTML 和 CSS 向图像添加登录表单？

如果您的网站需要用户注册或登录，您可能需要使用 HTML 和 CSS 向您的网站添加登录表单。在本文中，我们将向您介绍如何使用这两种语言在图像上添加登录表单。

创建一个基本的 HTML 登录表单

首先，让我们创建一个基本的 HTML 登录表单。它将包括用户名和密码字段以及一个提交按钮。请注意，此处的代码是最基本的表单。你可以随心所欲地将其修改得更漂亮。

<form>
  <label for="username">Username</label>
  <input type="text" id="username" name="username">

  <label for="password">Password</label>
  <input type="password" id="password" name="password">

  <input type="submit" value="Submit">
</form>

此代码将创建一个类似于下面这样的表单：

创建一个简单的 CSS 样式

现在，我们还需要使用 CSS 样式为这些表单元素添加样式。在这种情况下，我们将创建一个简单的样式表，以使表单看起来更漂亮。

form {
  width: 400px;
  background: white;
  padding: 40px;
  border-radius: 10px;
  margin: 100px auto;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
}

label, input[type="text"], input[type="password"] {
  display: block;
  margin-bottom: 20px;
  font-family: sans-serif;
  font-size: 16px;
}

input[type="submit"] {
  background: #4CAF50;
  border: none;
  color: white;
  padding: 10px;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  font-family: sans-serif;
  font-size: 16px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background: #3E8E41;
}

代码说明

这些 CSS 规则做了什么？

• form：这些规则应用于包含表单的 <form> 元素。我们设置其 width、background、padding 和 border-radius，以使其看起来更美观。
• label, input[type="text"], input[type="password"]：这些规则应用于标签和两个输入字段。我们设置它们的 display 和 margin-bottom 属性，并指定字体类型和大小。
• input[type="submit"]：这些规则应用于提交按钮。我们设置背景、边框、颜色、填充、盒子阴影、边界半径、字体类型和大小，以及指定鼠标指针的样式。
• input[type="submit"]:hover：这些规则应用于鼠标悬停在提交按钮上时的效果。我们更改按钮的背景颜色。

把表单添加到图像上

现在，我们将表单添加到图像上。为此，我们需要创建一个 <div> 元素，内部包含我们的表单和一张图像。我们使用 CSS 将这些元素放置在同一位置。

<div class="container">
  <form>
    <label for="username">Username</label>
    <input type="text" id="username" name="username">

    <label for="password">Password</label>
    <input type="password" id="password" name="password">

    <input type="submit" value="Submit">
  </form>

  <img src="https://i.imgur.com/PJwKabA.jpg" alt="Login image">
</div>

.container {
  position: relative;
  display: inline-block;
}

.container img {
  width: 100%;
}

.container form {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
}

代码说明

这些 CSS 规则做了什么？

• .container：我们将 <form> 和 <img> 元素放在同一容器中。我们将其位置设置为 relative，以便在后面的步骤中让它们之一绝对定位。
• .container img：我们将图像调整大小，以使其填充容器。
• .container form：我们将表单绝对定位。我们将其 top 设置为 20%，使其垂直居中。我们将其 left 设置为 50%，以水平居中。最后，我们使用 transform 属性微调其位置。我们还设置其 padding、border-radius 和 box-shadow。

结论

到这里，我们就可以向图像添加登录表单了。作为一个程序员，您不仅需要编写代码，还需要美化界面，让用户体验更好。这篇文章介绍了如何使用 HTML 和 CSS 实现这个目标。如果您希望在你的网站上实现此功能，可以参考此文章，并进行修改和定制，确保您的网站更加独特和具有吸引力。