<输入类型=“隐藏”>的原始目的？[关闭]

101

我对<input type="hidden">标签的原始用途感到好奇。

如今，它经常与JavaScript一起使用以在其中存储变量，这些变量将被发送到服务器以及类似的东西。

HTML 2.0于1995年11月发布，已经包含输入类型=“ hidden”的规范。
JavaScript于1996年3月发布

因此，<input type="hidden">存在于 JavaScript 之前，那么它的初衷是什么？我只能想象从服务器向客户端发送一个值，该值被（不变）发送回以保持某种状态。还是我在历史上出了点问题，<input type="hidden">总是应该与JavaScript一起使用？

如果可能，请在回答中提供参考。

javascript html history

— o
source

3

尽管保持状态也将是SO的主题，但我仍然会选择

— Phil

同意，以允许跟踪预先填充的状态（例如，编辑过程中的替代PK），该状态将自动包含在提交的表单POST / GET中

— StuartLC 2013年

1

JavaScript 之前存在的理由支持使它们更多的理由（也就是说，它并没有降低任何理由，因为这个问题似乎暗示了这一点）-没有JavaScript可以“存储变量”或在“非隐藏”输入中调用AJAX或存根表单提交之前的..字段也没有其他不正当手段的CSS，例如隐藏普通文本输入。

— user2246674

108

我只能想象从服务器向客户端发送一个值，该值被（不变）发送回以保持某种状态。

恰恰。实际上，它至今仍在用于此目的，因为今天我们所知道的HTTP至少在根本上仍然是无状态协议。

这个用例实际上是在HTML 3.2中首先描述的（我很惊讶HTML 2.0没有包含这样的描述）：

type=hidden
这些字段不应呈现，并为服务器提供一种使用表单存储状态信息的方法。提交表单时，将使用相应属性定义的名称/值对将其传递回服务器。这是解决HTTP无状态问题的方法。另一种方法是使用HTTP“ Cookies”。
<input type=hidden name=customerid value="c2415-345-8563">

值得一提的是，HTML 3.2仅在 JavaScript最初发布后才成为W3C建议书，但可以肯定的是，隐藏字段几乎总是起到相同的作用。

— BoltClock
source

我不喜欢使用“隐藏”输入来存储数据的一件事是，该数据可以由用户操纵，当然，可能只有了解HTML的人以及如何通过开发工具对其进行修改的人，但可能会对用户产生不良影响如果修改这些值会破坏其他数据（例如，如果您存储主键引用并且由用户手动更改），则返回数据库。

— Brett84c

3

@ Brett84c：这就是为什么您应该始终验证输入内容

— 而不

确实，我只是把它扔出去，让新开发者意识到其中可能存在的危险。

— Brett84c

2

这些危险没有什么是“隐藏”输入所特有的- 发送到客户端的任何内容都可以在返回之前进行操作。Cookies或基于JS的替代品是相同的。

— FLHerne

10

我将在此处提供一个简单的“服务器端现实世界”示例，例如，如果记录循环了，并且每个记录都有一个带有删除按钮的表单，并且您需要删除特定记录，那么该hidden字段起作用了，否则您将不会这样做。 t在这种情况下获取要删除的记录的引用，它将是id

例如

<?php
    if(isset($_POST['delete_action'])) {
        mysqli_query($connection, "DELETE FROM table_name 
                                   WHERE record_id = ".$_POST['row_to_be_deleted']);
                                   //Here is where hidden field value is used
    }

    while(condition) {
?>
    <span><?php echo 'Looped Record Name'; ?>
    <form method="post">
        <input type="hidden" name="row_to_be_deleted" value="<?php echo $record_id; ?>" />
        <input type="submit" name="delete_action" />
    </form>
<?php
    }
?>

— 外星人先生
source

1

一个很好的例子，除了真实的代码应该使用准备好的语句或其他方式来安全地处理SQL输入。

— 马修·弗拉申

8

简而言之，最初的目的是创建一个将与表单的提交一起提交的字段。有时，需要在隐藏字段中存储一些信息（例如，用户ID），然后将其与表单的Submit一起提交。

根据HTML 1995年9月22日的规范

类型为“ HIDDEN”的INPUT元素表示一个隐藏字段。用户不与该字段交互；相反，VALUE属性指定字段的值。NAME和VALUE属性是必需的。

— 查克·诺里斯
source

1

您能否详细说明该答案和/或对提交表单后提交隐藏字段的这种行为提供一些参考？

— GitaarLAB

@GitaarLAB，我举了一个例子（用户ID）...总之，网络上有很多例子。例如echoecho.com/htmlforms07.htm

— Chuck Norris

1

对不起，对我来说，这original purpose was to make a field which will be submitted *after* form's submit是is昧的。它可以解释为：“在完成表单的数据发布后，隐藏字段将被提交（到一个神秘的地方）”。因此，我在上面的评论。

— GitaarLAB

1

我明白了:)感谢您的评论，我已经编辑了答案。这只是拼写错误（还没有达到英语的大师级别：D）。

— Chuck Norris

6

发布表单时，包含type ='hidden'的表单元素的值将提交给服务器。输入type =“ hidden”值在页面中不可见。例如，在隐藏字段中维护用户ID是许多用途之一。

因此，对点击使用隐藏字段。

<input value="16293741" name="postId" type="hidden">

使用此值，服务器端脚本可以存储更新。

— cPu1
source

哈哈，好抓！d：当我在值的末尾追加一个“x” upvoting当错误发生时

— Uooo

@Uooo您可以取消隐藏它或直接更改值。您可以将值更改为其他答案。然后，您可以单击“ upvote”按钮，并且该按钮会记录为“ upvote”以表示其他答案。;）

— Geoffrey Hale 2015年

5

基本上，隐藏字段将更有用，并且可以与多步表单结合使用。我们可以使用隐藏字段将隐藏的一个步骤的信息传递给下一步骤，并将其转发到最后一步。

CSRF令牌。

跨站点请求伪造是一个非常常见的网站漏洞。在所有表单提交中都需要一个秘密的，特定于用户的令牌可以防止CSRF攻击，因为攻击站点无法猜测正确的令牌是什么，并且它们代表用户执行的任何表单提交都将始终失败。

以多页形式保存状态。

如果您需要以多页形式存储用户当前所在的步骤，请使用隐藏的输入字段。用户不需要查看此信息，因此可以将其隐藏在隐藏的输入字段中。

一般规则：使用该字段存储用户不需要查看但要在表单提交时发送给服务器的任何内容。

— 加内什·波拉
source