带有添加的内场顶部对齐标签的表单字段内的标签

Question

我希望更新我们的网站，并使用字段内的标签来结帐表单字段。我在各种博客上看过这个简单的想法有一些弊端，例如用户忘记了他/她在那个盒子里首先输入的内容。

所以我偶然发现了firebox.com checkout，它也使用了内场顶部对齐的标签，使上述问题无效。此外，在输入时，字段内有常规标签。

此想法/解决方案之前是否有过记录？如果已经有一个有效的例子，我宁愿不通过这个网站的源代码！

这是我想要做的截图，已经输入了一些字段以显示前后的结果。

Answer 1

Google Material设计是我认为您特别关注文本字段的一部分。 无需查看代码：

https://material.io/guidelines/components/text-fields.html#

您可以在此处查看所有可用选项：

https://getmdl.io/components/index.html#textfields-section

希望它有所帮助，

安德烈

Answer 2

您正在查看的是 Google's Material Design components 的示例。材料设计框架是AngularJS的一部分，但有多种CSS方法可以实现相同的效果。

Here 您可以找到手头任务的变体。

它使用通用标记：

<form>
  <h1>Material Design Text Input With No Extra Markup</h1>
  <input placeholder="Username" type="text" required="">
  <input placeholder="Password" type="password" required="">
  <button>Submit</button>
</form>