如何制作一个必应(百度)搜索框?
发布日期:2021-10-17 00:06:09 浏览次数:21 分类:技术文章

本文共 1560 字,大约阅读时间需要 5 分钟。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<
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
>
 
 
<
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元素就自动获取焦点了。

 

转载地址:https://blog.csdn.net/sulan2131/article/details/69053576 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:如何使用MOQ进行单元测试
下一篇:深入理解javascript中执行环境(作用域)与作用域链

发表评论

最新留言

关注你微信了!
[***.104.42.241]2024年04月17日 23时25分24秒