How to create manual inputs in CakePHP 2 using SecurityComponent?
<p>I want to create a form in CakePHP whilst having the <code>SecurityComponent</code> active. So far so good, now I want to add custom <code>input</code> elements which I can't generate using the <code>FormHelper</code>. I do however to have these fields included in the security and validation checks.</p>

<p>The main problem is that I can't render radio buttons outside of their labels. So I render them myself like so:</p>

<pre><code>&lt;div class="radio radio-inline"&gt;
    &lt;input id="genderMALE" type="radio" name="data[User][gender]" value="MALE"/&gt;
    &lt;label for="genderMALE"&gt;Male&lt;/label&gt;
&lt;/div&gt;
&lt;div class="radio radio-inline"&gt;
    &lt;input id="genderFEMALE" type="radio" name="data[User][gender]" value="FEMALE"/&gt;
    &lt;label for="genderFEMALE"&gt;Female&lt;/label&gt;
&lt;/div&gt;
</code></pre>

<p>Which in itself works perfectly. Yet the <code>FormHelper</code> has no notice of them so the <code>SecurityComponent</code> registers this as tampering with the form. Blackholing my request.</p>

<p>I tried to generate the inputs using the <code>FormHelper</code> but radio support is limited. The <code>format</code> option does not work here since:</p>

<blockquote>
  <p>Radio buttons cannot have the order of input and label elements controlled with these settings.
  -- <a href="http://api.cakephp.org/2.8/class-FormHelper.html#_input" rel="nofollow">Cookbook</a></p>
</blockquote>

<p>Next to that I couldn't find any way to render a plain detached radio button. And the only way I found to have the <code>input</code> accepted was through ignoring it in the <code>SecurityComponent</code>.</p>

<p>What is the Cake way to fix this?</p>

<p><strong>Update 14-09 09:16</strong><br>
My current fix/hack would be to create the custom radio buttons in plain HTML as shown above. Then link the value of those radio inputs to an input field created using the <code>FormHelper</code>. Using CSS I can hide this input allowing it to be changed by JavaScript, as opposed to using <code>type="hidden"</code>.</p>

<p>Are there any dangers/problems that could occur using this method?</p>

<p><em>side note: In the end this is a styling issue. Yet I'm forced to use Bootstrap and have only 2 days left to finish my task. And I don't feel like going down the path of writing custom CSS/JS to get this working.</em></p>