如果按钮提交未嵌套在<form>内，为什么不起作用？

问题描述

说我有一个很简单的代码来选择性别：

<form action="">
<p>Gender:</p>
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="man">
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="woman">

<button>submit</button>
</form>

它可以正常工作，正如您所愿。但是我必须玩。我尝试删除form tag。因此现在看起来完全一样，只是没有form tag：

<p>Gender:</p>
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="man">
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="woman">

<button>submit</button>

更改后，我的程序被损坏。我意识到它需要放在form内才能被提交，因此它知道submit要使用哪个数据。

我的问题是为什么？为什么将我们“绑”到一个form上？如果我在程序中喜欢10 forms怎么办。这是否意味着我每个人都必须10 forms和submit button在一起？我想我丢失了一些东西，因为我“放在脑海中”的设计没有多大意义。

解决方法

我假设您将指定每个表单并使用类或ID提交按钮。您还尝试给您的“提交”按钮指定类型吗？例如：

<form id= "gender-form" action="/">
<button id="genderSubBtn" type="submit" >Submit</button>
</form>

<form id= "age-form" action="/">
<button id="ageSubBtn" type="submit" >Submit</button>
</form>