Use a radio button and make it hidden as well

Question

Is there any way to use a radio button and make it hidden as well?

I am trying to store a value inside 4 automatically (JSP) generated radio buttons. I need to place one more radio button which will hold some default value but it should be hidden from user. Is there any way for this?

Solution 1

You should avoid using display:none or visibility:hidden on form field elements because this will have a negative impact on accessibility. Users who are navigating your website via the keyboard (no mouse) will not be able to tab between form elements and check/uncheck them. You could try using the following instead:

-moz-appearance: none;
-webkit-appearance: none;
appearance: none;

Update: Due to a known bug in Firefox, the radio button's border and dot are still visible when appearance: none has been applied. Setting the opacity to zero instead seems to be working for me:

opacity: 0;

Solution 2

See HTML Forms: Control Types for:

hidden controls Authors may create controls that are not rendered but whose values are submitted with a form. Authors generally use this control type to store information between client/server exchanges that would otherwise be lost due to the stateless nature of HTTP (see [RFC2616]). The INPUT element is used to create a hidden control.