Hiding input fields with type = 'hidden' vs using class with display: none

Question

On my pages there are several hidden form fields that are used to transfer data to the server. For debugging purposes, it’s easier for me to hide all valid input fields by simply making them part of a hidden class than setting the type = hidden attribute in each input field.

Whenever I need to debug, I could easily change this class attribute to enter debug mode. Of course, both approaches work in hiding input fields, but I'm not sure why this approach (hiding through the class) is not widely used in real life. Can you talk about what should be your preferred approach?

Answer 1

<input type="hidden"> will not trigger input validation, automatic completion, and other user interaction events. It is designed to save the original data without direct user input.

But a <input type="text"> , visually hidden, will still be seen as a component of user interaction. And on some devices that allow visual assistance, it will not be hidden and cannot provide the consistency that you expected. That is why he does not prefer to do this.

Eg. a <input type="hidden"> will not automatically fill it out on its own or save the entered data before updating the page or prevent the possibility of submitting a form to check for an invalid type.

Answer 2

The CSS approach is bad for usability and accessibility. Think of someone with CSS disabled (very old mobile phones, people with screen readers), they won’t display your CSS as you might expect, and the contribution with all its glory will be displayed to the user.

Hidden input should be used for implied user input , that is, input that will come from the user, but is implied and does not need to be entered manually.

Your question is more suited to the type="hidden" approach.

Answer 3

I think your question is about the best approach for debugging form fields. I recommend storing them as type = 'hidden' in your HTML. This is best for you, for your users, and for semantic interpretation of the page.

Instead, use the Chrome Developer Tools tool to do your debugging. This will allow you to easily see the values ​​of your hidden fields.

Answer 4

I would recommend using <input type="hidden" /> because this is the standard HTML way to input a custom input value. If you use a different attribute for type and hide it with css , there may be one problem: when css does not load, input control will appear.