表单外部的 HTML 输入字段

Posted 2023-03-05

【中文标题】表单外部的 HTML 输入字段

【英文标题】：HTML input field OUTSIDE of a form

【发布时间】：2011-10-02 09:57:41

【问题描述】：

我有一个包含一组输入的表单，我希望我的页面在其中一个发生更改时刷新。我在页面的另一侧有第二组输入，css 布局不方便我将它们放在同一个<form></form> 标记中。我想知道是否有一种方法可以确保位于 <form> 标记之外的那些“输入”仍然与该表单相关联。

有什么方法可以为输入分配“表单 ID”吗？

【问题讨论】：

您可以在提交时使用 javascript 手动获取它们的值。是什么阻止您将它们放入表单中？ <form> 有附加格式吗？

【参考方案1】：

在 html5 中，您可以使用 form attribute:

默认情况下，表单关联元素与其祖先表单元素相关联，但可以指定一个表单属性来覆盖它。

如果与表单相关的元素具有指定的表单属性，则该属性的值必须是元素所有者文档中表单元素的 ID。

例子：

<form id="myform">
    <input id="something" type="text">
</form>

<button form="myform" type="submit">Submit that form over there</button>

但是，您应该确保用户清楚这些视觉上分离的表单元素实际上是相互连接的。

【讨论】：

这可以在 angularjs 表单和表单验证中使用吗？

【参考方案2】：

<input type="text" form="myform" /> 为我工作。

更新 这在 FireFox 上效果很好，但是在 IE 11 中给我带来了麻烦，因为 IE 无法识别表单属性（在撰写本文时）。

我只需要在表单内设置一个隐藏的输入字段，然后将值从表单外的输入转移到隐藏的输入字段；使用 jQuery 的 onclick。

【讨论】：

有趣的是，当我再次遇到这个问题时，我偶然发现了这个问题。我尝试投票，得到了“你不能为自己的职位投票”。信息。没想到我写了这个。过去的 eaglei22 帮助了未来的 eaglei22！

哦，又是你的答案。我记得这个评论，但完全忘记了答案的内容:)

你不是唯一一个喜欢给你自己的帖子点赞的人，很久都忘记了，eaglei22 :D 顺便说一句，form 属性似乎支持不同类型的标签，如按钮、输入、标签、输出（被遗忘的大标签）、选择和文本区域。它应该也可用于 fieldset、meter 和 object 标签，但浏览器似乎不支持它们，如 w3schools.com/tags/att_form.asp

中所述

有人开了个玩笑，过来看看。