2.2 移动Web表单的input类型

2.2.1 search类型文本

使用下面的代码就可以创建一个search类型的<input>标签。

        <input type=”search” />

当value为空或没有这个属性时placeholder设置的内容才会被显示。

        <input type="search" placeholder="搜索…" autosave="www.w3c.org" result="8">

图2.2是search类型<input>标签显示的效果。

图2.2 Search类型<input>标签

2.2.2 email类型文本

用下面的代码就可以创建一个email类型的<input>标签。

        <input type="email" />

这样最简单地使用时，只是在输入的时候验证是否符合最简单的email格式，在设置默认值的时候依然用value属性。

        <input type=”email” value=”xx@qq.com” />

当value为空或没有这个属性时placeholder设置的内容才会被显示。

        <input type=”email”  value=”” placeholder=”请输入E-mail，如：xx@qq.com” />

图2.3是placeholder显示的效果，灰灰的字体颜色。这里需要注意的是placeholder默认的不是灰色，而是<input>标签的color样式设置的颜色60%透明度的效果，所以如果color不是默认的黑色而是red红色，那么placeholder显示的则是淡红色。

图2.3 placeholder在FireFox下的效果

作为一般的提示这是很有用的一个属性，另外还有一个设置光标的属性也非常有用，即autofocus。

        <input type="email" autofocus="autofocus"/>

当同时设置了placeholder和autofocus时，placeholder会被显示，光标也会在输入框中闪烁，即获得焦点。设置了value值时，光标会出现在第一个字符前面而不是在最后面。如果一个页面有多个<input>标签设置了autofocus，那么在不同浏览器下光标的位置是不同的，比如Firefox会将光标定位在第一个设置元素上，而Chrome则定位在最后一个设置元素上。

email一般作为重要资料通常是必填项目，这时required属性就派上用场了。required属性会告诉表单在提交时检查元素是否填写。

        <input type="email" required="required"/>

除了必填以外，有时还需要更加复杂的验证，比如email的格式和长度，甚至仅限某个域名等，这时就要使用pattern属性了。

        <input type="email" pattern=".+z3f\.me$"/>

上面的代码用pattern属性限制只能用z3f.me结尾的email地址。pattern实质就是执行正则表达式。

2.2.3 number类型文本

Chrome支持的number类型文本的效果如图2.4所示。

图2.4 number类型<input>标签

number类型有几个专有的属性，如表2-3所示。

表2-3 number类型特有属性及其描述

同其他<input>标签一样，使用number类型也是非常简单的。

        <input type="number" value="50" min="10" step="5" max="100"/>

上面的代码设置了一个初始值为50、每次增减为5、最大不超过100、最小不低于10的number类型文本。

2.2.4 range类型文本

使用下面的代码就可以创建一个range类型的<input>标签。

        <input type=”range” />

range类型<input>标签通常包括“min”和“max”两个属性，分别用于设定区间的最小和最大值，具体如下：

        <input type="range" name="points" min="1" max="10" />

图2.5是range类型<input>标签显示的效果。

图2.5 range类型<input>标签

2.2.5 tel类型文本

使用下面的代码就可以创建一个tel类型的<input>标签。

        <input type=”tel” />

tel类型通常用于定义电话格式的<input>标签，具体如下：

        Mobile: <input type="tel" name="user_mobile" />

图2.6是tel类型<input>标签显示的效果。

图2.6 tel类型<input>标签

2.2.6 url类型文本

使用url类型的<input>标签和使用email类型差不多。

        <input type=”url” />

同样支持email类型的属性。只是url类型的基本验证需要有protocol协议头，比如http:、file:、ftp：等。

不同的浏览器对验证的执行效果和提示效果不一样，比如图2.7, Firefox会在失去焦点时描红边框提示，而Chrome则没有类似的行为，只在提交时提示。

图2.7 浏览器在提示时的不同策略

每家浏览器的提示风格也不相同，如图2.8所示。

图2.8 浏览器不同的提示效果