Question

我很好奇<input type="hidden">标签的最初目的。

现在它经常与JavaScript一起使用来存储发送到服务器的变量以及类似的东西。

HTML 2.0已在November 1995中发布，其中已包含specification for input type="hidden"
JavaScript已发布March 1996

因此，<input type="hidden">存在之前 JavaScript，那么它的最初目的是什么？我只能想象从服务器向客户端发送一个值（未更改）发送回来维护一种状态。或者我在历史记录中出错了，<input type="hidden">总是应该与JavaScript一起使用？

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

Answer 1

我只能想象从服务器向客户端发送一个值（未更改），以保持一种状态。

正。事实上，它今天仍然被用于此目的，因为我们今天所知道的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推荐标准版，但可以安全地假设隐藏字段几乎总是起到同样的作用。

Answer 2

我将在这里提供一个简单的服务器端真实世界示例，例如，如果记录是循环的，并且每个记录都有一个带有删除按钮的表单，并且您需要删除特定记录，那么这里是hidden在行动中的字段，否则你将无法获得在这种情况下要删除的记录的引用，它将是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
    }
?>

Answer 3

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

来自HTML 1995年9月22日规范

具有“TYPE = HIDDEN”的INPUT元素表示隐藏字段。用户不与这个领域互动;相反，VALUE属性指定字段的值。 NAME和VALUE属性是必需的。

Answer 4

基本上隐藏的字段将更有用，并且可以与多步形式一起使用。我们可以使用隐藏字段使用隐藏将一步信息传递到下一步，并将其保持转发直到结束步骤。

CSRF代币。

Cross-site request forgery是一个非常常见的网站漏洞。在所有表单提交中要求一个特定于用户的秘密令牌将阻止CSRF攻击，因为攻击站点无法猜测正确的令牌是什么，并且他们代表用户执行的任何表单提交将始终失败。

以多页表格保存状态。

如果您需要在用户当前所在的多页表单中存储哪个步骤，请使用隐藏的输入字段。用户无需查看此信息，因此请将其隐藏在隐藏的输入字段中。

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

Answer 5

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

SO使用隐藏字段进行upvote点击。

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

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

<input type =“hidden”/>的初衷？

5 个答案: