Большинство серьезных сайтов имеет внутренние поисковые системы с развитым синтаксисом запросов и всем необходимым для того, чтобы посетитель нашел нужную ему информацию, однако все это богатство, как правило, скрыто за ссылкой «расширенный поиск». А вот маленькая форма поискового запроса доступна на каждой странице в верхнем правом углу сайта (так уж повелось).
Причем далеко не всегда текущий дизайн может выделить для нее достаточно места и тогда приходится экономить каждый пиксель. Например, разъяснять назначение формы текстом внутри нее, как на картинке.
Внешне вполне допустимое решение, но в реальности все не так. Чтобы отправить поисковый запрос пользователю придется сначала кликнуть внутри формы мышкой, потом выделить объяснительный текст, затем удалить его уже с клавиатуры, вписать свой поисковый запрос и нажать кнопку поиска или enter. К счастью простой код на JavaScript избавит посетителей от ненужных им действий, а нас — от ненужных нам, но вполне заслуженных, претензий.
<form id="searchf" action="/search.php" method="get">
<input type="text" name="searchstring" id="searchstring" value="Поиск" onfocus=this.value = ""; />
<input type="submit" value=" > " />
</form>Эта форма передает запрос пользователя серверному скрипту search.php. Сама форма очень проста и состоит из текстового поля для ввода запроса и кнопки отправки данных на сервер. Фраза «Поиск», вписанная в текстовое поле, задана атрибутом value. C помощью события документа onfocus мы запускаем код на JavaScript. Событие onfocus возникает, когда элемент получает фокус от указательного устройства или при навигации табуляцией. Можно использовать событие onclick, срабатывающее при клике на элемент, но оно не так универсально.
В любом случае, событие запускает программный код. В этот раз код не вынесен в отдельную функцию, а записан в качестве значения. this.value = ""; фактически означает «установить значение текущего (this) поля равным пустоте».
События обеспечивают большой простор для деятельности, например, есть форма, мимо которой посетитель не должен пройти. Используя приведенный ниже код, мы можем поймать курсор мыши, очистить форму ввода и переместить в нее курсор ввода с клавиатуры.
onmouseover=this.value = ""; this.focus();Событие onmouseover срабатывает при прохождении курсора мыши над объектом, а this.focus() активизирует текущий объект.
Подобные мелочи, пожалуй, и отличают хороший дизайн от «неплохого».
