Html формы с использованием таблица

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

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

 html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  xmlns="http://www.w3.org/1999/xhtml" lang="en-US">  Форма крупноформатной таблицы   http-equiv="content-type" content="text/html; charset=utf-8" />  rel="stylesheet" type="text/css" href="spreadsheet1.css" />   method="post" action="spreadsheet.html">  class="formdata" summary="Эта таблица содержит форму для ввода данных ежегодного дохода в течение 1999 - 2002 гг"> Ежегодный Доход 1999 - 2002   scope="col">1999   scope="col">2000   scope="col">2001   scope="col">2002    scope="row">Гранты   type="text" name="grants1999" id="grants1999" />  type="text" name="grants2000" id="grants2000" />  type="text" name="grants2001" id="grants2001" />  type="text" name="grants2002" id="grants2002" />   scope="row">Пожертвования   type="text" name="donations1999" id="donations1999" />  type="text" name="donations2000" id="donations2000" />  type="text" name="donations2001" id="donations2001" />  type="text" name="donations2002" id="donations2002" />   scope="row">Инвестиции   type="text" name="investments1999" id="investments1999" />  type="text" name="investments2000" id="investments2000" />  type="text" name="investments2001" id="investments2001" />  type="text" name="investments2002" id="investments2002" />   scope="row">Сбор средств   type="text" name="fundraising1999" id="fundraising1999" />  type="text" name="fundraising2000" id="fundraising2000" />  type="text" name="fundraising2001" id="fundraising2001" />  type="text" name="fundraising2002" id="fundraising2002" />   scope="row">Продажи   type="text" name="sales1999" id="sales1999" />  type="text" name="sales2000" id="sales2000" />  type="text" name="sales2001" id="sales2001" />  type="text" name="sales2002" id="sales2002" />   scope="row">Разное   type="text" name="misc1999" id="misc1999" />  type="text" name="misc2000" id="misc2000" />  type="text" name="misc2001" id="misc2001" />  type="text" name="misc2002" id="misc2002" />   scope="row">Всего   type="text" name="total1999" id="total1999" />  type="text" name="total2000" id="total2000" />  type="text" name="total2001" id="total2001" />  type="text" name="total2002" id="total2002" />    type="submit" name="btnSubmit" id="btnSubmit" value="Добавить данные" />

table.formdata  border: 1px solid #5F6F7E; border-collapse: collapse; margin: 1em 0 2em 0; > table.formdata th  border: 1px solid #5F6F7E; background-color: #E2E2E2; color: #000000; text-align: left; font-weight: normal; padding: 0.2em 0.4em 0.2em 0.4em; margin: 0; > table.formdata td  margin: 0; padding: 0; border: 1px solid #E2E2E2; > table.formdata input  width: 80px; padding: 0.2em 0.4em 0.2em 0.4em; margin: 0; border-width: 0; border-style: none; >

На рис. 6.15 показана полученная форма, очень похожая на электронную таблицу.

Рис. 6.15. Форма, напоминающая электронную таблицу

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

Рис. 6.16. Просмотр электронной таблицы в Excel

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

Для достижения такого эффекта прежде всего нужно создать форму внутри структурированной таблицы, используя элементы заголовка ( th ), где необходимо, и добавив элемент caption и атрибут summary , чтобы она была доступна альтернативным устройствам. Полный код данной таблицы был представлен выше. Перед тем как мы добавили CSS-код, она выглядела, как показано на рис. 6.17.

Рис. 6.17. Вид формы до применения таблицы стилей

Начать написание таблицы стилей для этой формы лучше всего с создания класса, содержащего все ее поля. Я назвала такой класс formdata:

 class="formdata" summary="Эта таблица содержит форму для ввода данных ежегодного дохода в течение 1999 - 2002 гг">

Для данного класса определена рамка толщиной в один пиксел сине-серого цвета, и свойству border-collapse задано значение collapse:

table.formdata  border: 1px solid #5F6F7E; border-collapse: collapse; margin: 1em 0 2em 0; >

Далее зададим стиль для заголовков колонок и рядов таблицы, т. е. для тега . Для этого достаточно обратиться ко всем элементам th, расположенным в таблице класса formdata:

table.formdata th  border: 1px solid #5F6F7E; background-color: #E2E2E2; color: #000000; text-align: left; font-weight: normal; padding: 0.2em 0.4em 0.2em 0.4em; margin: 0; >

Рис. 6.18. Вид формы после применения стилей для элементов table и th

Для создания редактируемой таблицы необходимо скрыть рамку полей формы и добавить рамку ячейкам таблицы. Поскольку в таблице только элементы input, для которых нужно задать стиль, являются текстовыми полями, мы можем легко обратиться ко всем элементам input этой таблицы через класс formdata; это позволит избежать необходимости добавления классов ко всем текстовым полям.

Добавим рамку для элемента td и зададим свойству border элемента input значение 0. Зададим ширину элемента input, поскольку нам известно, что вводимые данные не требуют много места. Затем зададим внутренние отступы, чтобы вводимый текст не приближался вплотную к краю поля:

table.formdata td  margin: 0; padding: 0; border: 1px solid #E2E2E2; > table.formdata input  width: 80px; padding: 0.2em 0.4em 0.2em 0.4em; margin: 0; border-width: 0; border-style: none; >

Вот и все! Если вы использовали этот прием, будьте уверены, что пользователь поймет, что таблицу можно редактировать. Удаление рамки вокруг полей формы только поможет пользователям, если они будут понимать, как заполнить форму, даже не поняв, что она присутствует!

Источник

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:

Источник

Как сделать форму внутри таблицы не создавая несколько таблиц?

Насколько я знаю form можно использовать как inline элемент — если его в код таблицы вставить — его вынесет за пределы — то есть только внутрь элемента ТД.

Можно конечно код ПХП поменять и всю структуру, но пока интересует есть ли такая возможность

Задача следующая — подарки к каждому продукту. Каждый продукт имеет связанные подарки, которые можно добавить или не добавить (продукты с пониженной стоимостью). Таким образом для каждого подарка нужна форма для его добавления.

Можно, безусловно, переделать логику — то есть одна форма, которая принимает множественные значения, и потом для каждого делает действие (что есть правильно). но дешевый говнокодер решил этим не заморачиваться.

Собственно я ищу как сэкономить время и деньги заказчика, если возможностей нет — сообщу что надо переделывать логику, а не только верстку. В обычной версии работает как часы (таблица — а для каждого товара внутри таблица поменьше), а вот стал делать мобильную и понял, что не все так весело.

В таком случае делается одна форма, а item.id (идентификатор подарка) вешается на кнопку,в итоге имеем одну форму и множество кнопок, клики по которым отправляют инфу о связанном объекте на сервер, а множество форм с полями и сабмитами опять же не лучшее решение)

Григорий Васильков: Я бы одну форму сделал, а если данные аяксом отправлять, то можно и вовсе без формы, тут зависит от замысла. Я давно формы не делаю, поля собираю по другим принципам.

Источник

Формы внутри таблицы

Всё равно неправильно. Количество строк может быть достаточно большим и делать всю таблицу на одну форму не хотелось бы.
Как можно правильно решить эту задачу?

Как обращаться к объектам на subform-е внутри формы, внутри еще одной формы?
У меня есть форма (Form1), в нее вложена подформа (SubForm1), а в неё еще одна (SubForm2). Как.

Как обращаться к объектам на subform-е внутри формы, внутри еще одной формы?
У меня есть форма (Form1), в нее вложена подформа (SubForm1), а в неё еще одна (SubForm2). Как.

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

Открытие одной формы внутри другой формы (подчиненная форма)
Добрый день. Проблема следующего характера. Создаю элемент подчиненной формы на главной форме.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> head> title>test/title> /head> body> table> tr> td>form action="lala.php">input type="checkbox" /> input type="submit" value="Сохранить" />/form>/td> /tr> tr> td>form action="lala.php">input type="checkbox" /> input type="submit" value="Сохранить" />/form>/td> /tr> tr> td>form action="lala.php">input type="checkbox" /> input type="submit" value="Сохранить" />/form>/td> /tr> /table> /body> /html>

Честно говоря, я не совсем понял, в чём проблема. Такая конструкция проходит валидацию, но устроит ли она тебя.

Сообщение от Humanoid

Сообщение от Humanoid

Ceran, надо что бы в форме была вся строка, состоящая из нескольких ячеек.

GаlаX, потому что строк много. Такие моменты у меня встречаются дважды. один из них — это список пользователей. У каждого указывается ФИО и несколько других параметров. Сейчас этих пользователей уже больше 30, а потом будут появляться новые. И каждый раз передавать всю эту информацию, в которой полезной является только одна строка, не хотелось бы. Всё равно придётся делать несколько кнопок «Сохранить», что бы знать какая именно строка изменилась.

Сейчас думаю сделать каждую строку в виде отдельной таблицы, состоящей всего из одной строки. Но боюсь, что из-за формы появятся отступы между этими таблицами в Опере (она делает отступы, где есть тег form). Да и размеры ячеек тогда могут быть разными в разных таблицах.

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

Источник

Читайте также: Doubles in java programming