Поисковая строка - это неотъемлемый элемент любого сайта. Особенно полезной она становится когда на сайте очень много наименований (от нескольких сотен до нескольких тысяч) и пользователю хочется найти нужную позицию в один клик. В этой статье Вы научитесь создавать сразу несколько вариантов полей для поиска.
Вариант 1
Его можно считать самым простым, т.к. здесь будет использоваться минимальное количество кода.
Понять структуру представленной формы совсем не сложно. Не считая одного абзаца (<p>Поиск</p>) мы прописываем только два элемента формы: строку поиска и кнопку "Искать". В каждом отдельном случае атрибуту type присваивается соответствующее значение: search для строки и sumbit для кнопки).
Название кнопки в браузере не соответствует тому что прописано в коде страницы. Причину такого несоответствия я уже объяснял в предыдущей статье.
Вариант 2
Сравните картинку "То что получаем" из первого варианта с текущей. Увидели разницу? В первом случае поисковое поле было абсолютно чистым, а теперь в нем появился текст (причем еще до как пользователь ввел свой запрос). Это стало возможным благодаря атрибуту placeholder, который был добавлен к первому элементу формы input.
Вариант 3
Последний вариант можно считать самым "интересным". Его "изюминка" - это совмещение поисковой строки с графической кнопкой.
Спасибо за внимание!
Если статья оказалась полезной предлагаю подписаться на канал. Впереди Вас ждет еще много интересного контента!)
P.S. Если возникли трудности пишите в комментариях или в сообщениях канала. Отвечу на все и всем)