Dive Into HTML5:表单(续)

Email 地址

十多年来,web 表单仅提供了几种类型的表单域。其中用的最多的是:

表单域类型 HTML 代码 说明
复选框 <input type=”checkbox”> 可以选中或不选中
单选按钮 <input type=”radio”> 同其它单选按钮分组使用
密码输入框 <input type=”password”> 显示点而不是你输入的字符
下拉框 <select><option>
文件选择器 <input type=”file”> 弹出“打开文件”对话框
提交按钮 <input type=”submit”>
普通文本框 <input type=”text”> 可以省略 type 属性

所有这些输入类型都可以在 HTML5 使用。如果你想“升级到 HTML5”(或许可以通过改变 DOCTYPE),那么你根本不需要改变你的表单。这是完全兼容的!

但是,HTML5 定义了13个新的域类型。这是因为它们可以提供一种更好的语义,没有理由不尽早使用它们。

第一种新类型是 email 地址输入框。它看起来是这样的:

<form>
    <input type="email">
    <input type="submit" value="Go">
</form>

本来我想先说明一下对于不支持type="email"的浏览器该怎么做,但是这样并不好。为什么呢?因为我不知道该如何解释什么叫不支持type="email"的浏览器。所有的浏览器都“支持”type="email"。不过,它们可能不会对此有什么特别的反应。不能识别type="email"的浏览器仅仅将其当做type="text",将其渲染成一个普通的文本输入框。

你可以想象这有多么重要。web 有几百万的表单要求你输入 email 地址,它们都使用的是<input type="text">。你会看到一个输入框,然后输入你的 email 地址就完事了。而 HTML5 则定义了type="email"。浏览器会对此不知所措吗?不会。现在所有的浏览器都会将一个不认识的 type 属性当做type="text"——甚至IE6。所以你可以放心地将 web 表单“升级”为使用type="email"

如果浏览器支持type="email",会发生什么呢?这意味着很多事。HTML5 标准并没有指定新的输入类型的任何特殊的用户界面。很多桌面浏览器,比如 Safari、Chrome、Opera 和 Firefox 简单地将其渲染成一个文本框——就像type="text"一样——因此用户不会注意到有任何不同(直到他们提交表单)。

下面看看 iPhone 上的表现。

iPhone 没有物理键盘。所有“输入”都需要通过屏幕上出现的一个虚拟键盘完成。这个键盘将在特定的时刻出现,比如你把焦点放在 web 页面的输入框上。Apple 让 iPhone 的 web 浏览器很聪明。它能够识别出多个 HTML5 的新增输入类型,并且能够根据特定的输入类型动态改变键盘

例如,email 地址就是文本,对不对?当然,但是它是一种特殊的文本。比如,显然所有 email 地址都有 @ 符号,并且至少一个点(.),并且不允许包含空格。所以,在你使用 iPhone 并焦点在<input type="email">元素时,你会看到一个虚拟键盘,包含比普通键盘少一些按键,比如没有空格,并且增加了 @ 和 . 字符。

自己测试一下试试吧!

总结:马上将所有 email 表单域转换到type="email"没有任何后顾之忧。没有人甚至会注意到这一点,除了 iPhone 用户,并且他们可能也根本不会注意。但是,凡是注意到这一点的人们都会笑笑,并且感谢你改进了他们的用户体验。

Web 地址

Web 地址——也就是 URL,有些人也会叫做 URI——是另一种特殊的文本。web 地址的语法由 Internet 标准决定。如果有人要求你输入一个 web 地址,他们可能期望的是 “http://www.google.com/”,而不是 “125 Farwood Road”这种。斜杠很常见,比如 Google 的主页就有三个斜杠。点号也很常见,但是不允许空格。每一个 web 地址都有一个域名后缀,比如 “.com” 或者 “.org”。

在 iPhone 上面点击<input type="url">空间,其键盘是这样的:

自己测试一下 type=”url”

iPhone 改变了其虚拟键盘,就像 email 地址一样,但这次是专为 web 地址优化的。空格键被三个键取代:点号、斜杠和 “.com” 按钮。(你可以长时间按住 .com 按钮,iPhone 会自动切换到另外的通用后缀,比如 .org 或者 .net)

很多现代桌面浏览器会将type="url"渲染成一个普通的文本框,因此用户直到提交时才会注意到这一点。不支持 HTML5 的浏览器则将type="url"当做type="text"处理,因此将所有用于输入 web 地址的表单域使用type="url"也没有任何不妥。

使用 Spinbox 输入数字

下一步:数字。对于数字输入的需求要远大于 email 或者 web 地址。首先,数字要比你想象的复杂得多。例如,选择一个数字。-1?不不不,我是说一个介于 1 和 10 的数字。7½?不不不,不能是分数。PI?现在你就要疯了。

我的观点是,你所需要的“不仅仅是一个数字”。你所需要的是一个在特定范围内的数字。并且你需要的是在这个范围内的特定类型的数字——可能是整数,不能是分数或者小数,或者是某些能被 10 整除的数。HTML5 就可以帮助你达到这一目的。

<input type="number"
       min="0"
       max="10"
       step="2"
       value="6">

我们每次解释一个属性:

  • type="number"意味着这是一个数字输入域;
  • min="0"指定这个域接受的最小值;
  • max="10"指定可接受的最大值;
  • step="2"同最小值一起使用,定义可接受的数字范围:0,2,4,等等,直到最大值;
  • value="6"是默认值。它看起来很熟悉。这与你指定表单域的特定值的属性名是一样的。(我提到这一点目的是说明 HTML5 与前一版本的 HTML 是一致的,你不需要改变你以前的代码。)

这是数字控件的标记代码。注意,所有这些属性都是可选的。如果你有最小值但是没有最大值,你可以仅仅指定最小值,而不指定最大值。默认 step 是 1,如果你不需要使用另外的 step 值,就可以忽略这个属性。如果没有默认值,value属性可以是空字符串,或者简单的忽略掉。

测试一下你的浏览器是不是支持!

然而,HTML5 做得比这还要多。为了编程控制,你也可以使用 JavaScript 进行改变:

  • input.stepUp(n)增加 n 个表单域的值;
  • input.stepDown(n)减少 n 个表单域的值;
  • input.valueAsNumber使用浮点数返回当前值(input.value始终返回string

数字控件的显示取决于浏览器的实现。在 iPhone 上,浏览器还会为数字输入优化键盘:

Opera 的桌面版本,type=”number” 则被渲染成一个 “spinbox” 控件,具有一个向上和向下的箭头,允许你通过点击箭头改变值。

Opera 能够识别 min、max 和 step 属性,所以你会一直到达可接受的最大值。如果你已经到到达最大值,向上的箭头将会变灰。

就像我们先前讨论过的那样,不支持type="number"的浏览器还是会将其作为type="text"处理。默认值将会出现在表单域中(因为它在 value 中存储),其他属性值,比如 min 和 max 则被忽略。你可以自己实现这一功能,或者使用某种提供了 spinbox 组件的 JavaScript 框架。不过,在此之前还是要检测是不是有 HTML5 的支持,例如:

if (!Modernizr.inputtypes.number) {
    // no native support for type=number fields
    // maybe try Dojo or some other JavaScript framework
}

使用 Slider 输入数字

Spinbox 并不是表现数字的唯一控件。你应该也见到过 slider 组件:


Chrome 将type=range渲染成一个 slider 组件。

现在自己测试一下你的浏览器是不是支持type="range" 吧!

现在,你可以在 web 表单中使用 slider 组件了。它的用法同 spinbox 类似:

<input type="range"
       min="0"
       max="10"
       step="2"
       value="6">

所有属性同type="number"都是一样的——min、max、step、value。唯一区别在于二者用户界面不同。浏览器会将type="range"渲染成一个 slider 组件,而不是输入框。Safari、Chrome 和 Opera 都是这么做的。(令人悲哀的是,iPhone 仅仅将其作为一个文本框渲染出来,甚至没有提供特殊优化的虚拟键盘。)不支持这一书用的浏览器会将其作为type="text"进行渲染。

Leave a Reply