HTML | DOM 输入隐藏值属性

在HTML中，有时候我们需要向服务器发送一些数据，但是不希望这些数据被用户所看到或者修改。这时候，我们可以使用隐藏值属性（ Hidden field attribute）。

什么是隐藏值属性？

隐藏值属性是一种HTML表单元素，它可以存储数据但不会在页面上展示出来。它的值可以通过JavaScript或服务器端脚本来进行访问。

如何使用隐藏值属性？

使用隐藏值属性非常简单，只需要在form标签内添加一个input元素，并将input元素的type属性设置为"hidden"即可。另外，还需要为input元素指定一个name属性和一个value属性，以便在提交表单时将值传递到服务器端。

例如：

<form action="submit.php" method="post">
  <input type="hidden" name="user" value="123">
  <input type="hidden" name="password" value="456">
  <input type="submit" value="提交">
</form>

在这个例子中，我们向服务器提交了一个名为"user"的隐藏值属性，它的值为"123"，以及一个名为"password"的隐藏值属性，它的值为"456"。

如何使用JavaScript访问隐藏值属性？

使用JavaScript访问隐藏值属性非常简单，只需要通过DOM获取对应的input元素，并读取其value属性即可。

例如：

const user = document.querySelector('input[name="user"]').value;
const password = document.querySelector('input[name="password"]').value;
console.log(user); // 123
console.log(password); // 456

在这个例子中，我们通过querySelector方法获取了名为"user"和"password"的input元素，并读取了它们的value属性。

总结

隐藏值属性是一种很有用的HTML表单元素，它可以存储数据但不需要在页面上展示。通过使用隐藏值属性，我们可以方便地将数据提交到服务器端，并且可以使用JavaScript来访问这些数据。