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!

Answer 1

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.