如何制作一个必应(百度)搜索框?
发布日期: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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
关注你微信了!
[***.104.42.241]2024年04月17日 23时25分24秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
PHP安装扩展mcrypt以及相关依赖项 【PHP安装PECL扩展的方法】
2021-06-30
Javascript到PHP加密通讯的简单实现
2021-06-30
德国SNS交友/视频网站Poppen.de的技术架构分享
2021-06-30
UNIX环境编程
2021-06-30
一笔画问题【数据结构-图论】
2021-06-30
红黑树
2021-06-30
安装多个gcc
2021-06-30
Linux0.01内核根目录Makefile注释
2021-06-30
【CSDN2012年度博客之星】需要您的一票,感谢大家的支持
2021-06-30
PHP对于浮点型的数据需要用不同的方法去解决
2021-06-30
Tokyo Cabinet 安装
2021-06-30
Flink在美团的应用与实践听课笔记
2021-06-30
Java多线程的11种创建方式以及纠正网上流传很久的一个谬误
2021-06-30
JDK源码研究Jstack,JMap,threaddump,dumpheap的原理
2021-06-30
Java使用字节码和汇编语言同步分析volatile,synchronized的底层实现
2019-04-27
javac编译原理和javac命令行的使用
2019-04-27
Unity使用UnityWebRequest实现本地日志上传到web服务器
2019-04-27
Unity使用RenderTexture实现裁切3D模型
2019-04-27
美术和程序吵架,原来是资源序列化格式设置不统一
2019-04-27
Unity iOS接SDK,定制UnityAppController
2019-04-27