Html как поместить form в table

Добрый день!

Иногда возникает ситуация, когда нужно разместить html-форму (form) внутри html-таблицы (table).

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

Скорей всего, первый код, который вы напишите по этому поводу, будет следующим:

Это неверный вариант!

Во-первых, этот код не валидный. Форма не может быть прямым потомком table, tbody и tr. Правда, может быть расположена внутри отдельной ячейки таблицы, то есть, между тегами <td></td>.

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

Именно с такой ситуацией столкнулся в процессе работы. Разместил форму внутри строки <tr></tr>. Все работало – замечательно. Валидно, не валидно, я не разбирался. Но, дело в том, что в данную таблицу выводились результаты поиска по технологии ajax, т.е без перезагрузки всей страницы. В строку поиска вводятся данные, а в таблицу выводятся найденные результаты, при этом обновляется только содержимое таблицы. Так вот когда таблица загружалась после ajax-запроса, то submit формы, внедренной таким неправильным способом в таблицу, переставал работать.

Для размещения формы в таблицу, предлагаю использовать следующий способ.

Форму объявить перед таблицей, и обязательно задать ей как-то идентификатор id (в моем примере id=”myform”). Инпут разместите внутри таблицы где планировали, но в каждый input нужно добавить атрибут form=”myform”, значение которого будет указывать, к какой форме относится данный элемент.

Для нашего примера код изменится вот таким образом:

Данный вариант размещения элементов формы внутри таблицы – валидный и главное – должен работать в любых ситуациях.

В моем случае, после ajax-запроса, отправка формы заработала! Чего и вам желаю!

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

Желаю вам, чтобы ошибки быстро выявлялись и исправлялись!

Понравилась статья? Не забудьте поделиться с друзьями и коллегами:

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

6 комментариев к записи “Html как поместить form в table”

  1. Вадим

    В IE8 submit почему-то не заработал, а жаль. :-(
    Клик остается без ответа.
    В Chrome всё работает.

  2. Z-site.ru

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

  3. Z-site.ru

    Реализуйте возможность добавление Html кода в комментарии.

    • Алексей Ершов

      В тегах pre можно добавить.

  4. Z-site.ru

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

  5. Олег

    Ай малаца! Не в бровь, а в глаз! Именно так и никак иначе. Все просто, продуманно и логично. Главное валидно. Все заработало.

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

Для размещения кода в комментарии используйте теги <pre> </pre>, например:


Подписаться, не комментируя