Question

我偶然发现了HTML5结帐表单。

我开始更改它，我看到如果您输入错误的电子邮件地址，您将收到建议/提示。在查看代码之后，我还没有找到一个java脚本。但我注意到INPUT包含非标准属性。

要测试电子邮件的类型“foo”，请输入

作为

data-required

如果你分叉这个项目，你可以再检查一个功能：打开浏览器，给出正确的电子邮件，然后按Enter键：所以你得到下一个网址

...local.../index.html?email=mail%40test.de

为什么？怎么样？！

我知道数据 - 属性，数据仅适用于我，对于js ......但似乎它们具有可选功能。或者是Chrome，了解它是电子邮件，并提供提示？

我试图理解，但仍然不能。

谢谢！

Answer 1

秘密不是data-required - 秘密是type="email"。这就是导致提示发生的原因。

它的Chrome不是javascript。您可以在大多数浏览器中尝试它，它会做类似的事情。

<form>
  <input type="email" placeholder="Try entering an invalid email">
  <button>Go</button>
</form>

注意type="email"。这告诉谷歌浏览器输入应该是一个电子邮件地址，当您提交时，它会自动告诉您电子邮件地址是否无效。

其他类型包括type="number"，type="date"等