HTML增加一个百度搜索框

最新推荐文章于 2024-07-10 13:40:50 发布
最新推荐文章于 2024-07-10 13:40:50 发布
阅读量1.5k 收藏 2
点赞数 1
分类专栏： 前端小白学习 文章标签： js web css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxnshuai/article/details/107208664
版权 
<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>document</title>
	
</head>
<body>
<script type="text/javascript">
function f1(){
var v=document.getElementById("obj1");
location.href="http://www.baidu.com/baidu?wd="+v.value;
}
</script>
<input id="obj1" type=text style="width:300px;"/>
<button id="btn2" onclick="f1()">百度</button>

</body>
</html>
阿柠xn
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
百度搜索框html代码
09-06
百度搜索框html代码，一个很好的搜索框实例
HTML如何在网页中加一个搜索框,html搜索框-Javascript-HTML搜索框1.想在HTML页面上加入 爱问知识人...
weixin_33462167的博客
05-31 324
1.想在HTML页面上加入搜索框，进行站内搜索，效果是搜索框提示词点击后消失，可自行输入关键词，在网上找到了一段代码，是在HTML里面的，但是我想把它分离出来，放在单独的JS文件里，不知道该怎么做，求解答。2.想在一个页面放入两个这样的搜索框，一个在页面顶部，一个在页面底部，1.想在HTML页面上加入搜索框，进行站内搜索，效果是搜索框提示词点击后消失，可自行输入关键词，在网上找到了一段代码，是在H...
百度搜索框制作HTML+CSS
最新发布
qq_65798038的博客
07-10 485
每天免费分享一些初学者有用的小知识
添加 搜索 HTML
qq_37457363的博客
10-17 1214
html> html> head lang="en"> meta charset="UTF-8"> title>张凯title> style> *{ margin: 0 auto; background-color: aqua; } input{ back
一小段html代码将就能将百度搜索栏包含到你的页面里
09-22
以下，小编为大家介绍一种用小段html代码就能将百度搜索栏包含到你的页面里的方法。
【Web】简单的HTML实现百度搜索
qq_45888298的博客
07-09 5472
纯HTML新手接到团队的训练任务，就着手开始写了，没用什么高大上的语法，都是最基本的语句实现的，仅供参考。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Baidu&l
Dreamweaver怎么制作百度搜索栏静态页面?
09-24
本教程将详细介绍如何使用Dreamweaver（DW）来制作一个类似百度搜索栏的静态页面。 首先，我们需要了解基本的HTML结构。一个简单的搜索栏通常包括一个输入框（`<input>`标签，用于用户输入关键词）和可能的其他元素...
使用Ajax模仿百度搜索框的自动提示功能实例
10-17
在本文中，我们将探讨如何使用Ajax技术来实现一个类似百度搜索框的自动提示功能。Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许在不重新加载整个页面的情况下与服务器交换数据并更新...
JS仿百度搜索自动提示框匹配查询功能
12-10
在本文中，我们将探讨如何使用JavaScript来实现一个类似百度搜索的自动提示框匹配查询功能。这个功能可以在用户输入关键词时动态地提供相关的建议，提高用户体验并优化搜索过程。以下是实现这个功能的关键点： 1. *...
html-js-search:输入框联想词效果,类似百度搜索框
05-10
在本项目中，我们主要探讨的是如何利用HTML和JavaScript实现一个具有百度搜索框类似功能的输入框联想词效果。这个效果通常被应用于搜索引擎或者网站的搜索功能，它能根据用户输入的关键字，实时显示相关的搜索建议，...
Vue 仿百度搜索功能实现代码
08-31
在这个示例中，我们将讨论如何使用Vue.js和vue-resource库来实现一个类似百度搜索的功能。Vue-resource是一个轻量级的插件，提供了对HTTP请求（包括JSONP）的支持，使得在Vue应用中与服务器交互变得更加简单。 首先...
html在网页中内嵌百度搜索,如何在我的网页内嵌一个百度搜索的网页
weixin_35513122的博客
06-04 2123
满意答案double08212016.05.18采纳率：51%等级：10已帮助：1069人网页内包含百度搜索框代码：查看代码打印01 02 function g(formname) {03 var url = "http://www.baidu.com/baidu";04 if (formname.s[1].checked) {05 formna...
在html中加入百度搜索,如何我的个人网页里添加百度搜索的框框呢
weixin_32179749的博客
05-31 485
该楼层疑似违规已被系统折叠隐藏此楼查看此楼functiongowhere1(formname){varurl;if(formname.myselectvalue.value=="0"){url="http://www.baidu.com/baidu";document.search_form1.tn.value="baidu";formname.method="get";}...
html5里百度搜索框怎么做,基于jquery的仿百度搜索框效果代码
weixin_42361622的博客
06-04 851
先看看整个的效果图：图一：图二：图三：图四：大概的效果图就这样，接下来直接看源码页面：$(document).ready(function() {$('#autoSearchText').autoSearchText({ width: 300, itemHeight: 150,minChar:1, datafn: getData, fn: alertMsg });});function alert...
自制HTML集成多种搜索引擎
一只没有感情的AI机械猿
04-19 589
input type="submit" name="sa" value="谷歌搜索" Class="btn btn-dark">
搜索条件折叠html,基于html css实现带搜索图标的搜索框功能
weixin_29144347的博客
05-30 1271
前言给大家分享一下前端用处很多的带小图标的搜索框的制作方法。效果展示基本思路1、搜索图像用绝对定位放到搜索框的上方2、input框设置文本缩进，大小为搜索图像大小加上图像左右两边的外边距准备只需一个搜索图标图片，类似于下图代码搜索框demo*{margin: 0;padding: 0;}body{width: 100vw;height: 100vh;background: radial-gradi...
一段html代码将百度搜索栏包含到你的页面来
数据库天地
04-16 806
&lt;html&gt; &lt;head&gt; &lt;title&gt;包含百度页面&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="bdfm" target="_blank" name="bdfm" method="get" action=&q
html如何将搜索图标放入搜索框中
热门推荐
qq_61851946的博客
01-17 1万+
html新手记录之如何将搜索图标放入搜索框中
bootstrap4模仿写一个百度搜索框,增加防抖
05-29
好的，以下是一个使用Bootstrap4和防抖技术的百度搜索框示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap4模仿百度搜索框并增加防抖</title> <!-- 引入Bootstrap4 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container mt-5"> <form class="form-inline"> <div class="input-group"> <input type="text" class="form-control" placeholder="请输入关键词" id="search-input"> <div class="input-group-append"> <button type="submit" class="btn btn-primary">搜索</button> </div> </div> </form> </div> <!-- 引入jQuery和Bootstrap4的JavaScript --> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script> // 防抖函数，使用setTimeout实现 function debounce(func, delay) { let timer = null; return function() { let context = this; let args = arguments; clearTimeout(timer); timer = setTimeout(function() { func.apply(context, args); }, delay); } } // 获取输入框和按钮 const searchInput = document.getElementById('search-input'); const searchBtn = document.querySelector('button[type="submit"]'); // 给输入框添加防抖处理函数 searchInput.addEventListener('input', debounce(function() { console.log(searchInput.value); // 在控制台输出输入框的值 }, 500)); </script> </body> </html> ``` 解释一下代码： - 在头部引入了Bootstrap4的CSS样式文件。 - 在body中创建了一个container容器，并在其中创建了一个form表单。 - 在form表单中创建了一个input-group输入框组件，包含了一个输入框和一个按钮。 - 使用form-inline类，让表单变成水平排列。 - 使用mt-5类，给container容器添加了一个上边距。 - 在底部引入了jQuery和Bootstrap4的JavaScript文件。 - 创建了一个防抖函数，用于延迟处理输入框的输入事件。 - 获取输入框和按钮元素，并给输入框添加了防抖处理函数。 - 在防抖处理函数中，将输入框的值输出到控制台，可以自行修改为实际搜索功能。 这样我们就完成了一个使用Bootstrap4和防抖技术的百度搜索框示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值