2

So I've been reading a lot of "Designing with Web Standards" and really enjoying it. I'm a big CakePhp user, and as I look at the source for various form elements that Cake creates with its FormHelper, I see all sorts of extraneous

In the book, he promotes semantic HTML, and writing your markup as simple / generic as possible.

So my question is, am I better writing my own HTML in these situations? I really want to work in compliance with XHTML and CSS standards, and it seems I'd spend just as much time (if not more) cleaning up Cakes HTML, when I could just write my own

thoughts?

p.s. Here's an example in an out of the box form that CakePhp generates using the FormHelper

<form id="CompanyAddForm" method="post" action="/omni_cake/companies/add" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST" /></div>       <div class="input text required"><label for="CompanyName">Name</label><input name="data[Company][name]" type="text" maxlength="50" id="CompanyName" /></div>        <div class="input text required"><label for="CompanyWebsite">Website</label><input name="data[Company][website]" type="text" maxlength="50" id="CompanyWebsite" /></div>        <div class="input textarea"><label for="CompanyNotes">Notes</label><textarea name="data[Company][notes]" cols="30" rows="6" id="CompanyNotes" ></textarea></div>        <div class="submit"><input type="submit" value="Submit" /></div></form>

EDIT: An in an indented form (indentation does not effect the standards compliance issue, but the above one-liner style is nearly impossible to read):

<form id="CompanyAddForm" method="post" action="/omni_cake/companies/add" accept-charset="utf-8">
    <div style="display:none;">
       <input type="hidden" name="_method" value="POST" />
    </div>
    <div class="input text required">
        <label for="CompanyName">Name</label>
        <input name="data[Company][name]" type="text" maxlength="50" id="CompanyName" />
    </div>
    <div class="input text required">
        <label for="CompanyWebsite">Website</label>
        <input name="data[Company][website]" type="text" maxlength="50" id="CompanyWebsite" />
    </div>
    <div class="input textarea">
        <label for="CompanyNotes">Notes</label>
        <textarea name="data[Company][notes]" cols="30" rows="6" id="CompanyNotes" ></textarea>
    </div>
    <div class="submit">
        <input type="submit" value="Submit" />
    </div>
</form>

In the above, there's those couple divs that seem unnecessary like the one that has inline CSS "display:none". I realized I can change classes and IDs of all the fields, but if I'm doing do that for each one, I might as well write the HTML myself...

7
  • What do you think is extraneous, what would you do differently? Also, XHTML is dead. Also, please format code next time, I did it for you.
    – deceze
    Jan 5, 2011 at 23:59
  • 1
    I suppose it's another conversation, but why is XHTML dead? Are you saying in favor of HTML5? I thought that still had a ways to go yet..
    – dtj
    Jan 6, 2011 at 0:01
  • @deceze: XHTML is so very far away from being "dead". HTML5 is not even fully supported across the major browsers yet.
    – Orbling
    Jan 6, 2011 at 0:07
  • @djt: Added a proper reformat for you so that it is readable - CakePHP may not add indentation and line breaks, but it is needed for readability here. The whitespace should not make any difference to the standards compliance.
    – Orbling
    Jan 6, 2011 at 0:14
  • yes, sorry. I'm not referring to the white space though. By default, they throw all sorts of classes and IDs, they have that hidden form field with the inline CSS... I'd rather have it start more stripped, and add such things only if I need them
    – dtj
    Jan 6, 2011 at 0:18

4 Answers 4

3

My answers to your two questions are as follows:

Is CakePhp 'standards compliant' when generating HTML, Forms, etc?

Yes.

In [Designing with Web Standards], he promotes semantic HTML, and writing your markup as simple / generic as possible. So my question is, am I better writing my own HTML in these situations?

Sometimes you are better off, sometimes you're not. If your goal is to use minimal, semantic markup, you could be better off writing your own HTML most of the time. However, if your goal is to generate standards compliant HTML quickly, then allowing Cake to be what it's meant to be—a rapid development framework—is a good idea.

That said, you can tell Cake not to print some of its markup when you find it unnecessary. For example, you can suppress the div elements that wrap form inputs by using a value of false with this option: http://book.cakephp.org/view/1397/options-div

0
1

The markup output by Cake helpers is certainly standards compliant, as you can check at any time. What it could possibly be is simpler, but not much more so. The <div style="display:none;"> container with hidden input fields may be superfluous, but it's nicely grouping these fields and getting them out of the way. If you're using the SecurityComponent you'll find many more of these necessary hidden fields, which makes the wrapping <div> less superfluous. Apart from that, I have a hard time finding any really extraneous markup.

If you're not happy with the <div><label><input>[error]</div> structure, you can use the specialized $this->Form->label() etc. methods to produce only the input elements and wrap them in your own container elements. Just remember to include the $this->Form->error() as well somewhere.

I think the best way is to start prototyping your apps using basic $this->Form->input() groups of elements. Often these are perfectly serviceable in the final app as well. If during development you realize you need different markup than what Cake offers you, you can start transitioning to more custom markup. The one thing you should not do is write your own <input> elements, you should always use the FormHelper methods to produce those, since it's taking care of a lot of details that are a pain to reproduce properly by hand.

Apart from the FormHelper, I don't think there's anything to complain about in Cake's HTML markup, since you're writing most of the rest yourself.

0
0

According to the CakePHP book, the generated HTML is standards compliant.

You could override the default HTML output from the FormHelper methods by extending the Helper class.

More information here

0

Question already answered but maybe worth adding that this depends on which standards, and which version of CakePHP.

HTML5 form input types are not supported by the FormHelper in 1.2.x and 1.3.x, for example

echo $this->Form->input('User.email', array('type' => 'email'));

will output something like

<div class="input textarea">
    <label for="UserEmail">Email</label>
    <textarea id="UserEmail" name="data[User][email]"></textarea>
</div>

Apparently this will be fixed in 2.0.x.

Another edge case is if you have more than one form on the page with the same model you may end up with duplicate HTML identifiers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.