服務項目:網站建設、仿站、程序開發、APP開發設計、移動網站開發設計、企業網站設計、電子商務網站開發、網站維護、網站推廣、UX/UI 、HTML5、CSS3、JS / Jquery ...
四川浚網科技有限公司
四川浚網科技有限公司 (開發設計官網)TEL : 15308000360 / QQ : 38585404

您的位置:首頁 > 技術經驗 > 前端開發 > 正文

簡單HTML5打造內涵搜索框

隨著HTML5的深入人心,其越來越多的新功能為更多Coder所用,HTML5新增了不少人性化標簽和屬性,馬上介紹的就是新的表單屬性。

實例圖片:

代碼如下:

很贊?Yes!

簡短的幾個代碼就能實現原本多行JS才能實現的完美交互效果,這就是HTML5略窺一點的贊!

placeholder是為了設置初始值,并且這個初始值的顏色為灰色,當input的內容變動時,這個值就消失,它的職責就是給人一種親和力的指示,十分有愛。

autofocus,顧名思義:自動聚焦,當進入當前頁面時,這個input會自動獲取焦點,而你可以在打開頁面后直接輸入東西進行搜索。當autofocus出現兩次以上的時候,瀏覽器會選擇最后一個帶有autofocus屬性的input聚焦。

x-webkit-speech,這個大概不必多解釋了,webkit核的瀏覽器(如Chrome)特有的語音識別工具,給input裝上也是再好不過的了,話說Google也給自己的搜索框裝上這個工具。

好了,不扯了,簡單的一個小框框,其實有更多需要我們研究的東西。比如這個簡單CSS3 讓搜索更有愛是我之前寫的搜索框有愛體驗,簡單即是美!



上一篇:推薦使用的版本號控制方式
下一篇:解決Button在IE6、7下的自適應寬度問題

相關熱詞搜索:html5 搜索框
历届英超联赛冠军 福建22选5最新开奖结果今天 股票涨跌停板怎么计算 辽宁福彩35选7中奖规则 浙江十一选五开奖结 熊猫麻将ios版链接 股票配资平台找恒瑞行配资丿 股票配资平台代理怎么做 e路配资 微乐麻将技巧十句口诀 老版明星三缺一麻将 互联网理财产品排行榜 网上现金麻将棋牌游戏 基金配资是什么意思 天津麻将技巧 22选5河南最新开 今3d开奖结果