HTML5属性来自helloweba.com

<form action="#" method="get" class="search_form">
    <input type="text" name="s" class="sinput" placeholder="输入 回车搜索" autofocus x-webkit-speech> 
    <input type="submit" value="搜索" class="sbtn">
</form>

 

 

 

placeholder：是为了设置初始值，并且这个初始值的颜色为灰色，当输入框input的内容变动时，这个值就消失。

autofocus：自动聚焦，当进入当前页面时，这个搜索输入框会自动获取焦点，而你可以在打开页面后直接输入关键字按回车键进行搜索。当autofocus出现两次以上的时候，浏览器会选择最后一个带有autofocus属性的输入框input聚焦。

x-webkit-speech：webkit核的浏览器（如Chrome）特有的语音识别工具，使用x-webkit-speech后，在输入框的右侧会出现一个小话筒，点击话筒，会提示“请开始说话”，用户可以通过麦克风输入语音，浏览器会自动识别语音内容，并将识别的结果显示在输入框中。

以前需要借助一大段Javascript代码来实现的聚焦和输入光标移开输入框的交互效果，而使用HTML5则只需要设置几个属性一切就OK了。

 

 

原文地址：http://www.helloweba.com/view-blog-200.html