当前位置: 首页 > 设计 > 正文
avatar

秒速赛车时间 www.2s1a.cn 在网页设计过程中经?;嵊幸恍┤菀妆晃颐呛雎缘南附?,大部分主流的浏览器会为我们提供一些形如自动完成、自动更正、自动大写、拼写检查、语音输入等人性化特性,但是并不是任何场景下我们都需要这些特性,比如对于电子邮件地址的输入,我们就不需要自动更正、自动大写、拼写检查等特性,而对于用户登录表单,为安全考虑则不希望自动完成的特性存在,今天要介绍的就是这些特性以及如何禁止这些特性的存在。

在网页设计过程中经?;嵊幸恍┤菀妆晃颐呛雎缘南附?,大部分主流的浏览器会为我们提供一些形如自动完成、自动更正、自动大写、拼写检查、语音输入等人性化特性,但是并不是任何场景下我们都需要这些特性,比如对于电子邮件地址的输入,我们就不需要自动更正、自动大写、拼写检查等特性,而对于用户登录表单,为安全考虑则不希望自动完成的特性存在,今天要介绍的就是这些特性以及如何禁止这些特性的存在。

1、自动完成(autocomplete)

大部分浏览器为了便于你下一次填写表单可能会有记忆功能或者又称为“自动完成”,形如下面的图示:

autocomplete自动完成

这里介绍的是控制自动完成特性的HTML属性autocomplete,通过设定该属性值为off表示自动完成特性关闭。

我们可以关闭特定表单元素的“自动完成”记忆特性:

<input type="text" autocomplete="off" />

如上设定之后,下次输入或者双击文本框就不会有下拉框提示了。为了方便起见我们甚至可以直接对整个form表单元素进行设置:

<form action="?" autocomplete="off">
...
</form>

这样表单中所有元素将不具备自动完成特性。

假如对于password密码框设定autocomplete则会让浏览器关闭用户保存密码的提示。

该特性至少支持的浏览器:Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 5).

2、自动更正(autocorrect)

该特性常见于移动设备浏览器网页开发中,比如在苹果设备iPhone的Safari进行表单输入时经?;嵊凶远匦缘拇嬖?,当然在打文章的时候这种特性可以大大降低文章的拼写错误,但是在一些特定场合,这种特性就会给我们带来麻烦。

autocorrect自动更正

关闭的方式依然是通过设定off属性值来完成。比如对文本框进行单独设置:

<input type="text" autocorrect="off" />

同样的我们也可以对全局表单元素form进行设置。

3、自动大写(autocapitalize)

苹果手机iphone表单设置选项

这个属性同样的应用于移动设备浏览器网页开发中,这个属性有个特殊的地方,也就是除了off外还有另外的取值:

当设置了autocapitalize=”words”,每个单词的开头字母会自动大写。
当设置了autocapitalize=”characters”,每个字母都会大写。
当设置了autocapitalize=”sentences”,每句开头字母会自动大写。

同样的这个属性可以应用于表单元素input或者是表单form:

<input type="text" autocapitalize="off" />
4、拼写检查(spellcheck)

该特性主要应用于提示可能的拼写错误,如果有拼写错误则以明显下划红线或者其他记号标出,如下图所示:

spellcheck拼写检查

但需要注意的是这个取值只有两个true或者false,不是on或者off,同样可以应用于表单元素input或者是表单form:

<input type="text" spellcheck="false" />

假如需要使用拼写检查的小技巧,只需要将spellcheck设置为true即可,可能有人要问了,这个拼写检查只能检查英文吗?这个可不一定,一般这是有lang属性决定的,比如:

<html lang="en">
<body>
  <textarea></textarea>
  <textarea lang="fr"></textarea>
  <div lang="ru">
    <textarea></textarea>
  </div>
</body>
</html>

第一个textarea的拼写检查受lang=”en”控制,以英语词汇进行检查,而第二个textarea的拼写检查受lang=”fr”控制,以法语词汇进行检查,而最后一个textarea受到lang=”ru”控制,以俄语词汇进行语法检查,当然前提是你的浏览器已经安装词汇字典,否则语法检查功能将会自动关闭。

5、语音输入(x-webkit-speech)

其实这个是Chrome的特有属性,貌似在新版本中已经被废止,如有表单元素包含此属性则元素旁会有语音输入的小话筒,点击即可语音输入。

x-webkit-speech语音输入

<input type="text" x-webkit-speech />

今天先介绍这么多,当然随着以后浏览器的发展肯定有越来越多的新特性被加入,合理运用这些新特性将会让我们网页设计前段在人性化和易用性上如虎添翼。

本文固定链接: //www.2s1a.cn/blog/html5-form-features-skills.html | 威言威语

网页HTML5表单特性与使用技巧:目前有3 条评论

  1. avatar
    地板
    林三 Google Chrome Windows

    这个html5是非常好用的,只是可惜我还不够精通,实战少了的说。

    2016-05-02 12:08 [回复]
  2. avatar
    板凳
    Erl Google Chrome Windows

    刚刚好,刚学完HTML5 input这一章

    2016-04-22 14:13 [回复]
  3. avatar
    沙发
    谙年博客 Mozilla Firefox Windows

    博主的文章很不错,希望多多交流

    2016-03-30 17:36 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter
  • 回复@老老保老张工:你屋里的生产资料不是交给有能力意愿和行动的人掌握而是平均分给每个家庭成员? 2019-01-21
  • 回复@寻找失落的真理:跟你的铁环玩去!咱真的没兴趣碾压你也。 2019-01-10
  • 天坛公园祈年殿前百余盆各色月季争奇斗艳 2019-01-10
  • 候选企业:中国石油呼和浩特石化公司 2018-12-30
  • 北京工业大学:突出‘京味’、体现‘京韵’,加快世界一流大学和一流学科建设 2018-12-30
  • 人民日报评论员:弘扬“上海精神” 破解时代难题 2018-12-15
  • 奋进新时代·2018全国两会特别报道 2018-12-15
  • 贪官的可恨之处,不在于他们的贪污、索贿、受贿、侵占国有资财,而在于他们相互勾结,打压、排挤积极认真为党、国家、民族、人民工作的好干部。向他们靠拢就被拉拢、腐蚀变 2018-12-04
  • 佛山成功孵化高校科技成果项目 2018-12-02
  • 在粪坑里优胜的是蛆虫,在不公正的社会里优胜的是蛀虫。 2018-12-02
  • 端午节小长假 南昌两站共发送旅客59万人 2018-11-26
  • 张涵予加盟《熟味3》跨国寻味 2018-11-26
  • 水煮 —频道 春城壹网 七彩云南 一网天下 2018-11-18
  • 2018新商业企业发展论坛 2018-11-15
  • 弥渡 万亩梨花如云似瀑 春城壹网 七彩云南 一网天下 2018-11-15
  • 647| 359| 264| 407| 723| 338| 871| 108| 352| 154|