July 15, 2022

Создание поля поиска в html/css

Базу для поля поиска можно создать на основе тега <form>, в который будут вложены два тега <input>. Первый тег отвечает за поле поиска, второй — за кнопку «Поиск».

В HTML5 для поиска существует специальное поле с типом «search». Оно отличается от текстового тем, что браузеры Chrome, Safari и IE10, добавляют крестик в правой части поля для быстрой очистки введенного текста. Атрибут placeholder позволяет выбрать текст для автозаполнения поля.

Второй <input> создает кнопку отправки данных и имеет тип «submit». Атрибут value определяет, что будет написано на кнопке.

<form> 
  <input type="search" name="text" class="search" placeholder="Что вы хотите найти?">
  <input type="submit" name="submit" class="submit" value="Найти">
</form>

Такое поле поиска выглядит очень скромно, но его можно изменять с помощью css.

Пример 1

В данном примере были изменены цвет поля ввода и кнопки. В помощью атрибута border-radius скруглены края. Текст на кнопке заменен иконкой с помощью атрибута background.

Пример 2

Добавляем анимацию с помощью transform.

html-код как в предыдущем примере.

В первую очередь назначаем для тега <form> позиционирование relative, а для input - позиционирование absolute. Привяжем поле ввода и кнопку к верхнему левому краю формы.

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

С помощью функции свойства transform translate() - можно переместить элемент с его начальной точки. Функция принимает два параметра — один для перемещения по оси X, второй — по оси Y.

Свойство transitions предоставляют способ контролировать скорость анимации.