当前位置: 首页 > 设计 > 正文
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
  • 21岁女子沙井村帮男友取"包裹" 没想到刚拿到手就被抓了男友包裹-西安新闻 2019-03-16
  • 抗战期间,毛泽东三次为儿童节题词 2019-03-15
  • 挑剔出了名的莱佛士新酒店选址波兰 只为了致敬艺术复兴? 2019-03-06
  • 昨天中国元首才接见了美国国务卿,说中美合作将造福于两国人民和世界人民。风雨同舟,靠不住啊。 2019-02-22
  • 高清:阿根廷冰岛之战一触即发 斯巴达克球场外球迷聚集 2019-02-22
  • 新华时评:磋商,不等于反复折腾 2019-02-16
  • 藏医保健常识:保肝护肝有讲究 2019-02-11
  • 世界杯期间严查酒驾毒驾 江西警察前天又抓了167人 2019-02-11
  • 我指的是支持楼主允许企业和灵活就业及专家型科技工作者可以根据自己身体状况灵活选择退休年龄。 2019-02-10
  • 关于人类所有的知识问题,其实都是社会问题。就“社会”两个字。 2019-02-10
  • 深秋烟雾偎婺源文章中国国家地理网 2019-02-09
  • [微笑]也不用担心房价会崩盘,因为亏损太多,没人会卖,只有炒房的才会急于套现会有全社会占比较小的抛售…… 2019-02-09
  • 习近平为传统文化“代言” 2019-02-06
  • 【记城者2018 城市推动力】用城市力量建设大美陕西! 2019-02-06
  • 中国资本市场开放出大招 跨境证券投资更便利 2019-02-01
  • 307| 812| 557| 161| 615| 986| 131| 122| 349| 349|