使用HTML制作简单的搜索功能（可实现百度搜索）

看看电影听听歌

已于 2023-05-04 10:03:39 修改

阅读量3.5w

点赞数 25

文章标签： css html5 html 前端 css3

于 2021-03-30 11:54:44 首次发布

本文链接：https://blog.csdn.net/xxx_datou/article/details/115311805

版权

这篇博客展示了如何使用HTML和CSS构建一个简单的搜索引擎搜索表单。通过设置表单样式和配置提交行为，实现了将用户输入定向到百度搜索的功能。表单的action属性指向了百度搜索的URL，当点击提交按钮时，内容会被发送到该URL，完成搜索跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			form{
                text-align: center;
            }
			form .text {
				display: inline-block;
				border: 0;
				width: 260px;
				height: 35px;
				font-size: 14px;
				outline: none;
				border: 2px solid #01af63;
			}
			
			form .search {
				
				width: 90px;
				height: 38px;
				border: 2px solid #01af63;
				outline: none;
				cursor: pointer;
				/*   cursor: pointer;   鼠标悬停或点击时button时鼠标变成其他图标  */
				text-align: center;
				background-color: #01af63;
				color: #FFFFFF;
			}
		</style>
	</head>
	<body>
		
		<form target="_blank" method="get" action="https://www.baidu.com/s">
			<input type="text" placeholder="请输入关键词" name="word" class="text" />
			<input type="submit" value="搜索" class="search">
		</form>
	</body>
</html>

业务流程：

在输入框内输入你要搜索的内容，输入完点击按钮即可完成百度搜索

业务逻辑：

主要是通过form表单的action属性来实现 <form action="URL"> （URL 当表单提交时向何处发送表单数据），输入框输入内容后，再点击按钮<input type="submit"> （ submit用在表单内,里面有类似的默认方法封装,普通单击就是提交所在表单），这时你的内容就会提交到action属性指定的URL里面即可完成搜索跳转。

URL可分为两种：

绝对 URL - 指向另一个网站（比如 action="http://www.xxx.com"）

相对 URL - 指向网站内的一个文件（比如 action="xxx.html"）

要实现搜索功能的URL在哪里找呢？

最简单的方法，友友们可以随便找个搜索引擎进行一次搜索业务，点击搜索按钮跳转后，友友们把目光聚焦到地址栏，拿百度引擎做案例当你搜索完成地址栏会变成这样你只需要拿到问号前面的那一串内容即可，然后放在form表单的action属性里面即可实现百度引擎的搜索。为什么是拿问号前面的内容呢？因为这是百度用于请求搜索功能服务器的URL，有兴趣的友友可以查看axios文档。也可以拿到其他搜索引擎的URL，步骤同上即可。