Перейдите по ссылке, включающей значение ввода, используя два тега ввода и кнопки

Question

Как перейти по ссылке со значением в поле ввода без ввода дополнительных javascript, т. Е. Всего кода в html тегах ввода и кнопки?

Допустим, существует сайт Google для поиска и строка поиска вводится, поэтому при нажатии кнопки вместо ссылки https://www.google.com/search?q= и значения поля ввода, например, text:

https://www.google.com/search?q=text

<input type="text" id="search" name="search" value="text">
<button onclick="code">Follow a search link with a value in input</button>

Answer 1

Чтобы сделать это без JS, вам просто нужно создать элемент <form>, целью которого является google.com/search.

Единственное, что следует отметить, это то, что action должно быть get, а имя input должно быть q, чтобы при отправке формы использовался правильный формат строки запроса. Попробуйте это:

<form action="https://www.google.com/search" method="get">
  <input type="text" id="search" name="q" value="" required />
  <button type="submit">Follow a search link with a value in input</button>
</form>

Answer 2

"Это необходимо без использования формы, вы можете иметь код js" Ну, есть код js, который можно использовать для достижения этого

<input type="text" id="search" name="search" value="text">
<button onclick="search()">Follow a search link with a value in input</button>
<script>
    function search() {
        const searchValue = document.getElementById('search').value

        window.location.href = `https://www.google.com/search?q=${ searchValue }`
    }
</script>

Answer 3

1. Действие формы должно быть настроено на нужный вам сайт, в данном случае Google

2. Метод формы должен быть GET

3. Поля формы должны быть названы, как и параметры в строке запроса

Пример:

<form action="https://www.google.com/search" method="GET">
  <input type="search" placeholder="Search..." name="q" />
  <input type="submit" value="serach"/>
</form>