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

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

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

Основные способы продвижения сайта (40%)
В данной статье хотелось бы отобразить основные методы поискового и не поискового продвижения сайта. Стоит сразу отметить, что именно в комплексном проведении данных методов Ваши результаты будут плодотворными, и Вы отхватите свою «львиную долю» целевой аудитории для web-ресурса. Но на описанных ниже методах возможности продвижения сайта не…

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

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

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

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

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

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

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

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

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

Новые технологии рекламы (40%)
1. Какая реклама эффективна? Для ответа сначала нужно поставить себе такие вопросы: что мы рекламируем, на какое пространство, время и аудиторию должна быть рассчитана наша реклама. На все эти вопросы мы и попытаемся ответить с помощью сравнительного анализа «старых» и новых технологий. 2. Виды рекламы в Интернет. Все они делятся всего…

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

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

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

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

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

Ваше имя: 

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

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

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

 

Частный дизайнер: наиболее частые заблуждения заказчика Вы опасаетесь работать с дизайнером фрилансером или другим частным разработчиком? Зря, ведь это такой же работник, как тот, что выполняет заказ, который Вы разместили в рекламном агентстве. Дизайнеры в принципе народ беспокойный, творческий. Вчера он пошел работать в рекламное агентство, а сегодня ему надоело работать на дядю, и он решил…

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

Что такое фирменный стиль? Фирменному стилю довольно трудно дать строгое словарное определение. Однако что такое фирменный стиль, понять и представить очень легко. Авангардные художники часто любят издеваться над одним из символов Америки – логотипом компании «Coca-Cola», вписывая в красный круг витиеватым фирменным шрифтом разнообразные тексты, от юмористических до…

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

Выпадающее меню на CSS и JavaScript Если на сайте слишком много ссылок в расположенном горизонтально главном меню, то для всех разделов может не хватить места. В таком случае необходимо делать выпадающее меню. Принцип работы подобных меню основан на том, что через события XHTML-документа вызывается функция JavaScript, которая динамически меняет CSS-свойства блоков, содержащих пункты меню…

Создание сайта с помощью фреймов Из огромного количества сайтов сети многие используют фреймы для тех или иных целей. Да фреймы можно использовать и с толком для сайта. С другой стороны неправильная реализация фреймов — огромная ошибка…