Делаем Submit красивее или “Как отправить форму…”

30.03.2008

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


<FORM ACTION="index.php" METHOD="POST" NAME="MyForm">
<INPUT TYPE="Text" NAME="MyTextField">
<INPUT TYPE="IMAGE" SRC="send.png">
</FORM>

Вот и все что нужно сделать. Заменить стандартную конструкцию

<INPUT VALUE="Отправить" TYPE="submit"/>

на

<INPUT TYPE="IMAGE" SRC="send.png">

Следует отметить что аттрибуты width, height, align остаются доступными для изображения.

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

<form> ... </form>

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

<a href="#" onclick="document.forms['MyForm'].submit();">Submit</a>

В JavaScript я не силен, но из кода можно понять что мы обращаемся к нашей форме по ее параметру NAME: forms[’MyForm’] а дальше делаем Submit. Тоесть, фактически, мы можем сделать аналог кнопки “Отправить” для любых элементов, которые имеют обработчик onClick. Удачи вам в экспериментах, и красивого сабмита :)

Автор: DeVoid Рубрики: PHP
Метки: , ,

Комментарии (14) на запись “Делаем Submit красивее или “Как отправить форму…””

  1. Alex пишет:
    01.04.2008 в 04:54

    спасибо очень помагло)

  2. Alex пишет:
    02.04.2008 в 04:07

    спасиб за инфу

  3. Виолетта пишет:
    03.04.2008 в 16:32

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

  4. Konan пишет:
    04.04.2008 в 00:33

    спасибо за информацию помогло)

  5. Konan пишет:
    04.04.2008 в 05:21

    спасибо нашел то что нужно

  6. Vladimir пишет:
    04.04.2008 в 12:12

    А <button> не рулит? та же самая функциональность без JavaScript плюс возможность изменять внешний вид по своему вкусу.

  7. Натали пишет:
    08.04.2008 в 23:39

    Прикольное, решение самое главно простое как все гениальное!

  8. Lev пишет:
    09.04.2008 в 05:26

    да

  9. Димон пишет:
    09.04.2008 в 16:33

    О, надо запомнить, пригодится, спасибо.

  10. Vadik пишет:
    10.04.2008 в 15:17

    Довольно распространенный способ сделать красивее submit

  11. franka пишет:
    10.04.2008 в 17:12

    Как все просто оказывается))) Спасибо!

  12. Ульяновск пишет:
    15.04.2008 в 01:00

    Насколько просто и сложно одновременно. Но спасибо что показали что и так просто.

  13. Метросексуал пишет:
    17.04.2008 в 00:34

    Формально атрибуты width, height, align не поддерживаются внутри тега input (по стандартам W3C). Но это уже дело верстальщика =))

  14. HardWare пишет:
    03.05.2008 в 21:45

    хм, но браузеры то принимают атрибуты?

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