输入隐藏或带有显示的div：CSS中没有？

Question

In our project we both use input type=hidden elements and divs with display:none css for storing some data on html page without showing it to user .

所以我想知道哪种方式更适合性能和代码完整性以及 html 语义？

原文由 LostMohican 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

无论文档 (CSS) 的样式规则如何，隐藏的输入都将被隐藏，这可能会使其性能更好，但我没有数据来显示这一点。话虽如此，输入控件应该作为表单的一部分提交。

还有其他方法，例如 HTML5 自定义数据属性或使用脚本标签：

 <!-- Custom data attribute -->
<div id="product" data-id="42">
    <h1>Product name</h1>
</div>

<!-- JSON data embedded in a script tag -->
<script type="application/json">
    { "id": 42 }
</script>

原文由 Michiel van Oosterhout 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

性能涉及许多因素。但除非您存储大量数据，否则性能差异可能无法区分。

什么对代码完整性和语义最有利取决于数据以及您如何使用它。

存储数据有多种选择：

• 将数据存储在 隐藏的输入 中，这非常适合与表单一起使用：

<input name="mydata" type="hidden" value="some data" />

• 将数据存储在 隐藏的 html 标签 中，这经常被搜索引擎拒绝，因为它在试图提高 SEO 排名时被滥用：

<div id="mydata" style="display:none"> some data </div>

• 在 javascript 中存储数据，这对于快速访问非常有用：

<script type="text/javascript"> var data.id = 123; var data.list = ["Yes","No","Maybe"]; </script>

• 将数据存储 在我很少使用的 META 标签 中：http: //code.lancepollard.com/complete-list-of-html-meta-tags#create-custom-meta-tags

<meta name="mydata" content="some data"/>

• 将数据存储 在 cookie 中，只要 cookie 没有被禁用，此选项允许数据过期： http ://www.w3schools.com/js/js_cookies.asp

• HTML5 有一个 SQLite 数据库：

http://html5doctor.com/introducing-web-sql-databases/

• HTML5 规范允许 自定义数据属性

http://html5doctor.com/html5-custom-data-attributes/

原文由 Micah 发布，翻译遵循 CC BY-SA 4.0 许可协议