我想在单个HTML页面上使用JQuery创建一个登录表单(我是新手)。我在考虑是否应该使用
并将其隐藏/显示,还是使用
<div>
,在表单中应该使用什么替代 <input>
?<input>
是完全合法的。但通常情况下,我会使用 <form>
,这样你就可以绑定它的 onsubmit
事件,而不必担心人们按 Enter 键提交表单以及它所生成的事件(这取决于浏览器和表单内容)。最好将表单标记为表单,并让浏览器应用其正常的类似表单的行为,而不是试图模拟它。action
。然后再添加脚本/XMLHttpRequest。如果你必须要有一个只能通过脚本工作的表单,你可以从脚本中将其添加到页面中,这样非 JS 用户就不会看到它并且不会因尝试提交它而感到困惑。<div>
并将其隐藏/显示,还是使用一个 <form>
并将其隐藏/显示。
使用一个表单。 在可用的东西上构建
如果您要使用 div,则仍然会使用 input,但需要使用表单。
如果我使用一个 <form>
,我认为我必须提供一个行动,这很烦人,因为我只用一个页面。
不要那样做。在可用的东西上构建。
除非你担心语义内容(<form>
比<div>
更清楚地表明它是用于用户输入的),优雅降级(<form>
即使没有JavaScript也可以正常工作),可访问性(这可能需要考虑保持优雅降级),渐进增强或不显眼的JavaScript,否则几乎没有什么区别。
你应该使用<form>
标签,因为它在语义上是正确的(用户正在填写登录表单)。
你可以让action = ""
在表单上,并通过onsubmit
属性防止表单尝试提交:
$("form#myForm").submit(function() {
// do your ajax here
return false; // prevents the default action
});
form
元素,这是HTML中标准的表单提交方式。<input ../>
元素,因为它们不能被其他任何东西替代。form
方法,您将获得一个优点-您可以调用表单元素的serialize()
方法以获取字符串中的所有字段名称+值。serialize()
方法可以用于任何DOM元素,因此form
没有比div
更多的优势。