如何使用 HTML 和 CSS 构建带有浮动标签和过渡的注册表单

AirStar
778 阅读6分钟

「这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战」。

在本教程中，我们将使用纯 HTML 和 CSS 构建一个带有浮动标签和平滑过渡的现代注册表单。

ezgif.com-gif-maker--9--2.gif

如上图所示，当表单中的输入获得焦点时，其标签会浮动到顶部，并且输入周围会出现半粗边框。如果文本被输入到输入中并且输入失去焦点，则标签保持在顶部。否则，标签会回落到输入中。

许多现代形式都应用了某种过渡。这些转换不仅使表单更具动态性，而且还有助于引导用户了解输入的状态（即是否具有焦点）以及每个输入应处理的数据类型。

在本教程中，你将了解一些很酷的 CSS 功能，如过渡、选择器等:placeholder_focus，以及您应该了解的许多其他 CSS 属性。

HTML 标记

我们将为我们的注册表单定义标记。但在此之前，我们必须设置我们的 HTML 样板并从head标签正确链接到我们的样式表。通过在 IDE/代码编辑器中键入then 选项卡，您可以使用Emmet 插件轻松完成此操作。

你还可以复制此样板并将其粘贴到你的index.html文件中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

</body>
</html>

在 body 标签中，我们为我们的注册表单定义了标记：

<div class="signupFrm">
    <form action="" class="form">
      <h1 class="title">Sign up</h1>

      <div class="inputContainer">
        <input type="text" class="input" placeholder="a">
        <label for="" class="label">Email</label>
      </div>

      <div class="inputContainer">
        <input type="text" class="input" placeholder="a">
        <label for="" class="label">Username</label>
      </div>

      <div class="inputContainer">
        <input type="text" class="input" placeholder="a">
        <label for="" class="label">Password</label>
      </div>

      <div class="inputContainer">
        <input type="text" class="input" placeholder="a">
        <label for="" class="label">Confirm Password</label>
      </div>

      <input type="submit" class="submitBtn" value="Sign up">
    </form>
  </div>

我们创建一个容器div来保存表单元素。每个表单的输入，连同它的文本标签，都包裹在一个容器 div 中。标签的目的是告知用户每个输入应该包含哪些信息。

我们的页面将如下所示：

image.png 四个输入和四个标签的 HTML 表单

你可能会注意到我们分配给所有输入的占位符值是“a”。当我们开始应用一些动态逻辑时，这将在本教程的后面有所帮助。

如何设置表单样式

我们的表单非常基本，所以让我们添加一些样式让它看起来更漂亮。

首先，我们需要执行一些重置并设置背景颜色：

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

/* Get rid of all default margins/paddings. Set typeface */
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: white;
  font-family: "lato", sans-serif;
}

设置基础样式

这是我们的页面的样子：

image.png

设置好之后body，我们将内容的显示模式设置为flex。这可以确保容器元素内的所有直接子元素div默认并排显示。

在我们的例子中，容器内只有一个childrensignupFrm。display: flex我们在这里使用的唯一原因是使用align-items和justify-content属性来帮助将所有内容垂直和水平居中：

/* Puts the form in the center both horizontally and vertically. Sets its height to 100% of the viewport's height */

.signupFrm {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

该vh属性代表视口高度，可确保表单占据浏览器窗口高度的 100%，而不管屏幕大小或方向如何。这将使它更具响应性。

中间

我们的表格现在与中心对齐

现在我们将对表单进行一些样式设置：

.form {
  background-color: white;
  width: 400px;
  border-radius: 8px;
  padding: 20px 40px;
  box-shadow: 0 10px 25px rgba(92, 99, 105, .2);
}

.title {
  font-size: 50px;
  margin-bottom: 50px;
}

在针对表单的第一个样式中，我们将背景设置为白色，我们给它一个 400px 的宽度，我们在表单周围添加一些曲线，最后我们在盒子周围设置一个阴影。我们还设置了标题的字体大小和元素下方的一些空间。

结果应该是这样的：

有卡

表单现在位于卡片内，带有方框阴影

接下来，我们将设置div包含表单输入和表单标签的样式。

.inputContainer {
  position: relative;
  height: 45px;
  width: 90%;
  margin-bottom: 17px;
}

我们将输入容器的位置属性设置div为相对。这将使我们能够以我们想要input的方式定位孩子。label我们还将宽度设置为占整个容器宽度的 90%。

这就是我们的表单在 Web 浏览器中呈现的方式。

追加保证金

看起来更好

现在我们需要样式化我们的输入。

我们首先将 设置position为absolute。这将允许我们将它们中的每一个移动到相对定位的容器父级的左上角。

我们还需要隐藏我们的任意占位符文本（前面提到的“a”字符），这样它们就不会与每个标签中的文本重叠。当我们实现过渡时，将需要占位符文本：

/* Style the inputs */

.input {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border: 1px solid #DADCE0;
  border-radius: 7px;
  font-size: 16px;
  padding: 0 20px;
  outline: none;
  background: none;
  z-index: 1;
}

/* Hide the placeholder texts (a) */

::placeholder {
  color: transparent;
}

应用样式后，我们的表单现在应该如下所示：

image.png

接下来，我们设置文本标签的样式：

/* Styling text labels */

.label {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 0 4px;
  background-color: white;
  color: #DADCE0;
  font-size: 16px;
  transition: 0.5s;
  z-index: 0;
}

标签显示的文本说明输入中预期的信息。我们首先将其位置设置为绝对。通过设置top和left属性，我们可以将文本相对于其容器向上移动。

接下来我们设置 0.5 秒的过渡。这是将鼠标悬停在上面时文本向上移动所需的时间。

最后，我们还将 z-index 设置为 0。低 z-index 确保标签位于其他“位置较高”的元素（如果它们重叠）之后。

以下是在页面上呈现的内容：

标签-1

现在我们将重点放在按钮上。

我们将使用 CSStransform属性添加一些流畅的动画，它将按钮向上移动一点，并在鼠标悬停时改变颜色：

.submitBtn {
  display: block;
  margin-left: auto;
  padding: 15px 30px;
  border: none;
  background-color: purple;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 30px;
}

.submitBtn:hover {
  background-color: #9867C5;
  transform: translateY(-2px);
}

结果如下：

ezgif.com-gif-maker--6-

将鼠标悬停在按钮上时，按钮会放大并改变颜色

接下来，我们需要执行一些状态更改。

当输入获得焦点时，我们希望将其标签放置在容器顶部之外（-7px），距左侧 3 个像素，将 font-size 减小到 14，并将颜色更改为紫色：

.input:focus + .label {
  top: -7px;
  left: 3px;
  z-index: 10;
  font-size: 14px;
  font-weight: 600;
  color: purple;
}

结果如下：

ezgif.com-gif-maker--5-

当输入获得焦点时标签会上升

当输入获得焦点时，我们还需要在输入周围添加紫色边框。

.input:focus {
  border: 2px solid purple;
}

ezgif.com-gif-maker--7--3

添加了紫色边框

最后，我们必须做一些非常重要的事情。

目前，当你在表单中键入一些文本并将焦点（鼠标）移开时，标签文本和输入中的文本会发生冲突：

image.png

使用下面的 CSS，我们将指定，当我们在输入中键入一个值并更改焦点时，我们希望标签保持浮动。另外，请指定我们希望标签文本失去紫色：

.input:not(:placeholder-shown)+ .label {
  top: -7px;
  left: 3px;
  z-index: 10;
  font-size: 14px;
  font-weight: 600;
}

有了这个，这是我们注册页面的最终外观。

ezgif.com-gif-maker--9--1

总结

我希望你从本教程中学到了一些关于 CSS 的新东西。

你可以从此GitHub 存储库中获取本教程中的所有代码。

avatar
文章
阅读
粉丝