Javascript onClick没有'；你不能在表格内工作吗？

通常我看到人们使用表单来创建输入：

<form action="">
<table>
    <tr>
        <td><label for="Fname">First Name</label></td>
        <td><input type="text" name="Fname" class="form-control" id="fname"></td>
    </tr>
    <tr>
        <td><label for="Lname">Last Name</label></td>
        <td><input type="text" name="Lname" class="form-control" id="lname"></td>
    </tr>
    <tr>
        <td><label for="address">address</label></td>
        <td><input type="text" name="address" class="form-control" id="address"></td>
    </tr>
    <tr>
        <td><label for="phone">phone</label></td>
        <td><input type="text" name="phone" class="form-control" id="phone"></td>
    </tr>
    <tr>
        <td><input type="submit" value="submit" onclick="submit();"></td>
    </tr>
</table>
</form>

为什么我不能将所有输入都封装在表单中？它需要额外的代码吗

它使我的提交按钮不起作用

不，您的提交按钮工作正常。事实上，这就是你所看到的问题所在。JavaScript代码正在执行，但从显示任何输出到由于提交表单而重新加载页面之间的时间几乎是瞬间的

因此，您的JavaScript工作正常。而且你的表格有效。一切正常

但是一旦我移除表单标签，它的工作就完成了

不完全是。当您删除

表单

标签时，表单提交不再有效。您所做的只是阻止表单提交，因为您不再有表单

为什么我不能将所有输入都封装在表单中

你可以。但这取决于你想做什么。如果您有一个表单并希望提交它，请使用

表单

元素。如果您不想以表单形式提交任何内容，可以将其忽略。这是它唯一的目的

---

你可以在任何你喜欢的地方在页面上输入，它们不需要是表单。如果您只想通过JavaScript与它们交互，那么您可以在不使用

表单

元素的情况下进行交互。

表单用于生成HTTP方法（如POST或PUT）。 所以，如果需要输入的信息参与http方法，则需要使用表单。 如果你的提交按钮只是为了内部的东西，不要使用表单

---

更多信息：

表单将数据发送到操作中指定的文件，此事件由表单中的

触发

---

您可以在表单中使用

标记来实现所需的功能

您需要为表单设置操作，它是空的。

---

或者您可以使用

form will，使用get或post方法将数据发布到数据库中。您的JavaScript代码正在执行，但从显示任何输出到由于您提交了表单而重新加载页面之间的时间几乎是瞬间的。。那么如何显示输出，先生。因为正如你所说，几乎instantaneous@vandi：你的第二个例子不是成功地做到了吗？如果您根本不需要

表单

，只需省略它即可。您可以阻止表单提交（请参见此问题：），但如果您永远不想提交表单，那么首先不提交表单似乎是合理的。@vandi您仍然可以使用表单，但只需通过调用表单提交上的方法并返回false来阻止表单提交即可。不得不在一个老帖子上戳你，你批准了这个作为文档，请在批准文档之前读一读！这显然是一个问题，而不是在任何类型的文档中。。。将此评论标记为太过健谈，之后无法将其删除！哈！是的，可能吧！；）

<table>
    <tr>
        <td><label for="Fname">First Name</label></td>
        <td><input type="text" name="Fname" class="form-control" id="fname"></td>
    </tr>
    <tr>
        <td><label for="Lname">Last Name</label></td>
        <td><input type="text" name="Lname" class="form-control" id="lname"></td>
    </tr>
    <tr>
        <td><label for="address">address</label></td>
        <td><input type="text" name="address" class="form-control" id="address"></td>
    </tr>
    <tr>
        <td><label for="phone">phone</label></td>
        <td><input type="text" name="phone" class="form-control" id="phone"></td>
    </tr>
    <tr>
        <td><input type="submit" value="submit" onclick="submit();"></td>
    </tr>
</table>

var Fname= document.getElementById("fname");
var Lname= document.getElementById("lname");
var Address= document.getElementById("address");
var Phone= document.getElementById("phone");
var Result= document.getElementById("result");


function submit(){
    var valueFname=Fname.value;
    var valueLname=Lname.value;
    var valueAddress=Address.value;
    var valuePhone=Phone.value;
    Result.innerHTML="hello, "+valueFname+" "+valueLname+" good to see you. Your contact number is "+valuePhone+" , and your address "+valueAddress;
}