如何制作一個必應(百度)搜索框?
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<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;background-color: white;width:40px;height: 30px;float: left;border:0;margin:8px;
}
#wrapper{
position: absolute;top:200px; left: 300px;
}
</style>
</head>
<body>
<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>
</body>
</html>
這樣便可以得到如下界面：
當然這里最重要的是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元素就自動獲取焦點了。
世之奇偉、瑰怪、非常之觀，常在於險遠，而人之所罕至焉，故非有志者不能至也。