<input type ="hidden">的初衷？

Question

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

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

• HTML 2.0于1995年11月发布,其中已包含输入类型="隐藏"的规范
• JavaScript于1996年3月发布

因此,JavaScript 之前<input type="hidden">存在,那么它的最初目的是什么？我只能想象从服务器向客户端发送一个值(未更改)发送回来维护一种状态.或者我在历史上遇到了什么问题,并且总是应该与JavaScript一起使用？<input type="hidden">

如果可能,请在答案中提供参考.

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

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

1. CSRF代币.

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

2. 以多页表单保存状态.

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

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

Answer 5

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

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

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

使用此值,服务器端脚本可以存储upvote.