全天秒速赛车计划:威言威语

我愿像茶一样,把苦涩留在心里,敬发出来的都是清香!
威言威语
当前位置: 首页 > 设计 > 正文

网页HTML5表单特性与使用技巧

秒速赛车时间 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
    地板

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

    2016-05-02 12:08 回复
  2. avatar
    板凳

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

    2016-04-22 14:13 回复
  3. avatar
    沙发

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

    2016-03-30 17:36 回复

发表评论

avatar

电子邮件地址不会被公开。 必填项已用 * 标注

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

快捷键:Ctrl+Enter

  • 中国社会科学院在京召开研讨会 探讨“三大史诗”在新时代的传承与发展 2019-06-16
  • 从稳中向好发展态势看我国经济良好前景 2019-06-16
  • 北京天安门广场更换花卉 2019-06-12
  • 除了杨崇勇,“2亿元贪官俱乐部”至少还有这些人 2019-06-11
  • 习近平:真抓实干埋头苦干万众一心 夺取脱贫攻坚战全面胜利 2019-06-11
  • 为社会奉献爱心 用青春书写梦想 2019-06-09
  • 重磅福利来袭,汽车之家盛大开启618品质购车节 2019-06-09
  • 相思湖边包鱼粽 孝心满满全家欢 2019-06-03
  • 高清:里约奥运会官方海报在当地博物馆展出 2019-06-03
  • 尧都农商银行全力推进服务“三农”工作 2019-05-20
  • 【理上网来】以创新为基点,是“过坎”的关键 2019-05-18
  • 台湾学者黄一农:书院不是“盘”下名号来挣钱的 2019-05-15
  • 靠啥为基层留住人才?( 民生视线·引导人才流动 助力均衡发展①) 2019-05-15
  • 结构优 动能足 中国经济继续保持高质量发展 2019-05-15
  • 内蒙古伊利实业集团股份有限公司获第十二届人民企业社会责任奖年度企业奖 2019-05-13
  • 236| 969| 297| 837| 518| 865| 681| 487| 834| 508|