当前位置: 首页 > 设计 > 正文
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
  • 2018新商业企业发展论坛 2018-11-15
  • 弥渡 万亩梨花如云似瀑 春城壹网 七彩云南 一网天下 2018-11-15
  • 这是房产私有化的结果,如果没有房产私有化,人们就不会买房、炒房,从而也就不会产生目前诸多房地产乱象。 2018-10-25
  • 进度紧追中国航母!英第二艘女王级完工 2018-10-21
  • 福音!全球首例3D打印眼角膜 数百万盲人重获光明不再遥不可及 2018-10-21
  • 开训即开战!新疆万名官兵练兵备战 场面震撼! 2018-10-20
  • 阿什库勒火山群文章中国国家地理网 2018-10-03
  • 我的·时尚家——爱依瑞斯2018品牌新思维暨新品发布会成功举办 2018-10-03
  • 目前的缓和,是美国中期选举特郎普需要外交得分。 2018-09-25
  • 不拍戏改学艺,张国立是这样想的 2018-09-25
  • 新闻漫评——最贵学区房 春城壹网 七彩云南 一网天下 2018-09-23
  • 解析汽车空调异味漏氟根源 维护需注意这些方面 2018-09-22
  • 为975万高考生加油,这支满分舞燃爆校园! 2018-09-20
  • 他帖子里的明理,就是要人们放弃自己的利益,一切顺从别人的指挥棒转 2018-09-20
  • 乡亲们幸福,我也感到幸福 2018-09-16
  • 459| 780| 99| 762| 209| 759| 344| 864| 163| 410|