Form & Radio: URL double selection, lay-out

1

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

	<?= $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

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

	<?= $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
Screenshot_2022-01-31_09-55-20666×646 24.7 KB

That double ‘selection=’?

2

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

3

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.

4

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

5

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

6

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

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

            // 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?

7

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 :wink:

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

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.

8

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 at the moment, can easily change the presentation of the radio buttons per page.

Will keep flex in mind should bigger issues arise.