Как определяется кнопка отправки по умолчанию в HTML-форме? - PullRequest
Новая
       60

Как определяется кнопка отправки по умолчанию в HTML-форме?

197 голосов
/ 29 мая 2009

Если форма отправлена, но не с помощью какой-либо конкретной кнопки, например

  • нажатием Введите
  • с использованием HTMLFormElement.submit() в JS

как браузер должен определить, какую из нескольких кнопок отправки, если они есть, использовать в качестве нажатой?

Это важно на двух уровнях:

  • вызов обработчика события onclick, прикрепленного к кнопке отправки
  • данные отправляются обратно на веб-сервер

Мои эксперименты показали, что:

  • при нажатии Введите , Firefox, Opera и Safari используют первую кнопку отправки в форме
  • при нажатии Введите , IE использует либо первую кнопку отправки, либо ни одной вообще, в зависимости от условий, которые я не смог выяснить
  • все эти браузеры вообще не используют ни один для отправки JS

Что говорит стандарт?

Если это поможет, вот мой тестовый код (PHP относится только к моему методу тестирования, а не к самому моему вопросу) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<body>

<h1>Get</h1>
<dl>
<?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<h1>Post</h1>
<dl>
<?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<form name="theForm" method="<?php echo isset($_GET['method']) ? $_GET['method'] : 'get'; ?>" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
    <input type="text" name="method" />
    <input type="submit" name="action" value="Button 1" onclick="alert('Button 1'); return true" />
    <input type="text" name="stuff" />
    <input type="submit" name="action" value="Button 2" onclick="alert('Button 2'); return true" />
    <input type="button" value="submit" onclick="document.theForm.submit();" />
</form>

</body></html>

Ответы [ 14 ]

0 голосов
/ 09 мая 2013

РЕДАКТИРОВАТЬ: Извините, когда писал этот ответ, я думал о кнопках отправки в общем смысле. Ответ ниже не о нескольких кнопках type="submit", так как он оставляет только одну type="submit" и заменяет другую на type="button". Я оставляю здесь ответ в качестве справки, если кто-то может изменить type в своей форме:

Чтобы определить, какая кнопка нажимается при нажатии клавиши ввода, вы можете пометить ее как type="submit", а остальные кнопки пометить их type="button". Например: 

<input type="button" value="Cancel" />
<input type="submit" value="Submit" />
0 голосов
/ 28 ноября 2012

Из спецификации HTML 4 :

Если форма содержит более одной кнопки отправки, только активированные Кнопка подтверждения успешна.

Это означает, что при наличии более 1 кнопки отправки и ни одной не активированной (нажатой) ни одна не должна быть успешной.

И я бы сказал, что это имеет смысл: Представьте себе огромную форму с несколькими кнопками отправки. Вверху есть кнопка «удалить эту запись», затем следует множество входов, а внизу кнопка «обновить эту запись». Пользователь, нажимающий клавишу ввода, находясь в поле внизу формы, никогда не будет подозревать, что он неявно нажимает кнопку «удалить эту запись» сверху.

Поэтому я думаю, что не стоит использовать первую или любую другую кнопку, если пользователь не определил (не нажал) одну. Тем не менее, браузеры делают это, конечно.

0 голосов
/ 28 сентября 2012

Другое решение, которое я использовал, это просто иметь одну кнопку в форме и подделывать другие кнопки.

Вот пример: 

<form>
  <label for="amount">Amount of items</label>
  <input id="amount" type="text" name="amount" />
  <span id="checkStock" class="buttonish">Check stock</span>
  <button type="submit" name="action" value="order">Place order</button>
</form>

Затем я создаю элементы span, чтобы они выглядели как кнопки. Слушатель JS наблюдает за пролетом и выполняет желаемую операцию после нажатия.

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

0 голосов
/ 07 апреля 2011

мой рецепт: 

<form>
<input type=hidden name=action value=login><!-- the magic! -->

<input type=text name=email>
<input type=text name=password>

<input type=submit name=action value=login>
<input type=submit name=action value="forgot password">
</form>

Будет отправлено скрытое поле по умолчанию, если ни одна из кнопок не нажата.

если они нажаты, у них есть предпочтение, и его значение передается.

Страница:
...