[Html-widget] Label synthax and CSS

Ash Berlin ash at cpan.org
Thu Nov 23 15:02:17 GMT 2006


Zbigniew Lukasiak wrote:
> Hi,
> 
> I've started an app to test and publish new CSS designs for
> HTML::Widget at: http://zby.aster.net.pl/csslab/css
> 
> For now I've saved there the example CSS mentioned somewhere here on
> the list and the CSS we use in Catalyst::Example::InstantCRUD.
> 
> I am waiting for comments.  The first quesition is what legal
> boilerplate I should put there.
> -- 
> Zbyszek
> 
> On 11/23/06, Yves Räber <yves.raber at obalis.com> wrote:
>> Hello,
>>
>> >From the W3C website 
>> (http://www.w3.org/TR/html4/interact/forms.html#h-17.9) I
>> see that the <label> element should be used like this :
>>
>> <FORM action="..." method="post">
>> <TABLE>
>> <TR>
>> <TD><LABEL for="fname">First Name</LABEL>
>> <TD><INPUT type="text" name="firstname" id="fname">
>> <TR>
>> <TD><LABEL for="lname">Last Name</LABEL>
>> <TD><INPUT type="text" name="lastname" id="lname">
>> </TABLE>
>> </FORM>
>>
>> But when creating a form with HTML::Widget, I get this kind of output :
>>
>> <label for="widget_name" id="widget_name_label">Name
>> <input id="widget_name" name="name" size="60" type="text" value="sri"
>> class="Textfield" />
>> <span class="error_messages" id="widget_name_errors"></span>
>> </label>
>>
>> The input element is inside the label element, and this is giving me a 
>> lot of
>> trouble creating a CSS to theme my forms.
>>
>> And another thing ... where can I find a already done CSS that works with
>> HTML::Widget ? I tested simple.css, but it's really simple but not so 
>> pretty
>> (no alignment). I have to admit I'm not a CSS guru and this has probably
>> already be done many times.
>>
>> Thanks
>>
>> Yves.
>>
>>

And if you want to change the way the labels are done (the way it is 
currently output is valid however, but i didn't like it either) see the 
docs for HTML::Widget::Element::container_class and an example that will 
do what you want is at 
http://search.cpan.org/src/CFRANKS/HTML-Widget-1.10/t/lib/TestContainer.pm 
(I think that does it anyway - i did when I first added that feature)

Ash




More information about the Html-widget mailing list