php, java
статьи, книги
рефераты, ГДЗ

Бесплатные ключи и сброс
пробной версии для Касперского

Все для cs 1.6

Самые лучшие сеты моделей и избранные подборки девушек

Четверг, 06 Авг 2020, 11:07:17

Приветствую Вас Гость | RSS
Главная | Каталог статей | Регистрация | Вход
Меню сайта

ФИЗИКА!!! NEW!!!

Русский!!! NEW!!!

Категории раздела
Дизайну, графика и баннеры [17]
Советы, примеры, уроки, заметки по дизайну, графике и баннерам
PHP - примеры скриптов [21]
PHP - примеры скриптов
Программирование и заработок [114]
Программирование на самых популярных языках, заметки о заработке, оболочки
Статьи по поисковой оптимизации [9]
Статьи по поисковой оптимизации
php и базы данных [14]
Хитрости при программировании php, заметки по базам данных
Заработок в Интернете [7]
Материалы по заработку в интернет

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Главная » Статьи » Статьи по Web дизайну » Программирование и заработок

Повышаем юзабилити формы поиска
 

Большинство серьезных сайтов имеет внутренние поисковые системы с развитым синтаксисом запросов и всем необходимым для того, чтобы посетитель нашел нужную ему информацию, однако все это богатство, как правило, скрыто за ссылкой «расширенный поиск». А вот маленькая форма поискового запроса доступна на каждой странице в верхнем правом углу сайта (так уж повелось).

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

Внешне вполне допустимое решение, но в реальности все не так. Чтобы отправить поисковый запрос пользователю придется сначала кликнуть внутри формы мышкой, потом выделить объяснительный текст, затем удалить его уже с клавиатуры, вписать свой поисковый запрос и нажать кнопку поиска или 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=" &gt; " />
</form>

Эта форма передает запрос пользователя серверному скрипту search.php. Сама форма очень проста и состоит из текстового поля для ввода запроса и кнопки отправки данных на сервер. Фраза «Поиск», вписанная в текстовое поле, задана атрибутом value. C помощью события документа onfocus мы запускаем код на JavaScript. Событие onfocus возникает, когда элемент получает фокус от указательного устройства или при навигации табуляцией. Можно использовать событие onclick, срабатывающее при клике на элемент, но оно не так универсально.

В любом случае, событие запускает программный код. В этот раз код не вынесен в отдельную функцию, а записан в качестве значения. this.value = ""; фактически означает «установить значение текущего (this) поля равным пустоте».

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

onmouseover=this.value = ""; this.focus();

Событие onmouseover срабатывает при прохождении курсора мыши над объектом, а this.focus() активизирует текущий объект.

Подобные мелочи, пожалуй, и отличают хороший дизайн от «неплохого».

Категория: Программирование и заработок | Добавил: ceg (08 Авг 2007) | Автор: linuxcenter.ru
Просмотров: 211 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Имя *:
Email *:
Код *:
Форма входа

Реклама

Поиск

Друзья сайта
  • Играете в Counter-Strike??? ВАМ СЮДА!!!

  • Copyright CEG © 2020