HTML - 8、表单<table> 特定搜索功能
使用HTML表单进行搜索操作，并结合超链接实现特定的搜索功能。下面将详细讲解这些代码，并解释如何将它们结合起来实现更灵活的搜索功能。
使用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，可以直接触发搜索。
-
总结
-
表单搜索：适用于用户输入关键词进行搜索。
-
超链接搜索：适用于预设关键词的快速搜索。
-
结合使用：可以提供更灵活的搜索方式，既支持自定义搜索，也支持快速搜索。
浙公网安备 33010602011771号