text.html

 
<p class="zw">哪种网站或APP将由一两个表单构成？无论你喜不喜欢，如果网站中没有表单，那着实让人难以接受。HTML5引入十多个<code>input</code>类型和属性，这令实现复杂的控制和功能——如滑块、日期选择器和客户端验证——变得更加简单。这些元素包括<code>email</code>、<code>url</code>、<code>tel</code>和<code>search</code>。不要担心老旧的浏览器，因为当浏览器无法理解这些<code>input</code>类型的时候，会自动降级为文本框。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_105">电子邮件<code>email</code></h3> 
<p class="zw">很多场景下都需要填写电邮地址，比如联系人表单、评论表单、注册、登记表单等。选择<code>email</code>的<code>input</code>类型，来表述这些email地址。</p> 
<p class="zw">现在你可以使用各种各样的有趣的功能，比如检查电邮地址的有效性，以及是否包含@符号等。在一个<code>email</code>类型输入框中输入时，Safari会自动调出虚拟键盘，@符号很直观地出现在键盘下方。</p> 
<p class="图"><img alt="0702.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/52.jpg"></p> 
<p class="图题">我们已经习惯了使用软键盘处理手头工作，如左图所示，iPad键盘已经包含了一个可以便捷输入email的设置键。</p> 
<pre class="代码无行号"><code><input type="email"></code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_106">网址<code>url</code></h3> 
<p class="zw">当我们使用URL类型的输入框时——为了帮助用户专注和精准的输入网址地址——iOS软键盘会为此类型输入框提供斜杠/、句点以及.com这样的按键。</p> 
<pre class="代码无行号"><code><input type="url"></code></pre> 
<p class="图"><img alt="0703.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/53.jpg"></p> 
<p class="图题">提升网站表单的体验，有助于让人们愿意完成输入。当使用<code>url</code>时，iPhone的键盘会自动在下方调取出.com按钮。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_107">电话<code>tel</code></h3> 
<p class="zw">如果我们使用<code>tel</code>输入框，iOS会自动调出数字键盘。</p> 
<pre class="代码无行号"><code><input type="tel"></code></pre> 
<p class="图"><img alt="0704.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/54.jpg"></p> 
<p class="图题">iOS做了很多细致且卓越的工作，以使键盘输入更加便捷。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_108">搜索<code>search</code></h3> 
<p class="zw">如果网站内容太多，我们就得使用搜索框来找到所需的内容。刚好有一个输入框表单类型可以用于搜索。</p> 
<pre class="代码无行号"><code><input type="search"></code></pre> 
<p class="zw">在iOS系统的Safari浏览器上，<code>search</code>输入框的边角更加圆润；而在Mac OS X系统的Safari浏览器上（在别的桌面浏览器上也同样），<code>search</code>和普通文本框的外观别无二致，直到我们与之交互。在Chrome、Safari和Opera这些浏览器上，搜索查询体验会更加便捷，它们会自动在搜索框内增加一个图标，当用户点击这个图标时，就会清除已经在搜索框内输入的内容。</p> 
<p class="图"><img alt="0705.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/55.jpg"></p> 
<p class="zw">通过添加一些小的额外属性，可以让你定制的输入框更有范儿。比如添加<code>autosave</code>属性，为其添加一个唯一值，在我们的例子中，我们写上“gethardboiled”，然后在Safari中奇迹出现了，搜索框中不仅会添加一个放大镜图标，而且在点击它的时候，会出现一个列表，其中是近期搜索过的关键词。无论页面是否刷新，这个列表都会保存。此外，可以使用<code>results</code>属性来控制记录多少个最近搜索的关键词，在下例中，我们的表单将保存最近搜索的10个关键词。</p> 
<pre class="代码无行号"><code><input type="search" results="10" autosave="getHardboiled"></code></pre> 
<p class="zw"><code>search</code>输入框在样式处理上简直是臭名昭著，而其结果列表的样式在不同浏览器下也是千差万别。所以我的建议是，把这些交给浏览器来处理，不必太过渲染输入框。</p> 
<p class="图"><img alt="0706.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/56.jpg"></p> 
<h3 class="sigil_not_in_toc" id="nav_point_109">数字<code>number</code></h3> 
<p class="zw">如果我们使用<code>number</code>输入类型，iOS会自动调出一个只有数字的键盘。但在大多数桌面浏览器中，更有趣的事情发生了。Chrome，Firefox、Opera和Safari，在<code>number</code>输入框右侧增加了输入箭头或旋钮。按下这些箭头，或使用键盘上的方向键，或者使用鼠标滚轮向上或向下滚动，即可调整输入的号码。</p> 
<pre class="代码无行号"><code><input type="number" step="10"></code></pre> 
<p class="zw">如果你并不需要这些箭头，你可以在Chrome、Firefox、Opera以及Safari中，使用一段非标准，但是却非常好用的CSS代码。</p> 
<pre class="代码无行号"><code>input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
-webkit-appearance: none; 
-moz-appearance : textfield; 
margin: 0; }</code></pre> 
<p class="zw">这样一来，<code>number</code>的功能保持不变，人们仍然可以使用键盘的方向键或鼠标滚轮来调整数字。</p> 
<p class="图"><img alt="0707.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/57.jpg"></p> 
<h3 class="sigil_not_in_toc" id="nav_point_110">本地日期选择器Native date picker</h3> 
<p class="zw">当人们在航空公司、租车服务或酒店网站上选择日期的时候，总是要耗费极大的精力和时间。HTML的原生日期选择器将会让我们不再那么痛苦。</p> 
<p class="图"><img alt="0708.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/58.jpg"></p> 
<h3 class="sigil_not_in_toc" id="nav_point_111">占位符文本<code>placeholder</code></h3> 
<p class="zw">表单标签总会给人带来各种麻烦。我总想为没有标签文本的表单元素制作一个可视化提示。<code>placeholder</code>属性，会将提示信息添加到任何为空且失去焦点的<code>input</code>中；而不支持这个属性的浏览器会忽略这个提示文本。</p> 
<pre class="代码无行号"><code><input type="search" title="Search this site" 
placeholder="Search this site"></code></pre> 
<p class="zw"><code>label</code>并不是必需的，当表单内容很简单的时候，它可以被标题或者明确的标题按钮所替代。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_112">自动焦点<code>autofocus</code></h3> 
<p class="zw">像大多数人一样，当我使用Google搜索的时候，光标会自动聚焦在搜索框内；而与很多普通人不同，作为设计师，我会注意这些小的体验改进。在过去，我们必须使用脚本才能达到这样的效果，但现在完全可以使用<code>autofocus</code>属性，来以原生的方式让浏览器帮助我们实现。不支持<code>autofocus</code>属性的浏览器将会自动忽略它：</p> 
<pre class="代码无行号"><code><input type="search" autofocus></code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_113">自动完成<code>autocomplete</code></h3> 
<p class="zw">使用<code>autocomplete</code>属性，可以以原生的方式实现自动补充的效果。</p> 
<pre class="代码无行号"><code><input type="text" name="name" autocomplete="on"></code></pre> 
<p class="zw">使用<code>autocomplete</code>的时候需要注意安全性，尤其在某些场景下最好不要使用，比如涉及信用卡或其他财务信息的时候。</p> 
<pre class="代码无行号"><code><input type="text" name="credit-card" autocomplete="off"></code></pre>