如何使用普通的HTML和CSS建立一个带有浮动标签和过渡的注册表格

迪鲁宾
450 阅读7分钟

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

A视图

正如你在上图中看到的，当表单中的一个输入获得焦点时，它的标签就会浮到顶部，并且在输入周围出现一个半厚的边框。如果文本被输入到输入框中，而输入框失去了焦点，标签就会保持在顶部。否则，标签就会回落到输入框中。

许多现代窗体都有某种应用于它们的过渡。这些过渡不仅使表单更有活力，而且还有助于引导用户了解输入的状态（即它是否有焦点），以及每个输入应该处理什么样的数据。

在本教程中，你将了解到一些很酷的CSS特性，如过渡、选择器（如:placeholder_focus ）以及其他许多你应该知道的CSS属性。

让我们开始学习吧!

HTML标记

我们将为我们的注册表单定义标记。但在此之前，我们必须设置我们的HTML模板，并从head 标签正确链接到我们的样式表。你可以通过Emmet插件，在你的IDE/代码编辑器中输入! ，然后输入tab，就可以轻松做到这一点。

你也可以复制这个模板并将其粘贴到你的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内。标签的作用是告诉用户每个输入应该输入什么信息。

我们的页面将看起来像这样:

四个输入和四个标签的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;
}

设置基本样式

下面是我们的页面的样子:

还没有任何样式设计

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

在我们的例子中，容器内只有一个子元素signupFrm 。我们在这里使用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%。

这就是我们的表单在网络浏览器中的呈现方式:

看起来更好

现在我们需要对我们的输入进行样式设计。

我们首先将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;
}

应用这些样式后，我们的表单现在应该是这样的:

占位符 "a "已不再可见

接下来，我们为文本标签设置样式:

/* 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秒的过渡。这是文本在悬停时向上移动所需的时间。

最后，我们还设置了一个0的Z-index。这个低的Z-index可以确保标签被定位在其他 "位置较高 "的元素后面，如果它们有重叠的话。

下面是在页面上呈现的内容:

结果

现在我们要把重点放在按钮上。

我们将用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);
}

下面是结果:

按钮放大并在被悬停时改变颜色

接下来，我们需要执行一些状态变化。

当一个输入获得焦点时，我们要把它的标签定位到容器的顶部（-7px）以外，从左边3个像素开始，把字体大小减少到14，并把颜色改为紫色：

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

下面是结果：

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

我们还需要在输入获得焦点时在其周围添加一个紫色边框：

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

添加紫色边框

最后，我们要做一件非常重要的事情。

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

标签和输入值之间的碰撞

通过下面的CSS，我们将指定，当我们在输入框中输入一个值并改变焦点时，我们希望标签保持浮动。另外，我们还指定要让标签文本失去其紫色的颜色：

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

就这样，这就是我们的注册页面的最终外观：

最后的外观

总结

我希望你能从本教程中学到一些关于CSS的新知识。CSS转换为你的网站带来了活力，在本指南中，我们用它使我们的表格更加生动。

你可以从这个GitHub资源库中获得本教程的所有代码。

我最近创建了一个通讯，在那里我提供了关于学习Web开发的实用技巧和资源。订阅我的时事通讯 ，就可以在你的收件箱中获得提示。

谢谢你的关注。

avatar
文章
阅读
粉丝