在html中，我們可以使用百度首頁搜索框的代碼來實(shí)現(xiàn)自己的網(wǎng)頁搜索功能。以下是百度搜索框的代碼：

<form id="search-form" autocomplete="off" action="https://www.baidu.com/s" target="_blank">
<span class="bg s_ipt_wr">
<input type="text" name="wd" id="kw" class="s_ipt" maxlength="255" autocomplete="off" autofocus>
</span>
<span class="bg s_btn_wr">
<input type="submit" value="百度一下" id="su" class="s_btn">
</span>
</form>

上述代碼中，form標(biāo)簽表示搜索框的外層容器。form標(biāo)簽中有兩個(gè)span標(biāo)簽，分別表示文本輸入框和搜索按鈕。文本輸入框由input標(biāo)簽完成，name屬性設(shè)置為wd，表示搜索關(guān)鍵字。搜索按鈕也由input標(biāo)簽完成，type屬性值為submit，表示按鈕的作用是提交表單進(jìn)行搜索。表單提交的地址為https://www.baidu.com/s。

為了使用戶在輸入關(guān)鍵字時(shí)有更好的體驗(yàn)，我們還可以設(shè)置一些搜索框的特效。例如：

<script>
document.getElementById("kw").onfocus=function(){
this.style.borderColor="#3385ff";
document.getElementById("su").style.backgroundColor="#3385ff";
}
document.getElementById("kw").onblur=function(){
this.style.borderColor="#e0e0e0";
document.getElementById("su").style.backgroundColor="#3385ff";
}
</script>

上述代碼為搜索框設(shè)置了聚焦和失焦事件。當(dāng)搜索框聚焦時(shí)，文本輸入框的周圍邊框變?yōu)樗{(lán)色，搜索按鈕的背景色變?yōu)樗{(lán)色。當(dāng)搜索框失焦時(shí)，邊框和背景色都還原。通過這些特效的設(shè)置，搜索框的交互體驗(yàn)得到了提升。