Похожие статьи

КРОМЕ юзабилити и дизайна: содержательный сайт (44,16%)
Любой веб-ресурс сегодня раздираем двумя мощными силами - на первый взгляд, непреодолимыми и несовместимыми одновременно. С одной стороны, юзабилити и интерфейс требуют простоты, логичности и доступности – в общем, голого функционального минимализма. С другой стороны, развивающиеся веб-стандарты и технологии способствуют расцвету новых подходов к…

Этапы разработки логотипа компании (43,08%)
Логотип - это графическое представлен компании. Как правило, логотип состоит из названия компании и оригинального изображения, которое должно характеризовать основную деятельность компании. Иногда логотип называют фирменным или товарным знаком. От логотипа зависит узнаваемость компании среди потребителей. В истории мирового бизнеса известно немало…

Программа графоману (40%)
Хочу поделиться соображениями с юзерами, не склонными к играм, многомегабайтным музонам, фривольным картинкам или фильмам; обращаюсь к повелителям текстов и презентаций, рабам документов и отчетов и творцам романов и повестей, в просторечии — графоманам……

Автор: Земсков Юрий
www.ComputerLibrary.info

Написано для «CHIP Special»

Дата публикации 21-08-2005 19:17
Статья просмотрена 6890 раз

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

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

Назначение формы разъяснено текстом внутри нее

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

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

Похожие статьи

Использование интернет-форумов (39,34%)
В последнее время практически на любом сайте присутствует форум, где можно просто поговорить «за жисть», попросить помощи в решении какой-либо проблемы или самому помочь с решением. Одним словом, кладезь человеческих знаний, необходимо только подобрать ключик… Эта статья подскажет, как освоиться на интернет-форуме…

Проверка полей формы с помощью JavaScript (38,89%)
В целях безопасности всегда необходимо проверять введенные пользователем данные. Проверка клиентским JavaScript легко обходится отключением js в браузере и предназначена она не для борьбы со злоумышленниками, а для помощи тем, кто случайно допустил ошибку. Тоже очень благородное занятие :) Согласитесь?…

Электронные библиотеки (37,74%)
Сегодня предлагаю вам, уважаемые читатели, «пробежаться» по известным мне адресам интернет-библиотек в поисках художественной, научной и любой другой литературы. Постараюсь указать наиболее интересные проекты, но если что — не серчайте…

Слово в защиту Яндекса (37,74%)
Весенний сюрприз от Яндекса свалился владельцам сайтов и оптимизаторам как снег на голову. На большинстве оптимизаторских форумов только и говорилось, что об изменении механизма ранжирования результатов поиска, введенном Яндексом. Сайты, находившиеся на первых местах в результатах поиска, упали на десятки позиций, а на первых страницах оказались сайты, имеющие минимальное отношение к запросу…

Незаменимые помощники оптимизатора (36,92%)
Не стоит напоминать о важности раскрутки сайта для успеха в бизнесе. Множество компаний сейчас ведут свою деятельность в том числе и через Интернет, а следовательно, успех бизнеса прямо пропорционален успеху сайта. Вот тут-то и возникает большинство проблем. Статья поможет вам в решении этих непростых проблем, расскажет об инструментах для привлечения посетителей на ваш сайт…

← Раздел «Вебмастеру: Дизайн и верстка» | Комментарии (7) →

Ваше имя: 

Цифры с картинки:
Включите графику в браузере

Ваши комментарии:

Все поля формы обязательны для заполнения.
Комментарий: Любые HTML-теги в сообщениях запрещены.
Гиперссылки в комментариях не работают — добавлять спам бесполезно!
Максимальная длина комментария — 5000 символов.
Комментарии, не имеющие отношения к статье, будут удалены.

 

Разработка сайтов на первом этапе. Концепция и бриф. Итак, вы выбрали подрядчика для разработки вашего будущего сайта и провели с ним предварительные переговоры. Вам может показаться, что самое сложное в процессе разработки сайта уже позади, однако не стоит делать скоропалительных выводов. Именно сейчас для вас начнется кропотливая работа по сбору информации, анализу и принятию решений – финалом…

КРОМЕ юзабилити и дизайна: содержательный сайт Любой веб-ресурс сегодня раздираем двумя мощными силами - на первый взгляд, непреодолимыми и несовместимыми одновременно. С одной стороны, юзабилити и интерфейс требуют простоты, логичности и доступности – в общем, голого функционального минимализма. С другой стороны, развивающиеся веб-стандарты и технологии способствуют расцвету новых подходов к…

Сквозная навигация Сквозная навигация — это система связей (гиперссылок), облегчающих движение пользователя по сайту. Речь идёт о максимально возможном переплетении данных. Кроме того, наличие такой связи характеризует сайт как информативный. Считаю, будет правильным выделить несколько типов связи: связь между сервисами; вокруг события;…

CSS верстка сайта: макет в три колонки Создание с помощью CSS макета из трех колонок, который может послужить основой информационного сайта с «шапкой», правой и левой колонками меню, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет, но полностью на CSS блоках…

Цветной scrollbar — да или нет… В последнее время, в связи с приходом CSS в массы, особую популярность среди начинающих webmaster'ов получила возможность изменять цвет scrollbar'а окна браузера. Эта функция привлекла людей своей простотой, и нетребовательностью в знании языка. Все что остается сделать, это заменить цвета частей scrollbar'а по своему вкусу…

Разработка сайтов на первом этапе. Концепция и бриф. Итак, вы выбрали подрядчика для разработки вашего будущего сайта и провели с ним предварительные переговоры. Вам может показаться, что самое сложное в процессе разработки сайта уже позади, однако не стоит делать скоропалительных выводов. Именно сейчас для вас начнется кропотливая работа по сбору информации, анализу и принятию решений – финалом…