2025-02-18 11:03阅读: 12评论: 0推荐: 0

HTML - 8、表单<table> 特定搜索功能

使用HTML表单进行搜索操作，并结合超链接实现特定的搜索功能。下面将详细讲解这些代码，并解释如何将它们结合起来实现更灵活的搜索功能。

1. 使用表单进行搜索

百度搜索表单

 <form action="https://www.baidu.com/s">
    <input type="text" name="wd">
    <button>去百度搜索</button>
</form>

action：指定表单提交的地址，这里是百度的搜索地址。
name="wd"：百度搜索框的参数名称是wd，输入的内容会作为搜索关键词。
<button>：点击按钮时，表单会将输入的内容提交到指定的action地址。

京东搜索表单

 <form action="https://search.jd.com/search" target="_self" method="get">
    <input type="text" name="keyword">
    <button>去京东搜索</button>
</form>

action：指定表单提交的地址，这里是京东的搜索地址。
name="keyword"：京东搜索框的参数名称是keyword，输入的内容会作为搜索关键词。
method="get"：指定表单提交的方式为GET，这是搜索表单常用的提交方式。
target="_self"：确保搜索结果在当前页面打开。

2. 使用超链接进行搜索

可以通过超链接直接构造搜索URL，实现特定关键词的搜索。

超链接搜索示例

 <a href="https://search.jd.com/search?keyword=手机">搜索手机</a>

href：直接构造了包含搜索关键词的URL。点击链接后，会直接跳转到京东搜索页面，并搜索“手机”。

3. 结合表单和超链接实现灵活搜索

可以结合表单和超链接，既可以输入关键词搜索，也可以点击预设的超链接进行快速搜索。

完整示例

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>搜索示例</title>
</head>
<body>
    <h2>搜索功能示例</h2>
 
    <!-- 百度搜索表单 -->
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd" placeholder="请输入搜索关键词">
        <button type="submit">去百度搜索</button>
    </form>
    <hr>
 
    <!-- 京东搜索表单 -->
    <form action="https://search.jd.com/search" target="_self" method="get">
        <input type="text" name="keyword" placeholder="请输入商品名称">
        <button type="submit">去京东搜索</button>
    </form>
    <hr>
 
    <!-- 预设关键词的超链接 -->
    <a href="https://search.jd.com/search?keyword=手机">搜索手机</a> |
    <a href="https://search.jd.com/search?keyword=电脑">搜索电脑</a> |
    <a href="https://search.jd.com/search?keyword=平板">搜索平板</a>
</body>
</html>

解析

表单搜索：
- 用户可以在输入框中输入关键词，点击按钮后，表单会将关键词提交到指定的搜索地址。
- 百度搜索表单使用name="wd"，京东搜索表单使用name="keyword"。
超链接搜索：
- 预设了特定关键词的超链接，用户点击链接后会直接跳转到搜索结果页面。
- 通过构造包含keyword参数的URL，可以直接触发搜索。

总结

表单搜索：适用于用户输入关键词进行搜索。
超链接搜索：适用于预设关键词的快速搜索。
结合使用：可以提供更灵活的搜索方式，既支持自定义搜索，也支持快速搜索。

上一篇HTML - 7、表单<table> 基本结构

下一篇HTML - 9、表单<table> 按钮示例

本文作者：别晃我的可乐

本文链接：https://www.cnblogs.com/lwehne/p/18721556

posted @ 2025-02-18 11:03 别晃我的可乐阅读(12) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

别晃我的可乐

HTML - 8、表单<table> 特定搜索功能

1. 使用表单进行搜索

百度搜索表单

京东搜索表单

2. 使用超链接进行搜索

超链接搜索示例

3. 结合表单和超链接实现灵活搜索

完整示例

解析

总结

公告

最新随笔

我的标签

随笔分类

随笔档案

	<form action="https://www.baidu.com/s">
	<input type="text" name="wd">
	<button>去百度搜索</button>
	</form>

	<form action="https://search.jd.com/search" target="_self" method="get">
	<input type="text" name="keyword">
	<button>去京东搜索</button>
	</form>

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<title>搜索示例</title>
	</head>
	<body>
	<h2>搜索功能示例</h2>

	<!-- 百度搜索表单 -->
	<form action="https://www.baidu.com/s">
	<input type="text" name="wd" placeholder="请输入搜索关键词">
	<button type="submit">去百度搜索</button>
	</form>
	<hr>

	<!-- 京东搜索表单 -->
	<form action="https://search.jd.com/search" target="_self" method="get">
	<input type="text" name="keyword" placeholder="请输入商品名称">
	<button type="submit">去京东搜索</button>
	</form>
	<hr>

	<!-- 预设关键词的超链接 -->
	<a href="https://search.jd.com/search?keyword=手机">搜索手机</a> \|
	<a href="https://search.jd.com/search?keyword=电脑">搜索电脑</a> \|
	<a href="https://search.jd.com/search?keyword=平板">搜索平板</a>
	</body>
	</html>