用于 JQuery 登录的 HTML 表单或 div？

Posted 2023-02-19

【中文标题】用于 JQuery 登录的 HTML 表单或 div？

【英文标题】：HTML form or div for JQuery login?

【发布时间】：2011-12-10 08:53:19

【问题描述】：

我想在单个 html 页面上创建一个登录表单以使用 JQuery 显示（我是这项技术的新手）。

我想知道我应该使用<div> 并隐藏/显示它，还是使用<form> 并隐藏/显示它。信息将通过 Ajax 发送到 servlet。

如果我使用<div>，我应该使用什么来替代表单中的<input>？

如果我使用<form>，我相信我必须提供一个操作，这很烦人，因为我使用的是单个页面。有没有办法避免这个问题？

在这种情况下推荐使用什么登录方法，<div> 或 <form>？

【问题讨论】：

我对@9​​87654328@的意思感到困惑

@John 可以使用 JQuery 提供的 show 和 hide 方法来伪造一个表单。我的谷歌搜索告诉我有些人使用这种技术。

【参考方案1】：

我想知道是应该使用<div> 并隐藏/显示它，还是使用<form> 并隐藏/显示它。

使用表格。 Build on things that work

如果我使用<div>，我应该使用什么来替代表单中的<input>？

如果您要使用 div，那么您仍然会使用输入，但使用表单。

如果我使用<form>，我相信我必须提供一个操作，这很烦人，因为我使用的是单个页面。

不要那样做。建立在有效的基础上。

【讨论】：

@Quentin 你是说我应该使用不止一页（=好的做法）？

如果 JS 被关闭，那么任何链接都应该仍然有效，您所做的任何数据收集应该仍然有效，等等。这通常意味着您需要多个页面。

【参考方案2】：

这几乎没有区别 - 除非您担心 semantic content（<form> 比 <div> 更清楚地表明它是用于用户输入），graceful degradation（<form> 仍然可以在没有 javascript 的情况下工作）、accessibility（这可能需要牢记优雅降级）、progressive enhancement 或 unobtrusive javascript。

【讨论】：

所有这些都是您应该关心的。

【参考方案3】：

如果我使用<div>，我应该使用什么来替代表单中的<input>？

在<form> 之外包含<input> 是完全合法的。

话虽如此，我通常会使用<form>，这样您就可以绑定到它的onsubmit 事件，而不必担心人们按 Enter 提交表单以及生成什么事件（这取决于浏览器和表格的内容）。最好将表单标记为表单并让浏览器应用其正常的类似表单的行为，而不是四处寻找伪造它。

理想情况下，要正确地进行渐进增强，您应该首先使表单在没有 JavaScript 的情况下工作，因此实际上会有一些有用的东西指向 action。然后在顶部添加脚本/XMLHttpRequest。如果您必须有一个仅适用于脚本的表单，则可以将其从脚本添加到页面中，这样非 JS 用户就不会出现它，并且他们在尝试提交时不会感到困惑.

【讨论】：

假设我有一个支持 Javascript 的浏览器的先决条件，

这当然是您提交短路表单的正常方式，是的。与单击链接时返回 false 相同。

【参考方案4】：

如果您计划您的应用为未启用 javascript 的用户工作，请使用 form 元素，这是在 HTML 中进行表单提交的标准方式。

如果仅用于 ajax 类型的回发，您也可以使用 DIV。当然，无论如何您都需要<input ../> 元素，因为它们不能被其他任何东西替代。

如果使用 form 方法，您会得到一件事 - 然后您可以调用表单元素的 serialize() 方法来获取字符串中的所有字段名称 + 值。

编辑：不，实际上 serialize() 方法可以用于任何 DOM 元素，因此 form 与 div 相比没有优势。

【参考方案5】：

您应该使用<form> 标签，因为它在语义上是正确的（用户正在填写登录form）。

您可以让action="" 在表单上，​​并防止表单尝试使用onsubmit 属性提交：

$("form#myForm").submit(function() 
    // do your ajax here

    return false; // prevents the default action
);