Custom Data Attributes vs Hidden Inputs
Developers should use custom data attributes when they need to store metadata on HTML elements that isn't suitable for standard attributes like 'id' or 'class', such as configuration settings, state information, or dynamic content identifiers meets developers should use hidden inputs when they need to include data in forms that users shouldn't see or modify, such as csrf tokens for security, pagination details, or identifiers for database operations. Here's our take.
Custom Data Attributes
Developers should use custom data attributes when they need to store metadata on HTML elements that isn't suitable for standard attributes like 'id' or 'class', such as configuration settings, state information, or dynamic content identifiers
Custom Data Attributes
Nice PickDevelopers should use custom data attributes when they need to store metadata on HTML elements that isn't suitable for standard attributes like 'id' or 'class', such as configuration settings, state information, or dynamic content identifiers
Pros
- +They are particularly useful in JavaScript-heavy applications, frameworks like React or Vue, and for accessibility enhancements, as they keep HTML valid and separate data from presentation
- +Related to: html, javascript
Cons
- -Specific tradeoffs depend on your use case
Hidden Inputs
Developers should use hidden inputs when they need to include data in forms that users shouldn't see or modify, such as CSRF tokens for security, pagination details, or identifiers for database operations
Pros
- +They are essential in scenarios like multi-step forms, where previous step data must be carried forward, or in e-commerce to pass product IDs without cluttering the UI
- +Related to: html-forms, csrf-protection
Cons
- -Specific tradeoffs depend on your use case
The Verdict
Use Custom Data Attributes if: You want they are particularly useful in javascript-heavy applications, frameworks like react or vue, and for accessibility enhancements, as they keep html valid and separate data from presentation and can live with specific tradeoffs depend on your use case.
Use Hidden Inputs if: You prioritize they are essential in scenarios like multi-step forms, where previous step data must be carried forward, or in e-commerce to pass product ids without cluttering the ui over what Custom Data Attributes offers.
Developers should use custom data attributes when they need to store metadata on HTML elements that isn't suitable for standard attributes like 'id' or 'class', such as configuration settings, state information, or dynamic content identifiers
Disagree with our pick? nice@nicepick.dev