Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

<<< Добавление кнопки Вконтакте || PHP Кодировка страницы >>>

Submit картинкой

16.11.2011
Submit картинкой

Здравствуй уважаемый читатель блога LifeExample, ты помнишь как выглядели интернет ресурсы на заре становления сайтостроения? Сайты конца 20 века были просто деревянными, и чисто информативными, а дизайн был лишь намеком на лучшее будущее. И вот будущее потихоньку подходило, подкрадывалось, подползало и наконец пришло, сегодня зайдя во всемирную паутину можно долго сидеть с открытым ртом наслаждаясь великолепным дизайном того или иного ресурса. Анимированные кнопки, скругленные углы, тени от объектов, градиент и много других вкусностей веба, которые не могли себе позволить веб-мастера еще 10-ть или даже 5-ть лет назад, сегодня доступно каждому новичку.

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

1й способ

Самый простой для понимания и легкий в использовании способ заключается в использовании альтернативного типа– IMAGE, для отсылки данных на сервер.

Пример 1 (SUBMIT картинкой с помощью типа IMAGE):

Представим, что у нас есть некий SUBMIT с такими параметрами:

1
<input type="submit" name="send" value="Отправить" />

Для того чтобы заменить унылую кнопку на, кнопку соответствующую вашему дизайну заменим параметры в input на такие:

1
<input type=”image” name=”picture” src="…" />

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

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

2й способ

Самый не рациональный способ, но тем не менее рабочий, заключается он в использовании Java Script.

Пример 2 (SUBMIT картинкой с помощью Java Script):

1
2
3
<a href="#" onClick="document.send.submit();">
<img src="…" name="send" border="0" />
</a>

Также как и в первом варианте заменяем многоточие на путь к картинке и наслаждаемся рабочей альтернативой submit`a. У этого способа есть один недостаток – если в браузере будет отключен Java Script, то способ работать не будет.

3й способ

На мой взгляд, самый универсальный и самый рабочий способ, хоть и требует определенных танцев с бубном вокруг правил css.

Пример 3 ( SUBMIT картинкой правила css )

В submit`е прописываем класс sendsubmit, который будет заменять интерфейс кнопки картинкой.

1
<input type="submit" class="sendsubmit" name="send" value="Отправить" />

В файле стилей css прописываем следующее:

1
2
3
4
5
6
7
8
9
10
11
.sendsubmit {
width:  33px;  // длина кнопки
height: 33px; // высота кнопки
margin: 0;
padding:0;
border: 0;
background: transparent url(‘путь к картинке’) no-repeat center top;
text-indent: -1000em;
cursor: pointer;
cursor: hand;
}

Если параметр value должен совпадает с надписью на кнопке, то правило text-indent: -1000em можно опустить.

Мы рассмотрели три часто используемых способа для изменения внешнего вида кнопки SUBMIT. Каждый их этих способов имеет свои плюсы и минусы, для себя я выбрал третий способ и стараюсь использовать именно его, т.к. считаю этот метод более стабильным нежели два других. Каким из перечисленных трех способов, пользоваться выбирать тебе дорогой читатель. Если ты имеешь свою точку зрения на решения этой проблемы , не стесняйся, пиши в комментариях.

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Нравится

Комментарии

  • Гость

    Доброго времени суток! Почему-то при использовании 3его способа картинка режется( хоть и размеры кнопки выставил как размеры картинки.

  • Гость

    Извиняюсь… Почему-то через некоторое время стало норм…

  • Mark

    Ок, пишите если будут вопросы.

  • Михаил

    Спасибо! Все ОК!

  • Олег

    Спасибо! Статья мне помогла!

    • Mark

      Пожалуйста!

      Подписывайтесь на новые статьи, через rss либо по e-mail.

  • Владислав

    как указать путь отсылки текста?

    Текстовое поле

    Чекбокс

    Текстареа

    • Mark

      Что вы имеете ввиду? Уточните вопрос.

  • Илья

    Автору спасибо, если можно добавте как сделать чтобы когда кнопка disabled отображаласть или другая картинка или засвечивалась как нибудь, заранее спасибо

  • php-free.ru

    Спасибо за ценную информацию! давно хотел сделать нормальную кнопку, твоя статья мне помогла!

  • Оксана

    У меня почему то никак не получается изменить высоту кнопки, она как идет стандартная, так и не меняется, чтобы я там не ставила, из-за этого у меня половина картинки обрезается( Браузер: Опера 11.62

    • Возможно влияют другие CSS правила родительских элементов верстки.

  • taras

    Для того чтобы не резало, надо убрать коментарии:
    // длина кнопки
    // высота кнопки

  • Натусик

    Скажите пожалуйста…а какое значение имеет слово «transparent?» Если и без него кнопка отображается!?

  • Натусик

    Я имела ввиду в 3-ем варианте… слово “transparent.”

  • transparent — Устанавливает прозрачный фон.
    В принципе можно и без него обойтись. Единственное, мне кажется в некоторых версиях IE, все таки может понадобиться данной свойство.

    • Натусик

      Понятно! Спасибо за ответ!

  • tiaga

    а не подскажите как сделать, что бы при нажатии на кнопку submit она заменалась другой — например «загрузить» нажимаем — «Загружаеться»

    • Подскажу. С помощью JavaScripta можно, в часности с библиотекой jQuery очень удобно это реализовать. Читайте про событие click();

  • jeinictroykom

    Великолепный блог. Хорошо посещаем. Так держать…:)

  • jeinictroykom

    Великолепный блог. Много интересного. Так держать…:)

  • Олег

    Спасибо, помогло)

  • Здравствуйте, подскажите пожалуйста,что мне делать, очень охото заменить «отправить» картинкой, пытался первым способом, картинка появляется , но данные не передаются.У меня файла css вообще нету, как я понимаю, то необходимо создать example.css ? и в нем прописать данные

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .sendsubmit {
    width:  33px;  // длина кнопки
    height: 33px; // высота кнопки
    margin: 0;
    padding:0;
    border: 0;
    background: transparent url(‘путь к картинке’) no-repeat center top;
    text-indent: -1000em;
    cursor: pointer;
    cursor: hand;
    }

    В качестве обработчика использую php

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <?
    $kuda='моя_почта@gmail.com';//куда отправлять почту?
    $zagolovok='сообщение с сайта';
    $headers='Content-type: text; charset="utf-8"';

    if (isset($_POST['ok'])){
        //если существует переменная, значит начнем получать информацию из формы
        $fio=$_POST['fio'];
        $email=$_POST['email'];
        $tel=$_POST['tel'];

        $messages=$text."\n".$email."\n".$tel."\n".$fio;

        if (mail($kuda,$zagolovok,$messages,$headers)) echo ('<center><p style="color: green">Ваше сообщение отправлено <br>Мы вас любим :)</br></p></center>');
        }


    ?>

    Пожалуйста помогите с этим, как правильно все прописать?, очень надеюсь на вашу помощь.

  • Lora

    Спасибо за полезный материал!

  • Сашка

    Спасибо огромное!

  • Екатерина

    Спасибо! Третий способ оптимален! Особенно без знаний Java:)

  • ViktorF

    День добрый!
    Подскажите как сделать, что бы картинка кнопки оказалась внутри поля ввода. В моём примере, картинка получается меньше высоты формы ввода текста и должна находиться внутри него (как маленькая клавиатура на главной яндекса, там правда совсем по другому реализовано). Просто на z-index + position не реагирует, а с помощью margin только форму на картинку удаётся положить.

  • Вадим

    Спасибо! Первый способ подошёл. Я правда его чуток доработал, добавив реагирование на мышь =)

  • urban

    А вот у меня вообще какая-то фигня.
    Делаю все по 3 способу, в коде вот видно, что путь к картинке правильный http://c2n.me/3hDeVvs
    но на странице только текст кнопки, сама он не отображается. Пробовал png и jpg

  • Север

    Спасибо Большое !!! — за сэкономленные нервные клетки ))

  • Сергей

    Чтоб не использовать text-indent: -1000em, что очень странно на самом деле. Можно просто значение оставить пустым: value=»»

  • ealnye-otzyvy.info

    Важно, что filter применён к родительскому блоку, иначе он как и box-shadow, border-radius и border применяется к картинке до обрезки. Закруглить углы мне не удалось. Нашёл он-лайн сервис подбора параметров clip-path Над первой картинкой есть элемент в виде закругленной стрелочки, фон у которого — продолжение картинки? Если бы не было теней у блока, то можно было бы вставить белое png-изображение с прозрачностью в месте закругленной стрелочки. Как можно сверстать такой элемент, как на изображении, в случае с тенью у блока?

  • Виталий

    Здравствуйте подскажите пожалуйста как можно сделать чтобы кнопка менялась, то есть в моем случае мне нужно чтобы при правильном воде капчи кнопка менялась на другую картинку заранее благодарю

  • Ілля

    Щиро дякую!

  • Оставить комментарий

    Не отвечать

    Подписаться на комментарии к этой статье по RSS

    Яндекс.Метрика