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

 

Элемент form используется как контейнер, а 2 остальных элемента как поле для ввода информации и кнопки.

Вы наверное заметили, что мы используем атрибут placeholder, но это сейчас не важно т.к. мы затронем эту тему позже.

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

Ниже вы можете увидеть что у нас получается:

Отметьте: когда вы добавляете элементу float: left, то вам не обязательно приписывать display: block.

Атрибут placeholder предназначен для отображения текста в поле для текста до тех пор, пока на него не нажали. После клика, текст исчезнет, и пользователь может набирать то, что он хочет. Теперь для этих целей нам не нужен JavaScript!

Браузеры, которые поддерживают данный атрибут:

  • Firefox 3.7+
  • Safari 4.0+
  • Chrome 4.0+
  • Opera 11+

Для тех браузеров, которые поддерживают данную фичу, напишем следующий CSS код:

Для тех браузеров, которые ещё или уже не поддерживают атрибут placeholder, мы создаём специальный CSS и Javascript код, который спасёт ситуацию.

Я использую Modernizr для того, чтобы определить поддерживает ли браузер HTML5 атрибут placeholder или нет. Всё что нам понадобится так это написать небольшой фрагмент кода на JavaScript, а Modernizr уже решит в какой момент его задействовать.

 

Что касается HTML5 атрибута placeholder, то если браузер его не поддерживает, то Javascript вступит в игру и сделает своё дело.

Материал переведен из зарубежного источника. И представлен исключительно в ознакомительных целях.