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

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			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: 0;
				outline: none;
				cursor: pointer;
				/*   cursor: pointer;   鼠标悬停或点击时button时鼠标变成其他图标  */
				text-align: center;
				line-height: 40px;
				background-color: #01af63;
				color: #FFFFFF;
			}
		</style>
	</head>
	<body>
		
		<form target="_blank" method="get" action="https://www.baidu/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"）

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

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

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

更多推荐

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