
			<p>随着HTML5的深入人心，其越来越多的新功能为更多Coder所用，HTML5新增了不少人性化标签和属性，马上介绍的就是新的表单属性。</p>
<p><strong>实例图片：</strong></p>
<p style="text-align: center;"><img class="size-full wp-image-4289  aligncenter" title="简单HTML5打造内涵搜索框" src="http://www.daqianduan.com/wp-content/uploads/2012/05/search1.png" alt="" width="400" height="400" /></p>
<p><strong>代码如下：</strong></p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;"><span style="color: #170;">&lt;input</span> <span style="color: #00c;">type</span>=<span style="color: #a11;">"text"</span> <span style="color: #00c;">placeholder</span>=<span style="color: #a11;">"输入 回车搜索"</span> <span style="color: #00c;">autofocus</span> <span style="color: #00c;">x-webkit-speech</span><span style="color: #170;">&gt;</span></pre>
<p>很赞？Yes！</p>
<p>简短的几个代码就能实现原本多行JS才能实现的完美交互效果，这就是HTML5略窥一点的赞！</p>
<p><strong>placeholder</strong>是为了设置初始值，并且这个初始值的颜色为灰色，当input的内容变动时，这个值就消失，它的职责就是给人一种亲和力的指示，十分有爱。</p>
<p><strong>autofocus</strong>，顾名思义：自动聚焦，当进入当前页面时，这个input会自动获取焦点，而你可以在打开页面后直接输入东西进行搜索。当autofocus出现两次以上的时候，浏览器会选择最后一个带有autofocus属性的input聚焦。</p>
<p><strong>x-webkit-speech</strong>，这个大概不必多解释了，webkit核的浏览器（如Chrome）特有的语音识别工具，给input装上也是再好不过的了，话说Google也给自己的搜索框装上这个工具。</p>
<p>好了，不扯了，简单的一个小框框，其实有更多需要我们研究的东西。比如这个<a title="简单CSS3 让搜索更有爱" href="http://www.daqianduan.com/css3-search/">简单CSS3 让搜索更有爱</a>是我之前写的搜索框有爱体验，简单即是美！</p>
<p>转载请注明：<a href="http://www.daqianduan.com">大前端</a> &raquo; <a href="http://www.daqianduan.com/html5-search-input/">简单HTML5打造内涵搜索框</a></p>		