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/
html5中表单属性值_如何在HTML表单中使用Autocompletetype属性相关推荐
- html表单action属性值,HTML中的form表单中的action属性
用户提问 在一本书中,在一个处理用户注册的html里,作者把action的值设为"regist.jsp",如下: function on_submit() { if (form1. ...
- java 反射父类私有属性值_如何在Java中通过反射访问父类的父类的私有字段? - java...
在一个API中,我使用的是一个抽象类(A类),该类具有一个私有字段(A.privateField). B类在API中扩展了A类. 我需要扩展B类的实现,即C类,但是我需要A类的privateField ...
- 前端:HTML5/36/HTML5简介,文档类型定义,网页字符集,页面结构标记,文章相关的标记,其它标记,音频标记,视频标记,表单中新增的属性,表单input元素type属性的值
HTML5简介 HTML5是新一代的HTML: HTML5目前主要应用在手机端,在PC端最新浏览器已经开始支持了,但还不全面: HTML5是由W3C和WHATWG合作的结果: W3C是万维网联盟,主要 ...
- Java反射设置list的属性值_利用java反射比较两个实体有哪些属性值不一样
分享一个利用反射实现比较两个实体属性值的方法: package net.zwq1105.test; import java.beans.Introspector; import java.beans. ...
- html中表单元素中的单选框,Html表单元素及表单元素详解
大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素--文本框 5.表单元素button 6.表单元素--单选.多选 7.表单元素--select 8.表单元素--textarea ...
- 如何在ONLYOFFICE表单中分配接收者角色
如何在ONLYOFFICE表单中分配接收者角色 在以前的老的版本的ONLYOFFICE表单设计.填写过程中,我们会经常遇到需要俩个人或者多个人共同填写一份表单的情况,在一份表单中明确区分出不同的人需要 ...
- form表单中的enctype属性
form表单中的enctype属性 enctype就是encodetype就是编码类型的意思. multipart/form-data是指表单数据中由多部分构成,既有文本数据,又有文件等二进制数据 ...
- php中enctype属性,PHP_关于form表单中Enctype属性的用法,关于Form表单中Enctype属性的用 - phpStudy...
关于form表单中Enctype属性的用法 关于Form表单中Enctype属性的用法: form表单中的Enctype属性指定将数据发回到服务器时浏览器使用的编码类型. 下面是它的取值说明: mul ...
- form表单中的action属性
form表单中的action属性的值是表单提交给的url,如果我们没有设置action属性,那么默认的表单还是提交给当前页面 <form action = "register" ...
最新文章
- Python程序设计 第六章 函数(续
- 四则运算 - java实现(叶尚文, 张鸿)
- [Javascript] Deep Search nested tag element in DOM tree
- 【Matlab】你想知道在图表标题中显示变量的一切
- 搞科研、学术的朋友注意了,停下手头的活,再忙也要看一下这个!
- python每秒20个请求_使用Python每秒百万个请求
- Anaconda 镜像源操作(查看配置删除)
- idea创建java项目目录结构_用IDEA创建一个简单的Maven的JavaWeb项目
- jmu-python-函数-找钱_python函数题 - osc_wv1mxwu2的个人空间 - OSCHINA - 中文开源技术交流社区...
- 用turtle库画五角星
- Composition or inheritance for delegating page methods?
- exchange 2010部署之一
- 【截屏篇】系统PrtSc
- 广告管理系统的UML分析与设计
- git mertool使用kdiff3解决冲突合并
- Markdown 简单美化
- java aspose 给Word添加水印
- lambda在python中的意思_Python中lambda x:x0 是什么意思?
- py-kms激活VOL
- 单片机入门学习笔记6:新唐单片机N76E003
热门文章
- 5G系统——MICO模式
- KINOVA公司JACO2、MICO2从安装到开发
- python查文献_自从用了Python,轻松查文献,释放80%的重复劳动时间
- Linux系统下的文件传输
- mySQL 2502 2503错误
- apache atlas 官方安装
- 通用 OCR API 接口
- 用Java/Python/PHP/C#/C++各大城市招聘状况分析
- 决策树与R语言(RPART)
- 高斯滤波器(Gaussian Filter) python实现及部分原理说明(opencv)