程式碼如下：

<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    *{
        margin:0;padding:0;list-style: none;text-decoration: none;
    }
    body{
        background: #ccc;
    }
    #container{
        background-image: url(backgroundImage.jpg);width: 1613px
 
;height: 700px;margin:0 auto;
    }
    #logo{
        float: left;margin:-5px 5px 0 0;
    }
    form{
        background: white;float: left;
    }
    #search-input{
        outline:none;width:500px;height: 50px;line-height: 50px;float: left;border:0;
 
    }
    #search-button{
        background-image: url(search.jpg)
 
;background-repeat: no-repeat;width:40px;height: 30px;float: left;border:0;margin:8px;
    }
    #wrapper{
        position: absolute;top:200px; left: 300px;
    }
</style>
 
 
<div id="container">
    <div id="wrapper">
        <div id="logo">  <img src="必應.png" alt="tupian" id="logo"
 
> </div>
        <form action="https://cn.bing.com/search" target="_self" method="get">
            <input type="text" id="search-input" name="q" placeholder="請輸入要搜尋的內容：" autofocus="">
            <input type="submit" id="search-button" value="">
        </form>
    </div>
</div> 

　這樣便可以得到如下介面：

當然這裡最重要的是form表單了，其中action的值是什麼呢？

在input中怎麼設定name呢？ 我們可以在必應搜尋中隨便搜尋一些東西，比如搜尋，可以看到：

於是，我們在action中輸入https://cn.bing.com/search

　　　　　將第一個input的name設定為“q”即可。

　　　　　值得注意的是：在提交按鈕中的type要設定為submit即可自動實現搜尋而不需要使用javascript程式碼。

同樣的，如果我們需要使用百度，即需要在百度中搜索任意內容：

於是，我們需要將action的值設定為https://www.baidu.com/s 將第一個input的name值設定為wd即可。

注： 我們也可以使用js原生的方法 focus()使其獲得焦點。

　　如： document.querySelector("input").focus() 那麼第一個input元素就自動獲取焦點了。