Взаимодействие расширенного поиска с панелью инструментов HTML
Мне удалось создать панель поиска YouTube, используя HTML, который при нажатии связывает пользователя со страницей YouTube для всего, что он набрал в строке.
Однако для другой части задания мне нужно было сделать код, который делает то же самое, используя только HTML и CSS, но результаты должны быть в пределах 2010–2019 годов (настраиваемый диапазон). Речь идет о веб-сайте https://www.worldscientific.com/search/advanced. Я пробовал искать подобные случаи в Интернете, но решения были либо слишком сложными (включая PHP/bootstrap и т. д.), либо вообще не имели значения. У меня такое чувство, что решение очень простое, но я просто в тупике. Пожалуйста, попробуйте объяснить простыми словами, если это возможно, и я оставил фрагмент штрих-кода поиска на 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>
Ответы 1
На самом деле это не то, что вы просили, но выполняет свою работу. Код ищет в Google, а не на 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>