кнопка submit за пределами формы

Подробно о кнопке submit за пределами формы.

1. Кнопка submit за пределами тега form(form)
2. Кнопка submit за пределами тега formfor
3. Кнопка submit за пределами тега formjavascript

Скопировать ссылку



Кнопка за пределами тега form(form)

Итак... давайте вначале создадим форму, в которой "кнопка submit не работает..."

<form method="post">
<input name="text" type="text" value="">
</form>
===========================
<button type="submit">button</button>


Как может кнопка submit не работать?

Далее... попробуйте нажать на кнопку "Кнопка button за переделами form"

===========================
Кнопка button за переделами form

Кнопка submit не работает за пределами формы?

На приведенном примере Вы увидели... страница не перезагружается, что собственно и означает, что post не был отправлен? а это означает, что: submit не работает за пределами формы!

Давайте исправим... это через атрибут form! Для этого нам понадобится внести некоторые изменения в нашу форму!

В тег form добавим id

<form method="post" id="idform">

И в кнопку добавим атрибут form

<button type="submit" form="idform">Кнопка button за переделами form</button>

Теперь весь код с кнопкой за пределами формы:

<form method="post" id="idform">
<input name="text" type="text" value="">
</form>
===========================
<button type="submit" form="idform">Кнопка button за переделами form</button>


Живой пример кнопки за пределами form

Вам осталось протестировать нашу форму с кнопкой за пределами тега form:

===========================
Кнопка button за переделами form


Скопировать ссылку



Кнопка за пределами тега form(for)

Один из вариантов, когда использовать вместо кнопки тег label(хоть какая-то польза...)

Итак... давайте сразу перейдем к форме...

В в тег с "type submit" добавляем id.

И отдельно от формы тег label с атрибутом "for"!

<form method="post" action="#first_example2">

<input value="name" name="name">

<input type="submit" value="submit" id="s" style="opacity:0;">


</form>

=======================================

<label for="s">Submit</label>


Кнопка(label) за передали формы:

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

=======================================

Кнопка button за переделами form

Скопировать ссылку



Кнопка за пределами тега form(javascript)

Ну и как не сказать о "кнопке submit пределами form с javascript"...


Создадим форму:

<form id="form-id" method="post" action="#first_example3">
<input value="name" name="name">
</form>


Далее... создаем кнопку за пределами формы - в нашем пункте роль кнопки будет выполнять ссылка:

<a onclick="document.getElementById('form-id').submit();"> Кнопка button за переделами form </a>

Результат размещения кнопки за пределами формы:

Ну и далее разместим код с кнопкой за пределами form прямо здесь:

///////////////////////////////////////////////////////
submit

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---