Html 是否可以使用复选框和/或下拉列表将多个（表单）搜索字段合并为一个？

我使用自己的浏览器起始页。本页仅供本人（以及一些朋友和家人）使用。其中包含新闻、天气、链接等

此外，该页面还包括几个搜索字段，如Google、Usenet、forumsearch（在喜爱的网站上）和字幕搜索字段。当然，每个搜索字段对不同的站点使用不同的查询

现在，当我重做起始页时，我想知道是否可以只创建一个搜索字段并使用复选框来选择我要搜索的页面。默认情况下，它应该选中Google，但如果我选中字幕复选框，它将使用搜索字段搜索字幕（在适当的网站上）

如果这是不可能的，是否有可能与下拉或类似的东西？或者是一种不同的方法或解决方案

当两者都不可能或需要大量编码/调整时，我会像以前一样使用多个搜索字段

我拍摄了一张屏幕截图，展示了搜索字段当前的情况（在旧设计上），给您留下了一个印象

切换到复选框/下拉字段的原因是，我可以添加更多搜索，而不会使页面看起来混乱

在输入这些内容并查看这些内容时，也许更好的解决方案是只创建几个按钮并只使用一个搜索字段？这可能还是有点俗气，但这确实可行。你觉得怎么样

就像我说的；如果需要大量编码或调整，请告诉我。我只是想知道是否有不同的方法

---

更新

虽然尤达的解决方案很棒。有几个搜索字段（如果我必须记住进行搜索所需的每个字符串）使它变得有点混乱

难道不能使用复选标记甚至按钮来选择正在使用的搜索吗

例如，我们有一个搜索字段，但有几个（简单）按钮来选择要使用的搜索？默认情况下，它应该始终使用谷歌搜索imho

---

或者可以将这些字符串添加到按钮（切换）中吗？默认情况下，它将始终选择Google，否则如果为新闻组、论坛搜索等切换按钮，它将使用搜索功能。

可以通过记录复选框的响应来实现。例如，如果您将复选框设置为默认值，则必须为其指定名称或id，以便在检查查询时，您可以制定if-else梯形图或切换条件以完成查询并执行相应的搜索

，如我的评论所示，您可以实现使用单个文本输入的搜索系统，它解析用户输入的服务标识符，该标识符由一个字母后跟一个冒号表示

i、 例如，“g:”将映射到谷歌服务

其余的输入随后将被发送到处理特定请求的服务类

这与duckduck go使用的bang符号非常相似，duckduck go基本上实现了您正在创建的功能

下面是一个示例，演示使用中介绍的技术实现的逻辑

您可以在本文档或任何其他文档中看到对各种功能的浏览器支持

类搜索{
构造函数（选项）{
this.searchInputClass=options.searchInputClass；
this.searchButtonClass=options.searchButtonClass；
this.serviceMap=options.serviceMap；
this.validator=options.validator；
this.defaultService=options.defaultService；
this.textParser=options.textParser；
this.cacheElements（）；
}
cacheElements（）{
this.searchInputElement=document.querySelector（this.searchInputClass）；
this.searchButtonElement=document.querySelector（this.searchButtonClass）；
}
bindEvents（）{
this.searchButtonneElement.addEventListener（'click'，this.onSearchButtonClick.bind（this））；
}
onSearchButton单击（）{
this.currentInput=this.gettInput（）；
const isValid=this.validator.validateInput（this.currentInput）；
如果（有效）{
const serviceId=this.textParser.extractServiceIdentifer（this.currentInput）；
const matchedService=this.matcheIdentifierToService（serviceId）；
this.invokeService（matchedService，this.textParser.extractQuery（this.currentInput））；
}否则{
this.invokeService（this.defaultService，this.currentInput）；
}
}
getput（）{
返回this.searchInputElement.value；
}
matchIdentifierToService（serviceId）{
返回this.serviceMap[serviceId]| | this.defaultService；
}
invokeService（服务、查询）{
服务呼叫（查询）；
}
}
类文本分析器{
ExtractServiceIdentifier（inputString）{
返回inputString.substring（0，1）；
}
extractQuery（inputString）{
返回inputString.substring（2.trim（）；
}
}
类验证器{
构造函数（选项）{
this.textParser=options.textParser；
}
validateInput（inputString）{
返回此.validateServiceTarget（inputString）；
}
validateServiceTarget（输入）{
常数测试=/[a-z]/；
const colondex=input.indexOf（'：'）；
const hasColon=colondex==1；
const inputCharacter=this.textParser.extractServiceIdentifer（输入）；
常量isValidCharacter=inputCharacter.match（测试）；
返回hasColon&&isValidCharacter！==null；
}
}
类搜索工厂{
构造函数（选项）{
this.Search=options.Search；
this.Validator=options.Validator；
this.TextParser=options.TextParser；
}
构建（选项）{
const textParser=newthis.textParser（）；
const inputValidator=新的this.Validator({
文本分析器，
});
const search=newthis.search({