表单标签是必需的吗？答案

【问题标题】：Is the form tag necessary?表单标签是必需的吗？
【发布时间】：2010-05-05 19:21:15
【问题描述】：

在我的 HTML 代码中，我有一个表单标签，其中包含两个输入框，用户名和密码。表单将值提交到 PHP 文件，该文件使用数据库验证值并在登录成功时重定向到另一个页面。

这种方式的问题是，如果不涉及AJAX，即使登录不成功也会刷新页面。

我想完全删除表单标签，将 PHP 代码合并到与 HTML 相同的文件中。为此，我尝试将onclick() 事件添加到输入框中。但是由于表单标签被删除，一些尴尬的事情发生了。我使用以下方法选择值：document.getElementByID

我想知道输入标签是否需要包含在表单标签中？如果我只想要输入框并想使用onclick事件完成一些操作，它可以工作吗？

【问题讨论】：

标签： php html

【解决方案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>

【讨论】：

我认为这是解决您问题的最佳方法。您可以删除表单标签，在提交到按钮时更改输入类型，并使用 onClick()，但您为什么要这样做？这种方式在标记方面更有意义。
这种方法的好处是，如果你也连接了服务器端的表单，即使 JavaScript 被禁用，它也能工作。

【解决方案2】：

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

【讨论】：

不，HTML 4 有一个<button> 标记，得到了很好的支持。

【解决方案3】：

如果您使用 onClick() 编写自己的处理程序，则无需提交表单。但是您应该维护语义 HTML 标记。

【讨论】：

【解决方案4】：

输入标签不必包含在表单标签中，网站就可以按照您的意愿工作。

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

AJAX 行为应在站点正常工作且未启用 JavaScript 后添加，遵循Progressive Enhancement 原则。正如 Mark 指出的那样，防止表单执行默认行为的最佳方法是在表单的 onsubmit 事件处理程序上返回 false。

如果您尝试创建通过验证的语义 HTML，您也将需要表单标签。

【讨论】：

【解决方案5】：

这不是必需的，但是，您需要确保表单仍然可用。表单标签提供了更好的标签键导航，以及按回车键提交的能力。您可以在 javascript 中模拟这些，但请注意这一点。如果您愿意，您可以尝试将表单标签的操作网址设置为 <form action="javascript:submitLogin();">，它将验证表单。如果 javascript 关闭，什么都不会发生。

【讨论】：

【解决方案6】：

虽然一般推荐，但没必要。事实上，它在没有 is 的情况下验证为 html 4.01 strict。

【讨论】：