Смешивание HTML-формы и таблицы

Question

Для стандартной страницы формы «добавить элемент» желательно иметь две кнопки отправки: кнопку «ОК» и кнопку «отмена», где первая отправляет форму в один URL, а вторая ПОЛУЧАЕТ какой-то другой URL .

Это, очевидно, означает, что необходимы две отдельные ФОРМЫ, и, если они представлены в виде таблиц, разметка будет выглядеть следующим образом:

<form action="add.html" method="post">
 <table>
  <tr>
   <td>Enter data:</td><td><input type="text" name="data"/></td>
  </tr>
 </table>
 <input type="submit" value="OK"/>
</form>
<form action="index.html" method="get">
 <input type="submit" value="Cancel"/>
</form>

Однако это приведет к тому, что две кнопки будут расположены друг под другом. Было бы желательно разместить их рядом. Следующие работы:

<form action="add.html" method="post">
 <table>
  <tr>
   <td>Enter data:</td><td><input type="text" name="data"/></td>
  </tr>
  <tr>
   <td><input type="submit" value="OK"/></td>
</form>
<form action="index.html" method="get">
   <td><input type="submit" value="Cancel"/></td>
  </tr>
 </table>
</form>

Но хотя я видел его на коммерческих сайтах, я думаю, это не совсем законный HTML.

Итак, таким образом:

1) Поскольку второй метод работает, есть ли веские причины не использовать его?

2) Есть ли лучшие решения?

РЕДАКТИРОВАТЬ: Это был глупый вопрос. Второй метод не нужен. Решение: добавьте к первому методу правило CSS:

form
{
  display: inline;
}

Answer 1

Ты разбил мне голову.

Есть много разных проблем с тем, что у вас здесь, но я начну с того, что Отмена / Сброс не считаются хорошими вещи обычно .

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

И я не буду упоминать таблицу, потому что это только вызовет некоторые проблемы.

Answer 2

Не используйте вторую форму. Оберните обе кнопки в одной форме и сделайте что-то подобное с кнопкой отмены:

<input type="button" text="Cancel"
       onclick="document.location.href='index.html';return false;" />

Answer 3

1) Когда вы создаете страницу с использованием «легального HTML», вы можете ожидать, что то, что работает в сегодняшних браузерах, будет работать в завтрашних браузерах или в некоторых других пользовательских агентах, на которых вы, возможно, не зарегистрировались. в приведенном вами примере степень, с которой разные браузеры соглашаются с тем, как «исправить» HTML-код для отображения, гораздо менее определенна. Это добавляет уровень предсказуемости к тому, как страница будет отображаться при использовании «допустимого HTML». Кроме того, кто знает, как пользовательский агент, такой как программа чтения с экрана, описал бы рассматриваемый код.

2) Можно ли использовать обычный тег привязки?

<td><input type="submit" value="OK"/></td>
<td> or <a href="index.html">Cancel</a></td>

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

Answer 4

Добавить строку в таблицу

<tr>
<td><input type="button" value="Cancel" onClick="window.location='./index.html'"/></td>
<td><input type="submit" value="OK" name="submit"/></td>
<tr>