Question

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

<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>

它使我的提交按钮无法正常工作，但只要我删除了表单标记就可以了：

<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>

我的js只是这样：

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;
}

为什么我无法将所有输入包装在表单中？它需要额外的代码吗？

Answer 1

它使我的提交按钮无法正常工作

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

所以你的JavaScript工作。你的表格也有效。一切正常。

但是一旦我删除了表单标签的工作

不完全。删除form代码后，表单提交不再有效。您所做的就是阻止表单提交，因为您不再拥有表单。

为什么我不能在表单中包装所有输入？

你可以。但这实际上取决于你想要做什么。如果您有表单并且想要提交表单，请使用form元素。如果您不想以表格形式提交任何内容，可以将其删除。这是它唯一的目的。

您可以在任何您喜欢的页面上输入输入，它们不需要在表单中。如果您只是想通过JavaScript与他们互动，那么您可以在没有form元素的情况下实现这一目标。

Answer 2

表单用于制作HTTP方法（例如POST或PUT）。因此，如果您需要输入的信息参与http方法，您需要使用表单。如果您的“提交”按钮仅用于内部内容，请不要使用表单。

更多信息：enter link description here

Answer 3

表单会将数据发送到操作中指定的文件，此事件由表单内的<input type="submit"/>触发。

您可以在表单中使用<button>标记来实现您想要的效果。

Answer 4

您需要为表单设置操作，它是空的。
或者您可以使用jQuery

onClick没有在表单内工作？

4 个答案: