Перейти к содержанию

Поле ввода поискового запроса

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

type="search"

Для создания поля поискового запроса на языке HTML5 присвойте атрибуту type элемента <input> значение search.

Старые версии браyзеров отобразят этот элемент формы как простое поле ввода текста.

В новых версиях браузеров реализованы дополнительные возможности для работы с такими полями.

Например, Safari для компьютеров Мас выводит дополнительный значок с крестиком, позволяющий очистить поле от введенной информации.

Кроме того, в этом браузере поля ввода поискового запроса автоматически отображаются с закругленными углами.

placeholder

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

Старые версии браузеров игнорируют этот атрибут.

  1. Placeholder(англ.) — заполнитель.
Код
<form action="https://www.example.org/search.php">
    <p>Поиск:</p>
    <input type="search" name="poisk" />
    <input type="submit" value="Искать" />
</form>
Результат
Код
<form action="https://www.example.org/search.php">
    <p>Поиск:</p>
    <input type="search" name="poisk" 
    placeholder="Купить компьютер"/>
    <input type="submit" value="Искать" />
</form>
Результат