JQuery登录，使用HTML表单还是div？

Question

我想在单个HTML页面上使用JQuery创建一个登录表单（我是新手）。我在考虑是否应该使用

并将其隐藏/显示，还是使用

并将其隐藏/显示。信息将通过Ajax发送到servlet。

如果我使用

，那么在表单中可用的的替代品应该是什么？

如果我使用，我认为我必须提供一个操作，这很烦人，因为我只使用一个页面。有没有办法避免这个问题？

在这种情况下，推荐使用哪种登录方法，

还是？

- Jérôme Verstrynge

---

我对你所说的“<div>”表示困惑。 - John Strickler

@John <div> 可以使用 JQuery 提供的 show 和 hide 方法来伪造表单。我的谷歌搜索告诉我有些人使用这种技术。 - Jérôme Verstrynge

Answer 1

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

在表单之外包含 <input> 是完全合法的。但通常情况下，我会使用 <form>，这样你就可以绑定它的 onsubmit 事件，而不必担心人们按 Enter 键提交表单以及它所生成的事件（这取决于浏览器和表单内容）。最好将表单标记为表单，并让浏览器应用其正常的类似表单的行为，而不是试图模拟它。

理想情况下，为了正确地进行渐进增强，您应该首先使表单在没有 JavaScript 的情况下工作，这样实际上会有一些有用的东西可以指向 action。然后再添加脚本/XMLHttpRequest。如果你必须要有一个只能通过脚本工作的表单，你可以从脚本中将其添加到页面中，这样非 JS 用户就不会看到它并且不会因尝试提交它而感到困惑。

- bobince

---

假设我设置了一个前提条件，需要启用JavaScript的浏览器，<form>仍然具有onsubmit的好处。好的，jtfairbank的建议听起来很有趣... - Jérôme Verstrynge

这确实是您提交短路表单的常规方式，是的。与在链接单击上返回false的方式相同。 - bobince

Answer 2

我在思考是否应该使用一个 <div> 并将其隐藏/显示，还是使用一个 <form> 并将其隐藏/显示。

使用一个表单。 在可用的东西上构建

如果您要使用 div，则仍然会使用 input，但需要使用表单。

如果我使用一个 <form>，我认为我必须提供一个行动，这很烦人，因为我只用一个页面。

不要那样做。在可用的东西上构建。

- Quentin

---

@Quentin 你是指我应该使用超过一页吗？（=好的实践） - Jérôme Verstrynge

如果JS被关闭，那么任何链接仍应该能够工作，你所做的任何数据收集也应该仍然能够工作等等。这通常意味着你需要多个页面。 - Quentin

Answer 3

除非你担心语义内容（<form>比<div>更清楚地表明它是用于用户输入的），优雅降级（<form>即使没有JavaScript也可以正常工作），可访问性（这可能需要考虑保持优雅降级），渐进增强或不显眼的JavaScript，否则几乎没有什么区别。

- Richard JP Le Guen

---

所有这些都是你应该关心的事情。 - Quentin

Answer 4

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

你可以让action = ""在表单上，并通过onsubmit属性防止表单尝试提交：

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

    return false; // prevents the default action
});

- jtfairbank

Answer 5

如果您计划让您的应用程序在未启用JavaScript的情况下为用户工作，请使用form元素，这是HTML中标准的表单提交方式。

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

如果使用form方法，您将获得一个优点-您可以调用表单元素的serialize()方法以获取字符串中的所有字段名称+值。

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

- naivists