JSF / CSS attribute conflicts

Question

It's our first JSF app, and I'm in the middle of integrating our graphic designer's CSS into our facelets files. He tells me that he needs the name and id attributes of the input tags to be the same as the for attribute of the label tag.

His request:

<label for="username">User Name:</label>
<input id="username" type="text" name="username" />

However, when JSF code renders the HTML, I get extra identifiers in these attributes.

My facelet code:

<label for="username">User Name:</label>
<h:inputText value="#{login.username}" id="username" name="username" />

Final XHTML that's sent to the browser:

<label for="username">User Name:</label>
<input id="j_id2:username" type="text" name="j_id2:username" />

It makes sense to me from a JSF standpoint, but is there a way for me to meet our graphic designer's request and make everyone happy? Or is this a bad JSF oversight?

Thanks!

Simon Lehmann · Accepted Answer · 2008-10-13 16:57:33Z

5

You can use the JSF outputLabel tag, which should handle the ids automatically:

<h:inputText id="username">
    <h:outputLabel for="username" value="User Name: "/>
</h:inputText>

Edit: To avoid confusion: You can also put the outputLabel outside the inputText Element. I just use it mostly like this.

edited Oct 13, 2008 at 16:57

answered Oct 13, 2008 at 16:49

Simon Lehmann

11k4 gold badges44 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JSF / CSS attribute conflicts

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related