表单提示文字跳动效果

2023-09-06 02:43:56

当我们在设置表单时，一般都要设置一些提示文字搭配输入框来告知用户这里输入什么内容，此时根据提示文字的位置，我们一般有三种设计方案：

提示文字在输入框上面：这是最常见的设计方案，当输入框为空时，提示文字显示在输入框的上方，用户输入内容时，提示文字消失。
提示文字在输入框内部：这种设计方案比较少见，当输入框为空时，提示文字显示在输入框的内部，用户输入内容时，提示文字逐渐淡出。
提示文字在输入框下面：这种设计方案比较少见，当输入框为空时，提示文字显示在输入框的下面，用户输入内容时，提示文字消失。

这三种设计方案各有各的优缺点，第一种设计方案最常见，用户习惯也最好，缺点是提示文字可能会挡住输入框的内容；第二种设计方案比较少见，用户习惯可能不太好，优点是提示文字不会挡住输入框的内容；第三种设计方案比较少见，用户习惯可能不太好，优点是提示文字不会挡住输入框的内容，而且当输入框获得焦点时，提示文字会逐渐淡出，不会影响用户输入内容。

如何使用CSS和HTML实现表单提示文字跳动效果？

<!DOCTYPE html>
<html>
<head>
  
  <style>
    input[type="text"] {
      width: 200px;
      height: 30px;
      padding: 5px;
      border: 1px solid #ccc;
    }

    .placeholder {
      position: absolute;
      top: 5px;
      left: 5px;
      color: #999;
      transition: all 0.2s ease-in-out;
    }

    input[type="text"]:focus + .placeholder {
      transform: translateY(-20px);
      font-size: 12px;
    }
  </style>
</head>
<body>
  <form action="#">
    <label for="username">用户名：</label>
    <input type="text" id="username" placeholder="请输入用户名">

    <label for="password">密码：</label>
    <input type="password" id="password" placeholder="请输入密码">

    <input type="submit" value="登录">
  </form>
</body>
</html>