Проблема, которую мы будем решать, заключается в том, что обычные кнопки, сформированные тегом <input type=”submit”> выглядят в разных браузерах по разному. Кроме того, при изменении стандартного размера кнопки, некоторые браузеры отображают ее просто ужасно.

Оказывается можно приложить немного усилий и из обычной кнопки по умолчанию сделать стильную и модную, да еще и во всех популярных браузерах кнопка будет выглядеть одинаково хорошо (ну или почти во всех, почти хорошо). Теперь поговорим об этом подробно.

Каждый браузер имеет свое мнение

Препарировать будем для троицы популярных браузеров:

• Mozilla Firefox 3.5
• Opera 9.63
• IE6 (с оглядкой на IE7, чтоб ему!)

Вот как интерпретируют простой код <input type=”submit”> наши подопытные: В принципе, ничего криминального. Вот только пунктирная обводка кнопки в браузере FF, при попадании на нее фокуса ввода, смотрится не красиво. Ее можно убрать. Для этого укажем следующее свойство CSS для кнопки класса button:

.button::-moz-focus-inner { border: 0; }

Теперь давайте сделаем большую модную кнопку и ужаснемся ее внешнему виду по умолчанию.

Верстаем большую модную кнопку

Как не странно, но кнопка подчиняется заданным через CSS размерам. Поэтому смело добавляем кнопке класса button директивы ширины и высоты:

 .button{ width:175px; height:55px; } 

Теперь посмотрим, каким образом выглядит наша большая кнопка в трех подопытных браузерах: Своим уродством поражает кнопка в IE6. Кстати,  в IE7 она выглядит ни чуть не лучше. Поэтому кнопка по умолчанию нам не подходит и мы будем верстать свою собственную кнопку.

Верстка кнопки

Итак, ширину и высоту для кнопки мы уже задали, тем самым сформировали кнопку такого размера, как нам надо.

Остается превратить уродину в красавицу.

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

В одном из предыдущих видеоуроков я наглядно продемонстрировал принципы создания графического файла, содержащего оба состояния кнопки и ее верстку по технологии раздвижных дверей с применением технологии спрайтов.

Данный графический файл мы будем применять в качестве фона для нашей кнопки (свойство CSS background-image).

Фоновое изображение будет перемещаться при наведении на кнопку указателя мыши и при клике по ней. В результате будет создавать ощущение того, что кнопка нажимается.

Вот как выглядит фоновое изображение для кнопки:

• В случае по умолчанию background-position:0 (можно не указывать).
• При наведении мыши нужно переместить фоновое изображение вверх на высоту одной секции background-position:0 –56px (горизонтальное смещение не происходит, изменяется только вертикальная координата).
• При клике необходимо сместить фон еще на одну секцию вверх background-position:0 100%.

Вместе со смещением фона неплохо было бы смещать и текст на кнопке, это добавит реалистичности в ощущение нажатия.

При наведении на кнопку указателя мыши я смещаю текст вниз на высоту тени под кнопкой. Получается весьма реалистично.

Надпись внутри кнопки смещается путем задания свойства padding.

• При наведении указателя мыши padding-top: 4px

Дополнительной наглядности можно добиться путем смены указателя мыши при наведении на кнопку, со стрелки на лапку. Сделать это очень просто, всего-на-всего указать свойство cursor:pointer.

Изменение стиля кнопки при наведении мыши и клике

Здесь есть два пути: с использованием JavaScript-ов и без них. Понятно, что самый простой и приятный способ, без использования скриптов, не работает в IE, но мы все равно с ним познакомимся.

Способ без использования JavaScript

Для смены стилей при наведении указателя мыши и при клике можно использовать псевдоклассы :hover и :active.

Для кнопки класса button при наведении, благодаря псевдоклассу :hover, будет применен следующий стиль:

.button:hover{
    background-position:0 -56px;
    padding-top:4px;
}

Свойство background-position сместит фоновое изображение во второе положение, а отступ padding-top сместит надпись внутри кнопки.

Применить нужные свойства при клике можно используя псевдокласс :active

 .button:active{ background-position:0 100%;} 

Свойство background-position смещает фоновое изображение в третье положение при клике мыши.

Вышеописанный способ не подходит для IE6, т.к. в нем псевдоклассы :hover и :active работают только для тега ссылки a. Не смотря на то, что IE7 нормально работает с этими псевдоклассами, из-за своей глючности он ужасно интерпретирует данный код (добавляет несуществующие бордеры, смещает кнопку при клике).

В результате этот способ применять можно, т.к. IE6 отживает свое, пользуются им только из-за того, что он предустановлен в Windows XP; IE7 – глючный недобраузер, на смену которому пришел IE8.

Но все же, если вы хотите сделать динамическую кнопку и для IE, то следующий способ вполне пригодится.

Способ с использованием JavaScript

К тегу, формирующему кнопку применяем инструкции:

• Функция OnMouseOver – срабатывает при попадании указателя мыши в границы объекта и применяет инструкции, расположенные в ее содержимом.
• Функция OnMouseOut – содержимое применяется при выходе указателя мыши за границы объекта.
• Функция OnMouseDown – срабатывает при нажатии клавиши мыши.
• Функция OnMouseUP – срабатывает при отпускании клавиши мыши.

Посредством этих четырех функций можно реализовать весьма сносное отображение кнопки во всех популярных браузерах.

Желающие могут познакомится с CSS и HTML-кодом, иллюстрирующим все вышенаписанное (обязательно посмотрите исходный код страницы, там спрятаны подробные комментарии).

Отправка данных формы ссылкой

Можно и вообще не заморачиваться с кнопками, а сделать отправку данных формы при помощи ссылки. А уж как из ссылки сделать кнопку мы с вами, уважаемый читатель, весьма подробно обсуждали.

Теперь рассмотрим, как формируется такой скрипт.

Вот форма отправки:

<form name="myform" action="handle-data.php">
    Поиск: <input type="text" name="query">
    <a href="javascript: submitform()">Найти</a>
</form>

Данный кусок HTML, как вы наверное догадались, формирует строку ввода поискового запроса, подтверждением для начала поиска является клик по ссылке “Найти”.

Кликнув по ссылке “Найти” посетитель запустит JavaScript, который и отправит данные из формы обработчику:

<SCRIPT language="JavaScript">
    function submitform(){
        document.myform.submit();
    }
</SCRIPT>

Данный скрипт осуществит отправку (метод submit() ) содержимого полей формы обработчику.

Будьте внимательны! Не допускайте попадания в форму myform элементов с name=”submit” , иначе скрипт отправки будет обращаться к этому элементу, а не производить передачу данных.

Желающим более подробно разобраться с JavaScript предлагаю ознакомится с моими видеоуроками, посвященными программированию на данном языке. Непосредственно в пятом видеоуроке по JavaScript я рассказываю об особенностях обращения к форме по атрибуту name.

С уважением, Андрей Морковин.