使HTML表单数据不可更改，但仍然能够发布

Question

我有一个HTML表单，可以计算总数量和价格。我可以将此总数放入要提交的输入字段中。但是，我不希望用户能够更改它。如果我把它放在一个div中并显示它，它就不会随表格一起提交。

如何在不让用户更改的情况下显示总数并提交总数？

我可能错过了一些基本的东西。任何帮助表示赞赏。

Answer 1

如果您不想要安全保护（通过防篡改），请使用readonly属性：

<强> HTML5

<input type="text" value="MY_DATE" readonly>

<强> HTML4

<input type="text" value="MY_DATE" readonly="readonly" />

type="text"可以省略，但我个人觉得它有助于新开发者乍一看输入的类型。

您最好的选择（为了获得适当的安全性）是加密或签署数据并将其作为隐藏表单元素发送。然后，一旦它回到服务器，您可以解密它（继续使用它）或检查签名以确保它没有被篡改。

然后从前端的角度来看，你可以让数据不是输入（或只读），然后你应该是金色的。 CakePHP等Web框架在隐藏元素中提供id时会使用该技术，并对其进行签名以确保不会被篡改。

服务器

signed = sha(date, salt);

<强>前端

input[type="hidden"].value = signed;
input[type="text"][readonly].value = date;

服务器（提交时）

if(signed === sha(POST[date], salt) {
    //date has not changed
} else {
    // date has changed
}

对于a11y（辅助功能），在显示与发送内容相关的数据时，您仍应使用表单元素，因此建议在div上使用文本输入。 使用readonly比disabled要好得多，因为已禁用将一起删除请求中的输入，导致您的服务器无法接收它。 请参阅here。

以下是如何在PHP中执行此操作的快速摘录。

服务器

$salt = '...'; //This should be stored securely in your application.
$date = ... //However you are storing your date.
$signed_date = hash('sha512', $salt . $date);

<强>前端

<input type="hidden" value="<?php echo $signed_date; ?>" name="signed_date" />
<input type="text" value="<?php echo $date; ?>" readonly name="date" />

服务器（提交时）

$salt = '...';
$date = &$_POST['date'];
$signed_date = &$_POST['signed_date'];

if(hash('sha512', $salt . $date) === $signed_date) {
    echo "wooo!";
} else {
    echo "ohhh";
}

Answer 2

为输入提供readonly属性：

<input readonly value='cannot be changed' />