与 HTML 工具栏的高级搜索交互

Question

我设法使用HTML制作了一个YouTube搜索栏，当点击时，将用户链接到YouTube页面，无论他在栏中输入什么。

但是，对于作业的另一部分，我需要制作一个仅使用 HTML 和 CSS 执行相同操作的代码，但结果应在 2010-2019 年（自定义范围）内。有问题的网站是 https://www.worldscientific.com/search/advanced。我尝试在线搜索类似的案例，但解决方案要么太复杂（涉及 PHP/引导程序等），要么根本没有相关性。我有一种感觉，解决方案非常简单，但我只是被难住了。如果可能的话，请尝试用简单的术语进行解释，我已经留下了youtube搜索条形码的片段，以便更清楚地了解"复杂性"的程度。

<form id="vb_yt_search-form" action="http://www.youtube.com/results" method="get" target="_blank">
<input id="vb_yt_search-term" name="search_query" type="text" maxlength="128" placeholder="search"/>
<input type="submit" value="Search" />
</form>

Answer 1

不是你真正要求的，但正在做这项工作。该代码在谷歌上搜索，而不是在 youtube 上搜索自定义范围 2010-2019。当您按下提交按钮时，href 将使用文本框值进行更新。（我知道当您按提交打开时，它会打开一个无用的选项卡，但我懒得修复它，只需关闭并尝试按文本）

<a id="test" href="https://www.google.com/search?safe=active&tbs=cdr%3A1%2Ccd_min%3A1%2F1%2F2010%2Ccd_max%3A1%2F1%2F2019&ei=5zBDXPf8Dof_swGM4bKADw&q=site%3Ayoutube.com+"> test </a>
<form id="vb_yt_search-form" action="return myFunction()" target="_blank">
<input id="vb_yt_search-term" type="text" maxlength="128"/>
<input type="submit" onclick="myFunction()" />
</form>
<script>
function myFunction(){
var value = document.getElementById('vb_yt_search-term').value;
document.getElementById("test").href="https://www.google.com/search?safe=active&tbs=cdr%3A1%2Ccd_min%3A1%2F1%2F2010%2Ccd_max%3A1%2F1%2F2019&ei=5zBDXPf8Dof_swGM4bKADw&q=site%3Ayoutube.com+"+value;
}
</script>