- Можно ли вставить форму в HTML-таблицу?
- 6 ответов
- Form Inside a Table-HTML
- How to Create a Form Inside a Table?
- Step 1: Make a div Container
- Step 2: Design a Table
- Step 3: Create Form
- Html как поместить form в table
- 6 комментариев к записи “Html как поместить form в table”
- Как сделать форму внутри таблицы не создавая несколько таблиц?
Можно ли вставить форму в HTML-таблицу?
Я считаю, что таблица имеет определенную структуру, и это не может быть переплетено с другими структурами, но есть ли в этом порядок? Спасибо.
Таблицы предназначены для представления табличных данных. Вы, вероятно, должны использовать CSS для размещения форм. Можете ли вы дать больше контекста, почему вы можете использовать формы, встроенные в таблицы?
6 ответов
Нет. Согласно этому документу: http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1 таблица может содержать только следующие:
TABLE -- (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)> Но вы можете использовать что-то вроде этого
div.table < display:table; >div.table > form < display:table-row; >div.table > form > div.cell
Нет, вы не можете этого сделать. Я думаю, вы хотите, чтобы этот способ имел обе формы, выровненные в таблице, правильно?
После небольшого размышления я выбрал маршрут javascript. Я установил скрытые формы в конце таблицы. Эти формы содержат обязательные поля, и немного java обновляет свои значения до фактических полей в таблице. Спасибо всем за помощь и предложения!
Это будет проблема во всех HTML. включая как XHTML, так и HTML5.
Нет реальной необходимости иметь две формы в одной таблице, если вы хотите разместить их на нескольких строках. Чем больше таблица, тем больше времени требуется для загрузки и отображения браузера. Вместо этого дайте каждой форме собственную таблицу и поместите теги таблицы в теги формы, например:
За исключением того, что столбцы в каждой таблице не обязательно будут выровнены друг с другом. Что вообще отрицает цель использования таблицы (для выравнивания табличных данных).
Да! Нет проблем с HTML5. Теперь теги таблиц — это всего лишь стенография правил стиля таблицы.
Где вы читали это о HTML5? Я думаю, что этот w3.org/TR/html5/tabular-data.html#the-table-element довольно ясно показывает, что разрешено внутри таблицы.
Вы говорите, что таблицы реализуют коллекции? Элемент HTMLTableElement в ссылке c-smile явно не реализует коллекции.
Form Inside a Table-HTML
The HTML table model permits the authors to arrange data in the form of images, forms fields, images, formatted text, mini tables, and many more. Each table can have a corresponding description that provides a brief discussion of the table’s function. Furthermore, if users want to arrange the data smartly on websites, they can add forms inside the table cells.
This post explains the method for creating a form inside the table.
How to Create a Form Inside a Table?
You can create a table using the “ ” tag, then define table rows with the help of “ ” and use “ ” to add data inside the table. In the middle of the “ ” tag, utilize the “ ” element for creating a form in the table.
To create a form inside a table, follow the given instructions.
Step 1: Make a div Container
Initially, make a div container by using the “ ” tag. Also, add an “id” attribute and specify a name to the id for identification.
Step 2: Design a Table
Next, design a table using the “ ” tag. Then, define the table rows and table data inside the table. To do so, follow the stated steps:
- “ ” is used to insert the table rows inside the table.
- “ ” is deployed for putting the data inside the table rows.
Step 3: Create Form
Next, inside the “ ” opening and closing tag, create a form with the help of the “ ” element and define the following element in the form:
- “ ” element specifies the label for a field in a user interface.
- “ ” is used for making effective controls for web-based forms to accept user data. To do so, add “type” and “placeholder” attributes.
- “type” attribute determines the stated type of the defined input.
- “placeholder” attribute is utilized to add the value in the form field to display:
Html как поместить form в table
Иногда возникает ситуация, когда нужно разместить html-форму (form) внутри html-таблицы (table).
Например, есть таблица с некоторыми данными, а в первой строке этой таблице мы хотим расположить инпуты для ввода и добавления новой информации.
Скорей всего, первый код, который вы напишите по этому поводу, будет следующим:
Это неверный вариант!
Во-первых, этот код не валидный. Форма не может быть прямым потомком table, tbody и tr. Правда, может быть расположена внутри отдельной ячейки таблицы, то есть, между тегами
Во-вторых, этот код может не сработать как положено в определенных случаях. При клике по кнопке submit форма может не отправляться.
Именно с такой ситуацией столкнулся в процессе работы. Разместил форму внутри строки
. Все работало – замечательно. Валидно, не валидно, я не разбирался. Но, дело в том, что в данную таблицу выводились результаты поиска по технологии ajax, т.е без перезагрузки всей страницы. В строку поиска вводятся данные, а в таблицу выводятся найденные результаты, при этом обновляется только содержимое таблицы. Так вот когда таблица загружалась после ajax-запроса, то submit формы, внедренной таким неправильным способом в таблицу, переставал работать.
Для размещения формы в таблицу, предлагаю использовать следующий способ.
Форму объявить перед таблицей, и обязательно задать ей как-то идентификатор id (в моем примере Инпут разместите внутри таблицы где планировали, но в каждый input нужно добавить атрибут form=”myform”, значение которого будет указывать, к какой форме относится данный элемент.
Для нашего примера код изменится вот таким образом:
Данный вариант размещения элементов формы внутри таблицы – валидный и главное – должен работать в любых ситуациях.
В моем случае, после ajax-запроса, отправка формы заработала! Чего и вам желаю!
Кстати, раньше не доводилось сталкиваться с этим атрибутом form. Хотя уже достаточно долго занимаюсь веб-программированием. Задач таких, видимо, не попадалось. Но, обратите внимание, как много всего предусмотрено и учтено в языках для разработки. Можно решить, наверное, любую поставленную задачу и найти выход из любой ситуации.
Желаю вам, чтобы ошибки быстро выявлялись и исправлялись!
6 комментариев к записи “Html как поместить form в table”
Лучше сделать следующим образом, этот вариант будет влидным для старых браузеров. Отправка формы это важный элемент на сайте и кроссбраузерность тут обязательна.
Как сделать форму внутри таблицы не создавая несколько таблиц?
Насколько я знаю form можно использовать как inline элемент — если его в код таблицы вставить — его вынесет за пределы — то есть только внутрь элемента ТД.
Можно конечно код ПХП поменять и всю структуру, но пока интересует есть ли такая возможность
Задача следующая — подарки к каждому продукту. Каждый продукт имеет связанные подарки, которые можно добавить или не добавить (продукты с пониженной стоимостью). Таким образом для каждого подарка нужна форма для его добавления.
Можно, безусловно, переделать логику — то есть одна форма, которая принимает множественные значения, и потом для каждого делает действие (что есть правильно). но дешевый говнокодер решил этим не заморачиваться.
Собственно я ищу как сэкономить время и деньги заказчика, если возможностей нет — сообщу что надо переделывать логику, а не только верстку. В обычной версии работает как часы (таблица — а для каждого товара внутри таблица поменьше), а вот стал делать мобильную и понял, что не все так весело.
В таком случае делается одна форма, а item.id (идентификатор подарка) вешается на кнопку,в итоге имеем одну форму и множество кнопок, клики по которым отправляют инфу о связанном объекте на сервер, а множество форм с полями и сабмитами опять же не лучшее решение)
Григорий Васильков: Я бы одну форму сделал, а если данные аяксом отправлять, то можно и вовсе без формы, тут зависит от замысла. Я давно формы не делаю, поля собираю по другим принципам.