基于HTML/CSS实现World Scientific限定2010-2019年的高级搜索栏

嘿，我太懂这种“明明感觉解法很简单但就是卡壳”的心情了！其实你走的路子完全对——和你做YouTube搜索栏的逻辑一模一样，核心就是复用目标网站的原生表单参数，不用任何后端、框架，纯HTML就能搞定，CSS只是用来美化而已。

思路拆解 #

先打开目标高级搜索页面，用浏览器开发者工具（F12）查看它的原生表单结构，就能找到我们需要的关键参数：

• 搜索关键词的参数名是query（对应输入框的name属性）
• 限定年份范围需要两个参数：yearFrom（起始年）和yearTo（结束年）
• 表单提交的目标地址就是这个高级搜索页面本身，请求方式用GET（和YouTube搜索逻辑一致）

完整代码实现 #

<!-- World Scientific 限定2010-2019年搜索栏 -->
<form id="ws_advanced-search" action="https://www.worldscientific.com/search/advanced" method="get" target="_blank">
  <!-- 搜索关键词输入框 -->
  <input 
    id="ws_search-term" 
    name="query" 
    type="text" 
    maxlength="200" 
    placeholder="搜索学术内容..."
    required
  />
  <!-- 隐藏输入框：自动传递年份范围参数，用户无需手动设置 -->
  <input type="hidden" name="yearFrom" value="2010" />
  <input type="hidden" name="yearTo" value="2019" />
  <!-- 提交按钮 -->
  <input type="submit" value="搜索（限定2010-2019）" />
</form>

代码说明 #

• hidden类型的输入框是关键：它不会在页面上显示，但提交表单时会自动把2010和2019这两个年份参数发送到目标网站，实现自动限定范围
• required属性可以强制用户输入搜索内容再提交，避免空搜索
• 你可以随便加CSS美化这个表单，比如调整输入框的宽度、按钮的样式，完全不影响功能逻辑——示例美化CSS：

#ws_advanced-search {
  display: flex;
  gap: 8px;
  margin: 20px 0;
}
#ws_search-term {
  padding: 8px 12px;
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
}
#ws_advanced-search input[type="submit"] {
  padding: 8px 16px;
  background: #0071bc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

这样就完美实现需求了——和你之前做YouTube搜索栏的逻辑完全一致，只是换了目标地址和参数而已！

内容的提问来源于stack exchange，提问作者Hao