威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

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

在网页设计过程中经常会有一些容易被我们忽略的细节,大部分主流的浏览器会为我们提供一些形如自动完成、自动更正、自动大写、拼写检查、语音输入等人性化特性,但是并不是任何场景下我们都需要这些特性,比如对于电子邮件地址的输入,我们就不需要自动更正、自动大写、拼写检查等特性,而对于用户登录表单,为安全考虑则不希望自动完成的特性存在,今天要介绍的就是这些特性以及如何禁止这些特性的存在。
网页HTML5表单特性与使用技巧
目录
文章目录隐藏
  1. 1、自动完成(autocomplete)
  2. 2、自动更正(autocorrect)
  3. 3、自动大写(autocapitalize)
  4. 4、拼写检查(spellcheck)
  5. 5、语音输入(x-webkit-speech)

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

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 />

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

您可能还会对这些文章感兴趣!

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

  1. 林三
    地板
    林三:Google Chrome 50.0.2661.94 Windows 7

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

    2016-05-02 12:08 回复
  2. Erl
    板凳
    Erl:Google Chrome 49.0.2623.112 Windows 7

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

    2016-04-22 14:13 回复
  3. 谙年博客
    沙发
    谙年博客:Firefox 45.0 Windows 10

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

    2016-03-30 17:36 回复

发表评论

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

gravatar

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