Строка поиска на html - HTML и CSS

Miray · 24.11.2022, 13:47

Всем привет!
Появилась одна проблемка с созданием поиска
Задача такова:
Нужно сделать строку поиска что бы при нажатии на кнопку найти перекидывала URL уже прописанного сайта в коде, и в конце url прибавлялось значение введенное в строку поиска.

То есть допустим прописан сайт https://www.youtube.com/
Пользователь вводит mail
Нажимает поиск и его перекидывает на https://www.youtube.com/mail

Подскажите как это можно реализовать

macomics · 24.11.2022, 14:49

Создать у кнопки Найти обработчик JavaScript для события OnClick, в котором получить текст введенный в поле для поиска и соединить этот текст с вашим URL, а потом выполнить переадресацию.

Код:

let textEdit = document.getElementById("searchBox");
if (textEdit) window.location.href = "https://www.youtube.com/" + textEdit.value;

Как-то так

Miray · 24.11.2022, 15:42

Цитата:

Сообщение от macomics

https://www.youtube.com/

Постарался сделать как вы ответили я немного хлебушек еще в HTML
Код написал но совместить не смог, можете пожалуйста подсказать что не так?
При поиске строка просто меняется на название бокса = введённому значению внутрь поля
qen=fgdfgd&url=Найти

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Поиск</title>
</head>
<body>
<form>
<p><input type="search" name="qen" placeholder="Поиск">
<input type="submit" name="url" value="Найти"></p>
<script>
btn.onclick = function() {
let textEdit = document.getElementById("url");
if (textEdit) window.location.href = "https://www.youtube.com/" + textEdit.value;
}
</script>
</form>
</body>
</html>

macomics · 24.11.2022, 16:57

А почему вы ищите кнопку, а не поле ввода? Вам надо искать qen, а не url.

Далее первая строчка находит это поле для ввода, а вторая проверяет найденное поле на успешность поиска и переходит по ссылке получаемой сцеплением строки "https://www.youtube.com/" и значения из поля value (его и ввел пользователь).

Обработчик можно задать вот так

Код HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Поиск</title>
<script>function search_name(aName) {
  let textEdit = document.getElementById(aName);
  if (textEdit) window.location.href = "https://www.youtube.com/" + textEdit.value;
}</script>
</head>
<body>
<form>
<p><input id="qen" type="search" name="qen" placeholder="Поиск">  <!-- qen.value="" -->
<input type="button" name="url" value="Найти" OnClick="search_name('qen')"></p>
</form>
</body>
</html>

ADSoft · 25.11.2022, 10:02

форма и метод get

Код:

<form action="/" method="get">
<input id="qen" type="text" name="search" placeholder="Поиск">
<input type="submit" value="Найти">
</form>

правда итоговая строка будет что-то типа
https://www.youtube.com?search=mail

но оно и к лучшему

Miray · 25.11.2022, 17:03

macomics,
Спасибо тебе добрый человек! Ты мне почти жизнь спас

Miray · 25.11.2022, 17:04

ADSoft,
Спасибо! Методом тоже пробовал но настроить его нормально не могу

24.11.2022, 13:47	#1
Miray Новичок Джуниор Регистрация: 24.11.2022 Сообщений: 4	Строка поиска на html Всем привет! Появилась одна проблемка с созданием поиска Задача такова: Нужно сделать строку поиска что бы при нажатии на кнопку найти перекидывала URL уже прописанного сайта в коде, и в конце url прибавлялось значение введенное в строку поиска. То есть допустим прописан сайт https://www.youtube.com/ Пользователь вводит mail Нажимает поиск и его перекидывает на https://www.youtube.com/mail Подскажите как это можно реализовать

24.11.2022, 14:49	#2
macomics Участник клуба Регистрация: 17.04.2022 Сообщений: 1,833	Создать у кнопки Найти обработчик JavaScript для события OnClick, в котором получить текст введенный в поле для поиска и соединить этот текст с вашим URL, а потом выполнить переадресацию. Код: `let textEdit = document.getElementById("searchBox"); if (textEdit) window.location.href = "https://www.youtube.com/" + textEdit.value;` Как-то так Последний раз редактировалось macomics; 24.11.2022 в 14:51.

24.11.2022, 16:57	#4
macomics Участник клуба Регистрация: 17.04.2022 Сообщений: 1,833	А почему вы ищите кнопку, а не поле ввода? Вам надо искать qen, а не url. Далее первая строчка находит это поле для ввода, а вторая проверяет найденное поле на успешность поиска и переходит по ссылке получаемой сцеплением строки "https://www.youtube.com/" и значения из поля value (его и ввел пользователь). Обработчик можно задать вот так Код HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Поиск</title> <script>function search_name(aName) { let textEdit = document.getElementById(aName); if (textEdit) window.location.href = "https://www.youtube.com/" + textEdit.value; }</script> </head> <body> <form> <p><input id="qen" type="search" name="qen" placeholder="Поиск"> <!-- qen.value="" --> <input type="button" name="url" value="Найти" OnClick="search_name('qen')"></p> </form> </body> </html> Последний раз редактировалось macomics; 24.11.2022 в 17:07.

25.11.2022, 10:02	#5
ADSoft Старожил Регистрация: 25.02.2007 Сообщений: 4,155	форма и метод get Код: `<form action="/" method="get"> <input id="qen" type="text" name="search" placeholder="Поиск"> <input type="submit" value="Найти"> </form>` правда итоговая строка будет что-то типа https://www.youtube.com?search=mail но оно и к лучшему Сайты, приложения, автоматизация в широком смысле слова

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

25.11.2022, 17:03	#6
Miray Новичок Джуниор Регистрация: 24.11.2022 Сообщений: 4	macomics, Спасибо тебе добрый человек! Ты мне почти жизнь спас

25.11.2022, 17:04	#7
Miray Новичок Джуниор Регистрация: 24.11.2022 Сообщений: 4	ADSoft, Спасибо! Методом тоже пробовал но настроить его нормально не могу

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
CSS + HTML добавить ссылку для поиска	zoneclimat	HTML и CSS	1	02.05.2012 06:16
html командная строка	bookkc	Помощь студентам	5	09.02.2011 22:34
На входе: строка - цветовая спецификация HTML	yahoo	JavaScript, Ajax	4	18.01.2011 22:45
На входе: строка - цветовая спецификация HTML	yahoo	JavaScript, Ajax	0	23.12.2010 03:40
строка для поиска	vlastelin	HTML и CSS	10	10.08.2010 17:09