Bug #26481

Task #26664: Clean up Form ViewHelpers

Task #26658: Make Form ViewHelpers consistent

hidden fields should be rendered in extra section

Added by Sven-S. Porst over 4 years ago. Updated about 3 years ago.

Status:Resolved Start date:2011-04-29
Priority:Should have Due date:
Assigned To:Bastian Waidelich % Done:

100%

Category:ViewHelpers
Target version:TYPO3 Flow Base Distribution - 1.1 RC1
Has patch:No Affected Flow version:Git master

Description

The form.checkbox view helper works in an unexpected way because it creates two, rather than one <input> elements.

This is a problem when using markup like

<label>
  <f:form.checkbox ...>
  Checkbox name
</label>

as one ends up having two <input>s inside the <label> which is invalid HTML. One has to make the effort to create id and for attributes for both tags to get things working correctly. This could be simpler.

In the long term it may be worth considering to add explicit support for <label> tags to the form field view helpers, to encourage label usage by offering straightforward support for it from the templating engine.

UPDATE: The solution would be to render the "automatically generated" hidden fields for checkboxes and select dropdowns in the hidden fields section at the beginning of a form


Related issues

related to TYPO3.Fluid - Bug #33628: Multicheckboxes (multiselect) for Collections don’t work Needs Feedback 2012-02-02
related to TYPO3.Fluid - Task #13342: f:form.checkbox does only render hidden input for first i... Resolved 2011-02-24

Associated revisions

Revision f25fa5fb
Added by Bastian Waidelich about 3 years ago

[BUGFIX] hidden fields should be rendered in extra section

Currently form.select and form.checkbox ViewHelpers render
hidden fields before the actual input field in order to
force submission of a value.
This leads to the situation that labels wrapped around the
field do not correspond to the actual form field, but to
the hidden field.
This is fixed by letting the form ViewHelper taking care of
rendering the requried hidden fields in the already existing
section on top of the form.

Change-Id: I77cc9061a36d2a2984bf479868b1138c513e47f8
Fixes: #26481
Fixes: #13342
Releases: 1.1, 1.2

Revision 9f01a42d
Added by Bastian Waidelich about 3 years ago

[BUGFIX] hidden fields should be rendered in extra section

Currently form.select and form.checkbox ViewHelpers render
hidden fields before the actual input field in order to
force submission of a value.
This leads to the situation that labels wrapped around the
field do not correspond to the actual form field, but to
the hidden field.
This is fixed by letting the form ViewHelper taking care of
rendering the requried hidden fields in the already existing
section on top of the form.

Change-Id: I77cc9061a36d2a2984bf479868b1138c513e47f8
Fixes: #26481
Fixes: #13342
Releases: 1.1, 1.2

History

#1 Updated by Bastian Waidelich over 4 years ago

  • Status changed from New to Needs Feedback
  • Assigned To set to Bastian Waidelich

Sven-S. Porst wrote:

as one ends up having two <input>s inside the <label> which is invalid HTML.

Why do you think, that this is invalid HTML?
Try to validate this:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
    <title>Form test</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
 </head>
 <body>
    <form action="foo" method="post">
        <ul>
            <li>
                <label>Foo <input type="hidden" name="foo" value="" /><input type="checkbox" name="foo" value="bar" /></label>
            </li>
        </ul>
    </form>
</body>
</html>

on http://validator.w3.org/#validate_by_input

#2 Updated by Sven-S. Porst over 4 years ago

Try validating against HTML 5.

Besides: If you're using the markup in your example you'll notice that it doesn't work as expected – clicking the label will not select the checkbox (presumably because the browser implicitly associates the label to the first <input> element it contains in this ambiguous situation). So it's poor usability which is how I found this problem to begin with. In fact, I'm surprised doing this was valid in HTML 4.

#3 Updated by Bastian Waidelich over 4 years ago

Sven-S. Porst wrote:

Try validating against HTML 5.
[...] it doesn't work as expected [...]

Good point(s) ;)
I'm not sure how to solve this though.. I don't think, that the form view helper should output the label, because then you'd have to be able to specify some kind of template for the exact output.
Maybe a solution would be to make the hidden field optional (<f:form.checkbox createHiddenField="false" />) so that you'd be able to render it yourself. To avoid a lot of duplicate template code, you could put this into a partial:

1<li>
2    <f:form.hidden property="{property}" value="" />
3    <label>
4        {label}
5        <f:form.checkbox property="{property}" createHiddenField="false" />
6    </label>
7</li>

and use it like:

1<f:render partial="Checkbox" arguments="{property: 'foo', label: 'Foo'} />

what do you think?

#4 Updated by Sven-S. Porst over 4 years ago

The createHiddenField approach would certainly help with my specific problem.

On the other hand, adding an extra paramter would add addional complexity to the view helper's interface, so I'm not sure this is a really good solution if the templating is meant to be easy to use.

If one needs those hidden fields, a more elegant solution would be if the hidden fields were not inserted directly by the form field's view helper but collected by the containing form view helper and then inserted at the beginning of the form.

#5 Updated by Bastian Waidelich over 4 years ago

  • Assigned To changed from Bastian Waidelich to Sebastian Kurfuerst

Sven-S. Porst wrote:

[...] a more elegant solution would be if the hidden fields were not
inserted directly by the form field's view helper but collected by the containing
form view helper and then inserted at the beginning of the form.

I like this idea. The form already renders a section with hidden fields anyways.. Assigning this to Sebastian so he can give his input. @Sebastian feel free to re-assign this to me

#6 Updated by Sebastian Kurfuerst over 4 years ago

  • Assigned To changed from Sebastian Kurfuerst to Bastian Waidelich

Nice idea! However it must be at the beginning of the form. I am not sure, if the referrers are added before or after?

So, +1 to changing it so they are added at the beginning of the form!

Greets,
Sebastian

#7 Updated by Sven-S. Porst over 4 years ago

The referrers are inserted at the beginning of the form. So the setup seems to be just right.

#8 Updated by Sebastian Kurfuerst about 4 years ago

  • Parent task set to #26658

#9 Updated by Robert Lemke almost 4 years ago

  • Target version changed from 1.0 beta 2 to 1.0.0

#10 Updated by Bastian Waidelich almost 4 years ago

  • Subject changed from form field view helpers could do with better support for <label> to render fluid hidden fields in extra section
  • Has patch set to No

#11 Updated by Bastian Waidelich almost 4 years ago

  • Status changed from Needs Feedback to Accepted

#12 Updated by Karsten Dambekalns almost 4 years ago

  • Target version deleted (1.0.0)

#13 Updated by Bastian Waidelich about 3 years ago

  • Target version set to 1.1

#14 Updated by Karsten Dambekalns about 3 years ago

  • Target version changed from 1.1 to 1.1 RC1

#15 Updated by Bastian Waidelich about 3 years ago

Sorry for the delay on this one. I take care of implementing this for 1.1!

#16 Updated by Bastian Waidelich about 3 years ago

  • Tracker changed from Task to Bug
  • Subject changed from render fluid hidden fields in extra section to hidden fields should be rendered in extra section
  • Affected Flow version set to Git master

#17 Updated by Gerrit Code Review about 3 years ago

  • Status changed from Accepted to Under Review

Patch set 1 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/11648

#18 Updated by Sebastian Kurfuerst about 3 years ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100

#19 Updated by Gerrit Code Review about 3 years ago

  • Status changed from Resolved to Under Review

Patch set 1 for branch FLOW3-1.1 has been pushed to the review server.
It is available at http://review.typo3.org/12158

#20 Updated by Bastian Waidelich about 3 years ago

  • Status changed from Under Review to Resolved

Also available in: Atom PDF