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

Question

假设我有这个非常简单的性别选择代码：

<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 内才能被提交，所以它知道 data 到 submit。

我的问题是为什么？为什么 'tie' 我们要一个 form？如果我在我的程序中喜欢 10 forms 怎么办？这是否意味着我必须每个 10 forms 和 submit button？我想我遗漏了一些东西，因为我 'put in my head' 的设计没有多大意义。

Answer 1

我假设您会指定每个表单并使用 class 或 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>

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

Why button submit doesn't work if it isn't nested inside <form>?

html

forms

button

submit