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

如果您使用onClick（）编写自己的处理程序，则无需提交表单。但是你应该保持语义HTML标记。

Answer 3

如果你想把它们放在一个表格中，你仍然可以;只是不要在表单上放置提交按钮。如果您使用<button type="button">元素，则该按钮不应触发表单提交。

Answer 4

输入标记不必包含在表单标记中，以使网站按您的意愿工作。

但是，您应该以大多数用户可以使用它的方式创建您的网站。因此，对于那些未启用JavaScript或使用不具备JavaScript功能的浏览器查看您网站的用户，您仍应开发自己的网站，以便他们获得良好的体验。

应遵循Progressive Enhancement原则，在网站无法启用JavaScript的情况下正常运行后，应添加AJAX行为。阻止表单执行默认行为的最好方法是Mark指出 - 在表单的onsubmit事件处理程序上返回false。

如果您尝试创建通过验证的语义HTML，则还需要表单标记。

Answer 5

但是，您无需确保表单仍然可用。表单标记提供更好的选项卡式键导航，以及按Enter键提交的功能。您可以在javascript中模拟这些，但要注意这一点。如果需要，您可以尝试将表单标记的操作URL设置为 <form action="javascript:submitLogin();">，它将验证表单。如果javascript关闭，则不会发生任何事情。

Answer 6

虽然通常建议使用，但没有必要。实际上它验证为html 4.01 strict而不是。

表格标签是否必要？

6 个答案: