html5中表单属性值_如何在HTML表单中使用Autocompletetype属性

大多数网站都具有用于各种目的的在线表单 -用户注册，接受订单，票务预订等。 但是，对于大多数用户而言，填写这些表格可能是一项繁琐且重复的任务，而事实上，他们可能会输入重复信息，例如姓名，电子邮件地址，街道地址，邮政编码和电话号码。

如果列表更长，则用户可能会完全放弃该表单。 为了尝试解决此问题，Google的团队提出了一个名为autocompletetype的新属性，以允许将答案自动填写到表单中。

自动完成属性？

自动填充并不是什么新鲜事物。 使用已经存在很久的属性autocomplete ，我们就能做到所有这些。 这两个属性autocomplete和autocompletetype主要用于同一件事。 唯一的不同是它们的设计。

指定autocomplete属性以启用（或禁用）表单中的自动填充功能。 鉴于autocompletetype属性是为Web开发人员设计的，因此他们可以分配标准数据类型，以帮助浏览器或应用程序更准确地填充表单。

如提案中所述：当前的自动填充产品主要依赖于上下文线索，例如name属性，input label和占位符文本，以确定应在表单元素中填充的内容（在某些情况下不可靠）。

AutocompleteType用法

在撰写本文时，此属性是通过以下方式指定的： x-autocompletetype ，并且它以在线形式接受常用信息的数据类型，例如： full-name ， street-address ， city ， postal-code ，和country-name 。

以下代码段显示了其实现的示例。

<form method="get" accept-charset="utf-8">
	<label for="namadepan">Nama Depan</label>
	<input id="namadepan" type="text" name="namadepan" value="" x-autocompletetype="given-name">
	<label for="namabelakang">Nama Belakang:</label>
  	<input type="text" name="namabelakang" value="" x-autocompletetype="family-name">
  	<label for="email">Email</label>
  	<input id="email" type="text" name="email" value="" x-autocompletetype="email">
  	<label for="telp">Telp.</label>
  	<input id="telp" type="text" name="telephone" value="" x-autocompletetype="tel">
  	<label for="fax">Fax</label>
  	<input id="fax" type="text" name="fax" value="" x-autocompletetype="fax">
</form>

注意，我在前两个表单元素中使用了本地语言。 这是自动完成类型非常有用的实例之一。 它为可能不理解我的本地语言的浏览器或应用程序提供了一个标准标签； 以便他们可以正确地自动填写表格。

最终思想

我们现在可以使用该属性吗？ 简而言之，是的，我们可以。 不支持该属性的浏览器或应用程序将简单地忽略它。 但是，已实现该功能的公司（例如Google Chrome）可以利用该优势并为我们的用户提供更好的体验。

但是，我唯一关心的是属性仍处于实验阶段，并且仍在讨论标准化问题。 因此，如Google Webmaster Central所述，将来的实现可能会发生一些变化：“像任何早期建议一样，我们希望随着Web标准社区提供反馈，这种情况会有所变化和发展。”

更多资源

关于autocompletetype属性，您可以继续阅读以下参考资料：

• 更快，更轻松，更智能地填写表格 –网​​站站长中央博客
• 我应该在我的Web表单上使用“ autocompletetype”属性吗？ – Google网站管理员帮助
• 关于HTML5规范中的autocompletetype属性的提案 – WHATWG
• 使用XHTML的自动完成属性和Web文档 – Mozilla Wiki

翻译自: https://www.hongkiat.com/blog/how-to-use-html-autocompletetype-attribute/