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

Humanoid · Регистрация: 12.06.2008

Студворк — интернет-сервис помощи студентам

Есть страница, в которой на каждой строке своя форма с кнопкой. Реализовал это примерно так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" ..... /></td><td><input type="submit" value="Сохранить" /></form></td></tr>
... таких строк несколько ...
</table>
 
</body>
</html>

Как видите, тег form открывается в одной ячейке и закрывается в другой. Хотя, это работает, но так делать нельзя. Валидацию не проходит. Пробовал

HTML5
1
<tr><form><td></td></form></tr>

и

HTML5
1
<form><tr><td></td></tr></form>

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

@Ceran · 11.03.2009, 23:56

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" />&nbsp;<input type="submit" value="Сохранить" /></form></td>
  </tr>
  <tr>
     <td><form action="lala.php"><input type="checkbox" />&nbsp;<input type="submit" value="Сохранить" /></form></td>
  </tr>
  <tr>
     <td><form action="lala.php"><input type="checkbox" />&nbsp;<input type="submit" value="Сохранить" /></form></td>
  </tr>
</table>
 
</body>
</html>

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

@GalaX · 12.03.2009, 02:25

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

Как видите, тег form открывается в одной ячейке и закрывается в другой.

это даже логически НЕПРАВИЛЬНО (не касаясь валидации)

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

... и делать всю таблицу на одну форму не хотелось бы.

почему?

Humanoid · 12.03.2009, 10:25 **[ТС]**

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

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

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

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

@GalaX · 12.03.2009, 10:45

div-ы

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

Humanoid · 12.03.2009, 11:47 **[ТС]**

В смысле, построить таблицу из div'ов? Наверное, будут разъезжаться, когда содержимое будет разных размеров?

@GalaX · 12.03.2009, 12:32

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

В смысле, построить таблицу из div'ов?

угу

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

Наверное, будут разъезжаться, когда содержимое будет разных размеров?

придется помучиться чтоб косяков не было, но сделать можно

Humanoid · 12.03.2009, 12:48 **[ТС]**

Печально всё это

В понедельник попробую. Спасибо.

@Ceran · 12.03.2009, 12:56

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

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

По-моему это и есть правильный путь. Лично я бы сделал для каждого пользователя свою таблицу (вернее написал бы генератор таблиц).
А чтобы тэг form не давал отступов, воспользуйся средствами CSS:

HTML5
1
form { margin: 0px; }

Это заставит тэг form отображаться без отступов, во всяком случае в IE, FireFox и Opera это работает как задумывалось.

Humanoid · 12.03.2009, 13:11 **[ТС]**

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

form { margin: 0px; }

Я об этом не подумал. Спасибо.

@skeef · 06.01.2015, 17:16

Если отвечать строго на вопрос, т.е. использовать таблицы, то валидным будет следующее решение:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table>
  <tr>
     <td>data A</td>
     <td>data B</td>
     <td>
 
       <form action="lala.php" method="post"> 
        <table>
           <tr>
              <td><input type="text" name = "name_a" /></td>
              <td><input type="text" name = "name_b" /></td>
              <td><input type="submit" value = "Сохранить" /></td>
           </tr>
        </table>
       </form>  
 
    </td>
  </tr>
</table>

А уже методами СSS добиваемся иллюзии одной таблицы ...

@DmitryB84 · 08.12.2019, 16:33

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form id="form1" action="lala1.php"></form>
<form id="form2" action="lala2.php"></form>
<form id="form3" action="lala3.php"></form>
 
<table>
  <tr>
     <td><input type="checkbox" form="form1"/>&nbsp;<input type="submit"  form="form1" value="Сохранить" /></td>
  </tr>
  <tr>
     <td><input type="checkbox" form="form2"/>&nbsp;<input type="submit"  form="form2" value="Сохранить" /></td>
  </tr>
  <tr>
     <td><input type="checkbox" form="form3"/>&nbsp;<input type="submit"  form="form3" value="Сохранить" /></td>
  </tr>
</table>

Формы отдельно, поля форм - отдельно.

Еще вариант отправлять данные через AJAX - там form не очень важен.

Humanoid · 08.12.2019, 17:22 **[ТС]**

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

По стандарту должен везде работать данный валидный код

Это HTML5 (http://htmlbook.ru/html/input/form), поэтому только с браузерами, которые его поддерживают.
А вообще, удобно.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

Humanoid Почетный модератор 11557 / 4352 / 452 Регистрация: 12.06.2008 Сообщений: 12,454
	12.03.2009, 10:25 [ТС]
	Ceran, надо что бы в форме была вся строка, состоящая из нескольких ячеек. GаlаX, потому что строк много. Такие моменты у меня встречаются дважды... один из них - это список пользователей. У каждого указывается ФИО и несколько других параметров. Сейчас этих пользователей уже больше 30, а потом будут появляться новые. И каждый раз передавать всю эту информацию, в которой полезной является только одна строка, не хотелось бы. Всё равно придётся делать несколько кнопок "Сохранить", что бы знать какая именно строка изменилась. Сейчас думаю сделать каждую строку в виде отдельной таблицы, состоящей всего из одной строки. Но боюсь, что из-за формы появятся отступы между этими таблицами в Опере (она делает отступы, где есть тег form). Да и размеры ячеек тогда могут быть разными в разных таблицах. Но всё же хотелось бы сделать всё одной таблицей. Неужели нет никакого способа, что бы в каждой строке была отдельная форма? 0

@GalaX 701 / 573 / 59 Регистрация: 18.11.2008 Сообщений: 2,147
	12.03.2009, 10:45
	div-ы предназначение их конечно не для табличных данных, но чтоб решить проблему наверное помогут 1

Humanoid Почетный модератор 11557 / 4352 / 452 Регистрация: 12.06.2008 Сообщений: 12,454
	12.03.2009, 11:47 [ТС]
	В смысле, построить таблицу из div'ов? Наверное, будут разъезжаться, когда содержимое будет разных размеров? 0

Humanoid Почетный модератор 11557 / 4352 / 452 Регистрация: 12.06.2008 Сообщений: 12,454
	12.03.2009, 12:48 [ТС]
	Печально всё это В понедельник попробую. Спасибо. 0