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

您所在的位置:网站首页 百度搜索进不去 使用HTML制作简单的搜索功能(可实现百度搜索)

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

2023-08-21 01:52| 来源: 网络整理| 查看: 265

实现代码: 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; }

业务流程:

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

业务逻辑:

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

URL可分为两种:

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

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

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

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3