# Form & Radio: URL double selection, lay-out

**URL:** <https://discourse.cakephp.org/t/form-radio-url-double-selection-lay-out/10123>\
**Category:** Uncategorized\
**Created:** [January 31, 2022, 9:05am UTC](https://discourse.cakephp.org/t/form-radio-url-double-selection-lay-out/10123 "2022-01-31T09:05:10Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![drtrppr](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/drtrppr/32/1763_2.png) [@drtrppr](https://discourse.cakephp.org/u/drtrppr)\
**Post date:** [January 31, 2022, 9:05am UTC](https://discourse.cakephp.org/t/form-radio-url-double-selection-lay-out/10123/1 "2022-01-31T09:05:10Z")

</div>

Using the FormHelper (CakePHP 4.3.3) and the select-control doesn’t give me any surprises:

```auto
	<?= $this->Form->create(null,['type'=>'get']) ?>
	<?= $this->Form->select('selection',['Data 1-2','Data 3-4','Data 5-6'],['empty' => 'Choose data']) ?>
	<?= $this->Form->submit('Choose') ?>
	<?= $this->Form->end() ?>

```

![Screenshot_2022-01-31_09-50-11](https://canada1.discourse-cdn.com/flex029/uploads/cakephp/original/2X/a/a5397198caaa22fee8a9d56ba2828d977a25623a.png)

Changing to the radio-control, the URL is what surprises me:

```auto
	<?= $this->Form->create(null,['type'=>'get']) ?>
	<?= $this->Form->radio('selection',['Data 1-2','Data 3-4','Data 5-6'],['empty' => 'Choose data']) ?>
	<?= $this->Form->submit('Choose') ?>
	<?= $this->Form->end() ?>

```

 ![Screenshot_2022-01-31_09-55-20](https://canada1.discourse-cdn.com/flex029/uploads/cakephp/original/2X/d/d2bda240be0cfaa0a1dd8733cf82cbc527489e96.png)

That double ‘selection=’?

---

<div class="post-metadata">

**Author:** ![ndm](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/ndm/32/2234_2.png) [@ndm](https://discourse.cakephp.org/u/ndm)\
**Post date:** [January 31, 2022, 4:54pm UTC](https://discourse.cakephp.org/t/form-radio-url-double-selection-lay-out/10123/2 "2022-01-31T16:54:51Z")

</div>

This is because there’s by default a fallback set for radio buttons and checkboxes, which is being submitted in case none of the controls have been selected, this ensures that the request always submits a value for the field, where an empty value can then be interpreted as “_no selection_” / “_default value_”. The same happens on POST requests, you just won’t see it.

You can disable this behavior by setting the `hiddenField` option of your `radio()` control to `false`. But be aware of the implications, doing so could mess up validation rules like `requirePresence()`. And for checkboxes you’d be missing the default value when a box isn’t selected.

See also **[Form - 4.x](https://book.cakephp.org/4/en/views/helpers/form.html#options-for-select-checkbox-and-radio-controls)**

---

<div class="post-metadata">

**Author:** ![drtrppr](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/drtrppr/32/1763_2.png) [@drtrppr](https://discourse.cakephp.org/u/drtrppr)\
**Post date:** [February 1, 2022, 9:40am UTC](https://discourse.cakephp.org/t/form-radio-url-double-selection-lay-out/10123/3 "2022-02-01T09:40:26Z")

</div>

Thanks, cookbook didn’t hint me to the double selection, and don’t know why I didn’t look into source code of page … Did know of using the hidden fields to sent ID’s, not as default in a fallback.

Have to look into my code again, pretty sure I started with testing empty value, but had to go the NULL way.

---

<div class="post-metadata">

**Author:** ![drtrppr](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/drtrppr/32/1763_2.png) [@drtrppr](https://discourse.cakephp.org/u/drtrppr)\
**Post date:** [February 1, 2022, 9:51am UTC](https://discourse.cakephp.org/t/form-radio-url-double-selection-lay-out/10123/4 "2022-02-01T09:51:25Z")

</div>

Next thing is that I want the radio buttons horizontally lined-up …

---

<div class="post-metadata">

**Author:** ![Jawfin](https://avatars.discourse-cdn.com/v4/letter/j/dbc845/32.png) [@Jawfin](https://discourse.cakephp.org/u/Jawfin)\
**Post date:** [February 1, 2022, 1:08pm UTC](https://discourse.cakephp.org/t/form-radio-url-double-selection-lay-out/10123/5 "2022-02-01T13:08:08Z")

</div>

That’s something you do in CSS, not the PHP. I’d be looking at `flex` for that.

---

<div class="post-metadata">

**Author:** ![drtrppr](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/drtrppr/32/1763_2.png) [@drtrppr](https://discourse.cakephp.org/u/drtrppr)\
**Post date:** [February 2, 2022, 1:32pm UTC](https://discourse.cakephp.org/t/form-radio-url-double-selection-lay-out/10123/6 "2022-02-02T13:32:08Z")

</div>

flex? Tried something like ‘\<label style="display: inline;’ ?

Did put it in FormHelper and radio buttons get in line:

```auto
            // Label element used for radio and multi-checkbox inputs.
            'nestingLabel' => '{{hidden}}<label style="display: inline;" {{attrs}}>{{input}}{{text}}</label>',

```

Next step wil be to get it out of FormHelper.php and in seperate file which can be loaded by FormHelper, if I understand cookbook well that’s the way to go?

---

<div class="post-metadata">

**Author:** ![Jawfin](https://avatars.discourse-cdn.com/v4/letter/j/dbc845/32.png) [@Jawfin](https://discourse.cakephp.org/u/Jawfin)\
**Post date:** [February 3, 2022, 3:24am UTC](https://discourse.cakephp.org/t/form-radio-url-double-selection-lay-out/10123/7 "2022-02-03T03:24:09Z")

</div>

Layout stuff is traditionally done on the client: the client knows the best for its own device / browser etc. and it saves CPU power of your server 😉

So, just load up the elements as you need them from the PHP, which is server-side only; no PHP code gets executed on the client’s browser. Then create .CSS with classes, and use `display:flex` in the classes, and pass the class to the element on its create in your PHP there.

So look up how-to use flex in CSS - flex may be an overkill, but as its simple to use and has considerable power, it’s worth learning for future use. I mean, you could put the controls in a table, but that’s a yukky approach, creating extra messy elements just for layout which is CSS’s job. There’s 100’s of pages explaining flex display but I like this one [Flex Cheatsheet](https://yoksel.github.io/flex-cheatsheet)

grid-area is also a handy CSS to know, good for responsive (which is a CSS term) webpages.

Do not use styles in the element itself, use CSS classes. Its poor design, hard to read, and harder to maintain.

---

<div class="post-metadata">

**Author:** ![drtrppr](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/drtrppr/32/1763_2.png) [@drtrppr](https://discourse.cakephp.org/u/drtrppr)\
**Post date:** [February 3, 2022, 6:32pm UTC](https://discourse.cakephp.org/t/form-radio-url-double-selection-lay-out/10123/8 "2022-02-03T18:32:52Z")

</div>

At this moment I’m just building a prototype, want the changes to css to be as minimal as possible.

I’m fine with the [setTemplates-method](https://book.cakephp.org/4/en/views/helpers/form.html#customizing-the-templates-formhelper-uses) at the moment, can easily change the presentation of the radio buttons per page.

Will keep flex in mind should bigger issues arise.