Нужен ли тег формы?

Question

В моем HTML-коде у меня есть тег формы, который содержит два поля ввода: имя пользователя и пароль. Форма отправляет значения в файл PHP, который проверяет значения в базе данных и перенаправляет на другую страницу, если вход выполнен успешно.

Проблема с этим подходом заключается в том, что, если AJAX не задействован, он обновляет страницу, даже если вход не выполнен.

Я бы хотел удалить тег формы, объединить код PHP в тот же файл, что и HTML. Для этого я попытался добавить событие onclick() в поля ввода. Но так как тег формы был удален, произошло что-то неловкое. Я выбрал значения, используя: document.getElementByID

Я хочу знать, необходимо ли заключать тег ввода в тег формы? Если я просто хочу поле ввода и хочу выполнить какую-либо операцию с использованием события onclick, сработает ли это?

Answer 1

Мой предпочтительный метод - оставить тег <form>, но перехватить событие onsubmit формы и просто return false.

<form name="foo" id="foo" action="" method="post">
  <input type="text" name="bar" id="bar" />
</form>

Вот примерный код PrototypeJS, иллюстрирующий подход.

<script type="text/javascript">
  //Handle the window onload event
  Event.observe(window, 'load', function() {

    //Handle the form submit event
    Event.observe($('foo'), 'submit', function(event) {
      //Stop the event so the form doesn't actually submit
      Event.stop(event);
    });

  });
</script>

Answer 2

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

Однако вы должны создать свой сайт таким образом, чтобы большинство пользователей могли им пользоваться. Таким образом, для тех пользователей, у которых не включен JavaScript или которые просматривают ваш сайт в браузере, у которого нет возможностей JavaScript, вы все равно должны разработать свой сайт, чтобы у них был хороший опыт.

Поведение AJAX следует добавить после правильной работы сайта без использования JavaScript, следуя принципам Progressive Enhancement . Как указал Марк, лучший способ предотвратить выполнение формой поведения по умолчанию - вернуть false в обработчике события onsubmit формы.

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

Answer 3

Если вы хотите поместить их в форму, вы все еще можете; просто не помещайте кнопку отправки в форму. Если вы используете элемент <button type="button">, кнопка не должна вызывать отправку формы.

Answer 4

Не нужно отправлять форму, если вы пишете свои собственные обработчики с помощью onClick (). Но вы должны поддерживать семантическую разметку HTML.

Answer 5

Хотя это обычно рекомендуется, но это не обязательно. На самом деле это проверяется как HTML 4.01 строгий без is.

Answer 6

Это не обязательно, однако вам нужно убедиться, что форма все еще пригодна для использования Тег формы обеспечивает лучшую навигацию по вкладкам, а также возможность отправки по нажатию клавиши ввода Вы можете подражать им в JavaScript, но остерегайтесь этого. Если вы хотите, вы можете попробовать установить URL-адрес действия тега формы в <form action="javascript:submitLogin();">, что подтвердит форму. Если бы JavaScript был отключен, ничего бы не случилось.