Как сделать кнопку поиска в html: Как сделать кнопку внутри поля для поиска?

Содержание

Как сделать кнопку внутри поля для поиска?

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
5.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

Разместить кнопку отправки формы внутри рамки для ввода текста.

Решение

Надо понимать, что напрямую добавить кнопку внутрь поля формы нельзя. Поэтому любые методы лишь имитируют этот эффект. Для создания подобной иллюзии следует убрать исходную рамку вокруг поля для поиска и добавить её к элементу, внутри которого располагается поле и кнопка. Данный метод лучше всего работает когда все размеры у нас имеют фиксированные значения. В примере 1 общая ширина формы задана как 300 пикселов, поле имеет ширину 274 пиксела, а кнопка — 20 пикселов. Ширина поля подобрана с учётом того, чтобы не возникало переносов в форме, это негативно скажется на общем виде.

Некоторых добавлений в код CSS потребуют браузеры Safari и Chrome. При получении фокуса поля формы подсвечиваются цветной рамкой, которая разрушает нашу иллюзию единого поля. Чтобы этого не возникало, в стиле поля для поиска добавим outline со значением none, это позволит заблокировать появление рамки в указанных браузерах. Вокруг поля поиска (<input type=»search»>) в любом случае останется тонкая рамка, её можно удалить с помощью специфического свойства -webkit-appearance опять же со значением none.

Пример 1. Форма поиска

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Форма для поиска</title>
  <style>
   .search {
    width: 300px; /* Ширина поля с кнопкой */
    border: 1px solid #000; /* Параметры рамки */
    min-height: 20px; /* Минимальная высота */
   }
   input[type="search"] {
    border: none; /* Убираем рамку */
    outline: none; /* Убираем свечение в Chrome и Safari */
    -webkit-appearance: none; /* Убираем рамку в Chrome и Safari */
    width: 274px; /* Ширина поля */
    vertical-align: middle; /* Выравнивание по середине */
   }
   input[type="submit"] {
    width: 20px; /* Ширина кнопки */
    height: 20px; /* Высота кнопки */
    border: none; /* Убираем рамку */
    background: url(images/video.png) no-repeat 50% 50%; /* Параметры фона */
   }
  </style>
 </head>
 <body>
  <form>
    <div>
     <input type="search" name="q">
     <input type="submit" value="">
   </div>
  </form>
 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Вид поля для поиска с кнопкой

Саму кнопку можно добавить по разному. Например, сделать её обычной кнопкой с надписью, через <input type=»image»>, или, как в примере выше, в виде кнопки с фоновым рисунком.

Как сделать простейший поиск по сайту с помощью Google | html

Если ваш сайт проиндексирован Google (см. [1, 2], то можно применить на сайте простейший способ поиска, используя Google.

Процесс по шагам:

1. Добавьте форму на страницу, где должен быть поиск по сайту. Форма должна содержать поле ввода и кнопку “Поиск”. Делается это добавлением следующего текста в HTML-код страницы (форматирование и прочие атрибуты опускаю):

< FORM ACTION="findbygoogle.php" METHOD="POST">
   < INPUT type=text name=”WhatFind”>
   < INPUT type=submit value="Поиск">
< /FORM>

Получится такая форма:

ACTION=»findbygoogle.php» задает прямую ссылку, по которой передается управление, когда пользователь нажмет кнопку на форме. Здесь указано, что сервер покажет пользователю страницу, которую будет генерировать PHP-код файла findbygoogle.php (если вы предпочитаете perl, CGI или другую технологию генерации страниц, можете применить её). Файл findbygoogle.php должен находиться в том же каталоге, что и html-страничка, в которую вы добавили код формы.

METHOD=»POST» задает метод передачи значения переменной сценарию findbygoogle.php. Вместо POST возможен также вариант GET, разница в том, что GET отобразит в строке браузера значение переменной WhatFind, а POST — нет.

name=”WhatFind” задает имя переменной, которая будет доступна в файле findbygoogle.php. Её содержимое будет использоваться для построения запроса к Google на поиск.

2. Создаем файл findbygoogle.php со следующим содержимым:

Код здесь простейший, просто для демонстрации метода. Хорошим решением будет добавить оформление — заголовок (до блока < ?php) и подвал страницы сайта (после блока < ?php). При выполнении этого файла генерируется запрос к Google, содержащий значение переменной WhatFind (то, что пользователь ввел в строке формы). Доменное имя microsin.ru нужно заменить на доменное имя Вашего сайта. Файл findbygoogle.php нужно поместить в тот же каталог сайта, где находится html-файл с формой поиска. Нужно также проверить права на файл findbygoogle.php — они должны быть равны 755.

Как это делается в NetObjects Fusion 7.5:

1. Открываем страничку, куда будем вставлять форму поиска.

2. Добавляем на страницу Form Area, нажав на соответствующую кнопку тулбара Standard Tools. На запрос о типе формы я выбрал первый вариант — Create position-based form (Layout Region). Размещаем форму на странице в нужном месте, меняем её размеры, рассчитывая на то, что в ней будет поле ввода и кнопка.

3. С помощью открывшегося дополнительного окошка Form Tools добавляем в форму одно Forms Edit Field (поле ввода) и кнопку Forms Button.

4. Открываем свойства Forms Edit Field, в поле Name меняем текст на WhatFind (так мы даем имя переменной, куда будет передаваться введенный пользователем текст).

5. Открываем свойства кнопки, в поле Text меняем текст на Поиск (это будет написано на кнопке).

6. Создаем файл findbygoogle.php, записываем его в папку Assets сайта. Я поместил этот файл в папку C:\NetObjects Fusion 7.5\User Sites\microsin\Assets\phpscripts\.

7. Выбираем в меню Go\Assets. Правой кнопкой создаем New File Asset, Name указываем произвольно (я набрал findbygoogle), кнопкой Browse выбираем наш файл findbygoogle.php, записанный в папку Assets сайта. Ставим галочку Always publish file.

8. Выбираем форму, на которой расположены поле ввода и кнопка для поиска. В её свойствах (окно со свойствами формы будет иметь название Layout Region Properties) на закладке General жмем кнопку Settings…, в поле Action жмем кнопку Browse и выбираем все тот же файл findbygoogle.php, записанный в папку Assets сайта (Files of type предварительно надо поставить в All Files (*.*), иначе файла с расширением .php мы не увидим). Method выбираем Post.

9. Выбираем Publish Site\Selected Page Only\Publish. В результате на сайте в папке cgi-bin должен появиться файл findbygoogle.php, и сайт должен нормально заработать вместе с поиском — после ввода чего искать и нажатия на кнопку Поиск должна открываться страница сайта Google с результатами поиска по Вашему сайту.

Это в общих чертах все. Здесь опущены детали реализации, которые нужно будет постепенно добавлять и отлаживать. Например, нужно фильтровать “битые” ссылки, которые могут указывать на уже несуществующие страницы Вашего сайта, нужно подменять в содержимом переменной $WhatFind пробелы и кавычки на их коды, ну и если Вы решили выводить не саму страничку Google, а только результаты поиска, то нужно правильно удалять заголовок и подвал страницы Google и затем подставлять свои заголовок и подвал. Кроме того, нужно правильно форматировать и выводить многостраничные результаты поиска.

[Ссылки]

1. Использование поисковой машины Google.
2. Регистрация Вашего сайта в поисковых каталогах.

HTML формы

Элементы формы такие как: текстовые поля, флажки, переключатели, кнопки и т.д., прописываются в контейнере <form>...</form>. Чаще всего элементы формы создаются при помощи тега

<input>. При помощи атрибута type указывается тип элемента.

Рассмотрим следующий код:

<form>
    <p><label>Введите логин:</label> <input type="text"></p>
    <p><label>Введите пароль:</label> <input type="password"></p>
    <p><button>Войти</button></p>
</form>

В браузере получим примерно такую форму:

Здесь:

  • тег <form> – является контейнером для элементов формы, в нем также можно использовать теги для разметки страницы;
  • тег <label>– создает метку для элемента формы;
  • тег <input> – создает элемент формы, при помощи атрибута type указывается какой именно элемент нужно отобразить:
    • <input type="text"> – создает текстовое поле;
    • <input type="password"> – создает поле для ввода пароля. Данный тег не требует закрывающего тега;
  • тег <button> – создает кнопку.

Текстовая область

При помощи тега <textarea> мы можем создать текстовую область, в которой пользователь сможет вводить длинные сообщения:

<form>
    <p><label>Введите ваше сообщение:</label></p>
    <p><textarea></textarea></p>
    <p><button>Отправить</button></p>
</form>

В браузере получим:

Выпадающий список

Тег <select> создает на странице список, каждое значение из списка прописывается между тегами <option>...<option>:

<select>
    <option>Значение 1</option>
    <option>Значение 2</option>
    <option>Значение 3</option>
</select>

В данном примере вы можете выбрать только одно значение из списка:

Чтобы была возможность выбрать несколько значений из списка, то используйте атрибут multiple с таким же значением: <select multiple="multiple">:

Флажки и переключатели

Чтобы создать на странице флажки, необходимо создать поле с типом checkbox: <input type="checkbox">:

<form>
    <p><label><input type="checkbox">Значение один</label></p>
    <p><label><input type="checkbox">Значение два</label></p>
    <p><label><input type="checkbox">Значение три</label></p>
</form>

Необязательно эти поля прописывать между тегами <label>...</label>.

Чтобы создать на странице переключатели, необходимо создать поле с типом radio, и указать атрибут name с каким-нибудь значением: <input type="radio" name="rad">.

<form>
    <p><label><input type="radio" name="rad">Значение один</label></p>
    <p><label><input type="radio" name="rad">Значение два</label></p>
    <p><label><input type="radio" name="rad">Значение три</label></p>
</form>

Обратите внимание, что значение атрибута nameв группе переключателей должно быть одинаковым, иначе переключатели будут работать как флажки, т.е. можно будет выбрать сразу все.

Если вы хотите по умолчанию сделать выбранным один из пунктов, то используйте атрибут checked с таким же значением: <input type="radio" name="rad" checked="checked">. Для флажков соответственно можно указать этот атрибут у нескольких пунктов сразу.

Поле для выбора файла

Используйте тип поля file, для возможности выбора файла с компьютера: <input type="file">:

<form>
    <p><input type="file"></p>
    <p><button>Отправить</button></p>
</form>

Вид в окне браузера:

Другие варианты кнопок

  • <input type="button" value="Название для кнопки"> – обычная кнопка.
  • <input type="image" src="Путь к картинке"> – кнопка в виде картинки. Через атрибут src указываем путь к картинке.
  • <input type="submit" value="Название для кнопки"> – кнопка для отправки данных формы.
  • <input type="reset" value="Название для кнопки"> – кнопка для очистки формы от введенный в нее данных.

Эти же значения атрибута type, кроме значения image, можно применить к кнопке, созданной при помощи тега <button></button>. В отличие от кнопок, созданных через тег <input>, эту кнопку можно размещать вне контейнера <form>...</form>, это не будет считаться ошибкой. Также внутри этой кнопки можно размещать другие строчные теги.

Видео к уроку

Возвращаем Яндекс-поиск в Firefox / Информационная безопасность, Законы, Программы, ПО, сайты / iXBT Live

Вероятно, поддавшись последним веяниям, компания Mozilla, в обновлении 98.0.1 от 14 марта, удалила поиск Yandex и Mail.ru в своем весьма популярном браузере Firefox, сделав активным, по умолчанию, поиск Google. Не то чтобы слишком печально, но неприятно, если привык именно к Яндексу. Однако, совсем немного потыкавшись в менюшках браузера, привычный поиск вполне можно вернуть без всяких сложностей. 

Пользователи, у которых Firefox обновляется автоматически до новой версии, при перезагрузке браузера после обновления, под строкой меню, получили сообщение, что Yandex-поиск был заменен на поиск Google. Об этом же можно почитать на официальной странице:

Соответственно, после такого обновления, вбивая текстовый запрос на поиск в строке адреса или в окошке поиска, даже если в браузере ранее по умолчанию был пользователем установлен поиск от Яндекса, теперь стал открываться Google. Также нет возможности выбрать «Яндекс», нажав на лупу в окошке поиска:

Заходя в «Настройки»  -> «Поиск» также нет возможности выбрать Яндекс (или Mail.ru):

И в значках поисковых систем он также пропал:

Таким образом, из настроек фактически его никак ввернуть нельзя. Однако, это можно сделать просто внимательно почитав руководство пользователя на сайте Mozilla. Один из способов оказался не закрыт. Заключается он в добавлении поисковой системы из адресной панели браузера. Чем и воспользуемся. 

Просто заходим на Яндекс, кликаем на адресной строке правой кнопкой мышки и, в выпадающем меню, жмем «Добавить „Яндекс“:

Теперь он также появляется в меню выбора поисковика (при нажатии на лупу в строке поиска буква „Я“):

Ну а теперь заходим в „Настройки“-> „Поиск“ и выбираем по умолчанию, в качестве поисковика Яндекс, который опять появился в меню:

Всё! Мы все починили. Теперь по умолчанию снова работает поиск от Яндекса:

Проверяем… При наборе поискового текста в адресной строке или в окошке поиска…..

… вываливаются поисковые запросы от Яндекс:

Чтобы Firefox больше так не пакостил, можно отменить автоматическую установку обновлений. 

Почему производитель „проглядел“ такую возможность простого восстановления поиска не очень понятно, ну и ладно. С mail.ru такой способ не сработал. 

 примеров и лучших практик — Smashing Magazine

Краткое резюме ↬ На веб-сайтах с большим количеством контента окно поиска часто является наиболее часто используемым элементом дизайна. С точки зрения удобства использования, раздраженные пользователи используют функцию поиска как последний вариант при поиске конкретной информации на веб-сайте. Если контент веб-сайта не организован должным образом, эффективная поисковая система не только полезна, но и имеет решающее значение даже для базовой навигации по веб-сайту. По сути, поиск — это спасательный круг пользователя для освоения сложных веб-сайтов.Лучшие дизайны предлагают простое окно поиска на главной странице и преуменьшают возможности расширенного поиска и области видимости.

O На веб-сайтах с большим содержанием окно поиска часто является наиболее часто используемым элементом дизайна. С точки зрения удобства использования, раздраженные пользователи используют функцию поиска как последний вариант при поиске конкретной информации на веб-сайте. Если контент веб-сайта не организован должным образом, эффективная поисковая система не только полезна, но и имеет решающее значение даже для базовой навигации по веб-сайту.По сути, поиск — это спасательный круг пользователя для освоения сложных веб-сайтов. Лучшие дизайны предлагают простое окно поиска на главной странице и преуменьшают возможности расширенного поиска и области видимости.

На практике веб-сайты имеют тенденцию к росту с течением времени , добавляя новый контент и, что более важно для нас, добавляя новые возможности навигации, такие как дополнительные разделы контента. Однако эти новые островки контента не обязательно соответствуют всей информационной архитектуре, которая была хорошо спроектирована и тщательно структурирована при первоначальном проектировании веб-сайта.Следствием этого является плохая схема навигации, которая больше раздражает, чем помогает, потому что содержимое кажется разбросанным повсюду, а не в отдельных, очень разных папках (на самом деле, это проблема, с которой мы столкнулись здесь, в Smashing Magazine, пару раз). недель назад).

Возможно, вы захотите взглянуть на следующие связанные сообщения:

Когда организация контента кажется беспорядочной и найти информацию почти невозможно, пользователи вряд ли решат просмотреть доступные разделы веб-сайта.Они с большей вероятностью либо покинут веб-сайт (нажав кнопку «Назад» и вернувшись к результатам поиска Google), либо обратятся к единственному спасательному люку, который у них (надеюсь) есть: священному окну поиска.

Больше после прыжка! Продолжить чтение ниже ↓

Хотя внутренний процесс поиска на веб-сайте очень важен, мы также не должны пренебрегать внешним интерфейсом, т. е. дизайном. Ниже вы найдете несколько, но важных рекомендаций, которые следует учитывать при создании дизайна окна поиска . Все приведенные ниже примеры связаны со страницами, с которых они были взяты.

Когда использовать поиск?

Не каждому веб-сайту нужен внутренний поиск ; однако вам часто приходится удовлетворять потребности пользователей в быстром доступе к информации, особенно когда веб-сайт растет. Если навигация сайта проста и интуитивно понятна, а статей «завалялось» очень мало и они не совсем соответствуют вашей схеме навигации, поиск и, следовательно, окно поиска не понадобятся.

Эффективная поисковая система позволяет пользователям контролировать поиск информации.Когда пользователи сталкиваются с относительно сложной навигационной системой, они сразу же ищут окно поиска, чтобы быстро и безболезненно добраться до конечного пункта назначения. По сути, это защитный рефлекс: поиск позволяет пользователям отстаивать свою независимость от веб-сайта, который может (непреднамеренно) раздражать пользователей и диктовать им, как им следует пользоваться Интернетом.

Следовательно, если ваш веб-сайт довольно большой и, вероятно, будет расти в будущем, рекомендуется подумать о добавлении функции поиска заранее.Ваши пользователи будут благодарны вам за это.

Поле поиска = Поле ввода + Кнопка отправки

И здесь дизайн окна поиска становится важным. Коробка должна быть хорошо видна, легко узнаваема и проста в использовании . Можно подумать, что окну поиска не нужен дизайн; в конце концов, это всего лишь два простых элемента: поле ввода и кнопка отправки. Какой вред может нанести плохой дизайн? Что ж, есть ряд вещей, которые могут пойти не так; например, текст, отображаемый в поле ввода, может быть трудночитаемым, или поле ввода может быть слишком коротким или слишком длинным (вы найдете больше примеров ниже).Некоторые дизайнеры даже предпочитают минималистское решение и вообще не предоставляют кнопку отправки: вместо нее приходится использовать клавишу «Возврат». Что ж, по нашему скромному мнению, это не самое полезное решение.

Действительно, дизайн окна поиска имеет большое значение. В идеале окно поиска должно идеально вписываться в общий дизайн веб-сайта, но при этом немного выделяться, когда это нужно пользователям. Добавление опций расширенного поиска может иметь преимущества, если пользователи ищут очень конкретную информацию, но простой поиск обычно работает лучше всего и должен быть представлен в виде поля ввода с кнопкой отправки.Помните, что кнопка отправки — это кнопка , что означает, что она должна быть разработана как одна. В частности, кнопка отправки должна выглядеть иначе, чем поле ввода. Мы не уверены, что стилизация кнопки отправки с использованием свойств border в CSS является хорошей идеей, потому что это сделало бы кнопку похожей на любой другой элемент дизайна. Вместо этого придание кнопке «вида кнопки» (то есть другого цвета, другой формы, значка поиска и т. д.) всегда будет работать.

TechCrunch (пример выше) использует один и тот же цвет для поля ввода и кнопки отправки.Цветовая схема идеально соответствует общей цветовой гамме сайта. Однако это приводит к проблеме: на первый взгляд очень сложно увидеть, где находится окно поиска. Пользователям приходится искать его, потому что он ничем не выделяется и его нелегко обнаружить. Хотя расположение окна поиска удачное, его легко не заметить, что не очень хорошо.

Поле поиска должно быть полем . Причина? Ваши посетители не читают страницу; они его сканируют. Наиболее распространенным дизайном функции поиска является поле с полем ввода, представляющим собой относительно широкое поле.Пользователи, как правило, ищут этот шаблон на веб-странице, поэтому рекомендуется избегать любого другого вида дизайна, такого как связанный текст или кнопка без текстового поля.

Поле поиска должно быть простым . Согласно исследованиям юзабилити, удобнее не отображать параметры расширенного поиска по умолчанию. Расширенный поиск, как следует из названия, является расширенным, и пользователи путаются, пытаясь его использовать. Одно исследование показывает, что большинство пользователей не знают, как использовать расширенный поиск или логический синтаксис поискового запроса.

Итог: если вы разрабатываете окно поиска, убедитесь, что оно выглядит так и максимально просто в использовании.

Частые ошибки в дизайне окна поиска

В ходе нашего исследования мы выявили пару проблем со многими дизайнами окна поиска. Не следует ожидать, что эти проблемы будут возникать часто, но, видимо, дизайнеры могут быть весьма изобретательны:

  • Размещение окна поиска внизу страницы или скрытие его в меню навигации.
  • Слишком короткое поле ввода; пользователи вынуждены использовать короткие неточные запросы, потому что более длинные запросы было бы трудно и неудобно читать.
  • Слишком маленькая кнопка отправки, чтобы пользователям приходилось очень точно наводить мышь.
  • Затруднение поиска окна поиска. Где здесь окно поиска? Поиск на Bridge55.com похож на поиск «Где Уолдо». На наш взгляд, выбор цветов здесь не особо помогает пользователям. Даже когда ящик найден, сложно понять, где нужно вводить поисковый запрос. Должен быть лучший способ сделать это.
  • Соединение окна поиска с другими формами, такими как окно информационного бюллетеня, раздражает.
  • Излишняя конструкция окна поиска, из-за чего его очень трудно обнаружить.
  • Перегрузка пользователя функциями расширенного поиска затрудняет выполнение простого поиска.
  • Неинтуитивное название кнопки отправки.
  • Оформление элементов дизайна без поиска в виде окна поиска.
  • Предоставление нескольких кнопок отправки.

Дизайн окна поиска в Википедии не совсем интуитивно понятен. Должны ли пользователи нажимать «Перейти» или «Поиск»? Подсказки появляются при наведении курсора мыши на кнопки: «Перейти» перенаправляет пользователя на страницу с заголовком, который точно соответствует их поисковому запросу, если он существует, а «Поиск» — это традиционный полнотекстовый поиск.Может быть, два элемента радио-ввода и кнопка отправки были бы более удобным дизайнерским решением?

Вопросы дизайна окна поиска

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

Где разместить окно поиска? Есть много возможностей, но только пара правильных. Наиболее удобным местом для пользователей будет верхний левый или верхний правый угол каждой страницы вашего веб-сайта, где пользователи смогут легко найти ее, используя обычный F-образный шаблон сканирования.Однако некоторые блоги, как правило, размещают окно поиска в нижней части (левой или правой) боковой панели. Вероятно, это не очень хорошая идея, но, скорее всего, это сделано из рекламных соображений.

Как назвать кнопку отправки? Рекомендуется давать кнопке поиска осмысленное имя, например «Поиск» или «Найти», а не «Перейти». Выделите кнопку поиска из всего дизайна окна поиска, показывая пользователям, куда нажимать.

Кнопка поиска на изображении ниже сбивает пользователей с толку.Они не смогут понять, является ли это окном поиска или чем-то еще, хотя описание в текстовом поле предполагает, что это так.

Где разместить заголовок окна поиска? Пользователи должны знать, что эта квадратная штука — окно поиска. И самый простой способ сделать это — сообщить вашим пользователям, что это так; например, дав ему название раздела. Согласно тестам отслеживания взгляда, опубликованным UXMatters, оптимальная позиция для заголовков разделов — верхняя левая область над окном поиска.Нам это кажется правдоподобным дизайнерским решением.

Как сделать так, чтобы пользователям было понятно, что они могут искать? Рекомендуется включить образец поискового запроса в поле ввода, чтобы подсказать пользователям, для чего можно использовать эту функцию. Но убедитесь, что этот текст удаляется, когда пользователь фокусирует мышь на поле ввода; это может быть достигнуто с помощью небольшого кода JavaScript.

Многие веб-сайты используют Google SiteSearch API, который получает результаты поиска из индекса Google.Если вы используете эту функцию, обязательно укажите ее рядом с окном поиска. Пользователям не нравятся неожиданные результаты, а алгоритм поиска Google может отличаться от алгоритма вашего сайта, что нарушает правило согласованности.

Витрина окна поиска

Обратите внимание, что важно не только то, как спроектировано окно поиска, но гораздо важнее, чтобы поиск работал правильно. По словам Якоба Нильсена, первая страница результатов — золотая: «Пользователи почти никогда не смотрят дальше второй страницы результатов поиска.Таким образом, важно, чтобы ваш поиск правильно расставил приоритеты результатов и чтобы все наиболее важные результаты отображались на первой странице».

1. Классика

Когда дело доходит до поисковых окон, самый простой дизайн обычно оказывается лучшим. Внешний вид традиционного поля ввода и кнопки отправки прост для понимания как опытными, так и неопытными пользователями; поэтому дизайнеры часто придерживаются значений по умолчанию и не возятся со святым Граалем.

Вот два классических шрифта от Jakob Nielsen и Fontshop, дизайн которых не изменился с первых дней существования Интернета.

2. Выделение кнопки отправки

Мы обнаружили, что многие дизайнеры предпочитают четко выделять кнопку отправки, чтобы выделить окно поиска. Очень часто поля ввода имеют цвет фона, который соответствует окружающим элементам дизайна. Следовательно, чтобы сделать блок более заметным, необходимы визуальные указатели. В таких ситуациях кнопка отправки часто имеет более яркий цвет или необычную форму.

Высеньте нынешние горизонты используют умную идею, чтобы сделать поле поиска.Весь макет веб-сайта в основном белый; только верхняя правая часть довольно красочная. Поле поиска находится в нижней части этой области.

3. Использование увеличительного стекла

За последнее десятилетие увеличительное стекло стало обычным значком для поиска и до сих пор очень часто используется, когда дизайнеры хотят передать функцию элемента поиска. Увеличительное стекло можно найти слева или справа, в поле ввода или рядом с кнопкой отправки, рядом с окном поиска или далеко от него.Мы не смогли определить конкретную тенденцию, поэтому в большинстве случаев дизайнерам остается только найти место, которое им больше всего подходит.

decodeunicode.org имеет очень креативный — и странный — дизайн. При нажатии на увеличительное стекло с буквой «А» над ним открывается модальное всплывающее окно с расширенными параметрами поиска. Не пытайтесь повторить это дома или на работе.

4. Использование иллюстраций

5. Скругление окна поиска

По какой-то причине дизайнеры до сих пор используют закругленные углы для полей ввода и кнопок отправки. Оба элемента обычно разрабатываются очень тщательно, с вниманием к мелким деталям, которые приводят к привлекательным и привлекательным окнам поиска. Мы не знаем, является ли этот подход более эффективным, но он определенно выглядит более удобным для пользователя (по сравнению с дизайном окон поиска по умолчанию).

6. Использование стрелок

Иногда кнопка отправки помечается не текстом, а символом или символом; например, стрелка. Стрелки обычно указывают вправо; в некоторых случаях они направлены вниз (что странно и довольно необычно).

Кнопка отправки в виде стрелки:

Стрелка вниз используется очень редко: Вот изображение увеличительного стекла тщательно интегрировано в поле ввода.Это хорошее решение, которое не раздражает пользователя, потому что дизайнер позаботился о том, чтобы заполнить пространство между изображением и введенным текстом.

7. Использование ручной работы

Ручная работа наносит ответный удар в этом дизайне окна поиска:

А в этом:

Это окно поиска выглядит красиво, но его трудно распознать.

Крошечное, безобидное, скромное поле поиска, написанное от руки.

Клавиша «Возврат» используется здесь для кнопки отправки:

8.Boxy design

Так как они называются search box , многие проектируют их соответствующим образом. К сожалению, такие дизайны часто довольно скучны и не очень приятны на вид.

9. Экспериментальные решения

Поэтому неудивительно, что мы нашли десятки действительно необычных, странных, креативных и абсолютно неуместных дизайнов.Вам решать, как строить новые идеи на идеях дизайнеров, представленных выше. Но, пожалуйста, имейте в виду: удобство использования должно иметь наивысший приоритет. Форма следует за функцией, а не наоборот.

На Uxmag.com окно поиска открывается после нажатия на ссылку «Поиск».

(al)

Текстовое поле со значком поиска в HTML и CSS, пользовательским интерфейсом окна мгновенного поиска

Окна поиска являются общим требованием почти на каждом веб-сайте, который вы создаете.Это очень полезно, когда пользователи хотят найти определенные данные, у них могут быть функции автозаполнения для помощи пользователям в поиске.

Но в этом посте я расскажу вам, как создать поле ввода или текстовое поле со значком поиска в HTML и CSS.

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

Пошаговое руководство по окну поиска HTML и CSS

Создайте index.html с его базовой структурой. 

 

    <голова>
        Текстовое поле со значком поиска в HTML и CSS — Учебное пособие с сайта www.codeofaninja.com
    
<тело>

Добавьте поле ввода внутри тега.

Также включите заполнитель с надписью «Поиск…» и идентификатор «search-text-input».

Загрузите значок поиска.

Поскольку мы хотим иметь поле поиска со значком поиска, загрузите значки увеличительного стекла, которые являются стандартными значками для поиска. Это должен быть прозрачный значок PNG. Размер зависит от того, что вам нужно, но в этом примере у нас есть значок 32 x 32 px. Поместите в тот же каталог, что и index.html.

Шаг 4. Добавьте элемент div со значком изображения внутри.

Тег «div» должен иметь идентификатор «button-holder».Мои значки увеличительных стекол были названы magnifying_glass.png. 

 <дел>

Добавьте волшебный CSS

У нас есть три элемента с идентификаторами, которые мы должны стилизовать. Опять же, вы можете поиграть или поэкспериментировать с CSS, чтобы удовлетворить ваши визуальные потребности. Я помещаю приведенный ниже код внутри тега «head», после тега «title». 

 <стиль>
#поиск-текст-ввод{
    граница-верх:тонкий сплошной цвет #e5e5e5;
    граница справа: тонкий сплошной #e5e5e5;
    нижняя граница: 0;
    граница слева: тонкий сплошной #e5e5e5;
    box-shadow:0px 1px 1px 1px #e5e5e5;
    плыть налево;
    высота: 17 пикселей;
    допуск:.8эм 0 0,5эм;
    контур:0;
    заполнение: .4em 0 .4em .6em;
    ширина: 183 пикселя;
}
  
#держатель пуговицы{
    цвет фона:#f1f1f1;
    граница-верх:тонкий сплошной цвет #e5e5e5;
    box-shadow:1px 1px 1px 1px #e5e5e5;
    курсор:указатель;
    плыть налево;
    высота: 27 пикселей;
    поле: 11px 0 0 0;
    выравнивание текста: по центру;
    ширина: 50 пикселей;
}
  
#держатель пуговицы img{
    поле: 4px;
    ширина: 20 пикселей;
}

Скачать исходный код

Вы можете загрузить весь код, используемый в этом руководстве, всего за $9.99 $5,55!

Интернет-ресурсы

Вы также можете использовать следующие ресурсы для других методов выполнения этой задачи.

Как создать кнопку поиска в текстовом поле?
значок поиска внутри окна поиска
текстовое поле со значком поиска в качестве фонового изображения

Если вы создали другое текстовое поле со значком поиска в HTML и CSS, дайте нам увидеть его, перетащив демо-ссылку в раздел комментариев ниже, мы рады видеть ваши собственные творения! Спасибо за визит и берегите себя.:)

Вот почему вы всегда должны заявлять об этом »

В атрибутах HTML

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше
Атрибут
Создание кнопки с помощью элемента HTML Button: вот как
Что делает кнопка в HTML: вот почему вы всегда должны объявлять ее ?
Указывает тип кнопки.

Пример кода
Нажмите на меня без причины!

Имя

Сбросить форму!

Отправить (отключено)

Типы кнопок

Существует три типа кнопок:

  • Отправить — Отправляет текущие данные формы.(Это значение по умолчанию.)
  • сброс — Сбрасывает данные в текущую форму.
  • кнопка — Просто кнопка. Его эффекты должны контролироваться чем-то другим (то есть с помощью JavaScript).

Раньше кнопки появлялись в основном в контексте форм, где поведение по умолчанию отправки имело смысл. Сегодня часто можно увидеть кнопки во всевозможных контекстах приложений в браузере, поэтому с первого взгляда на разметку не всегда понятно.Поэтому рекомендуется всегда явно объявлять тип кнопки.

Разница между

Передача смысла вспомогательным технологиям

Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана.Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .sr-only .

Классы .btn предназначены для использования с элементом <тип ввода="кнопка" значение="Ввод">

Кнопки контура

Нужна кнопка, но не яркие цвета фона, которые они приносят? Замените классы модификаторов по умолчанию на .btn-outline-* для удаления всех фоновых изображений и цветов на любой кнопке.

Начальный Среднее Успех Опасность Предупреждение Информация Светлый Темный

Размеры

Хотите большие или маленькие пуговицы? Добавьте .btn-lg или .btn-sm для дополнительных размеров.

Большая кнопка Большая кнопка

Маленькая кнопка Маленькая кнопка

Создайте кнопки уровня блока — те, которые охватывают всю ширину родителя — путем добавления .btn-блок .

Кнопка уровня блокировки Кнопка уровня блокировки

Активное состояние

Кнопки будут казаться нажатыми (с более темным фоном, более темной рамкой и вложенной тенью), когда они активны. Нет необходимости добавлять класс к

Отключенные кнопки, использующие элемент , ведут себя немного иначе: 

  Основная ссылка
Ссылка
Предупреждение о функциональности ссылки

.disabled класс использует событий-указателей: none , чтобы попытаться отключить функцию ссылки s, но это свойство CSS еще не стандартизировано. Кроме того, даже в браузерах, которые поддерживают pointer-events: none , навигация с помощью клавиатуры остается неизменной, а это означает, что зрячие пользователи клавиатуры и пользователи вспомогательных технологий по-прежнему смогут активировать эти ссылки. Поэтому, чтобы быть в безопасности, добавьте к этим ссылкам атрибут tabindex="-1" (чтобы они не получали фокус клавиатуры) и используйте пользовательский JavaScript, чтобы отключить их функциональность.

Плагин кнопки

Делайте больше с помощью кнопок. Управляйте состояниями кнопок или создавайте группы кнопок для дополнительных компонентов, таких как панели инструментов.

Переключить состояния

Добавьте data-toggle="button" для переключения активного состояния кнопки. Если вы предварительно переключаете кнопку, вы должны вручную добавить .active class и aria-pressed="true" к