How to specify name attribute in h:inputText?

Question

I need to render h:inputText as following html output :

Answer 1

You can't achieve it using <h:inputText>. Its name is autogenerated by JSF based on the client ID (which is in turn based on component ID and all of its naming container parents).

You've basically 2 options to achieve the concrete functional requirement anyway:

1. If there are no other naming container parents, instruct the parent form to not prepend its ID:

   <h:form prependId="false">
   

   This will however cause <f:ajax> to fail.

2. Use plain HTML elements instead of JSF components:

   <input name="name" value="#{bean.name}" />
   <input name="email" value="#{bean.email}" />
   

   You only have to collect them yourself via @ManagedProperty on a request scoped bean:

   @ManagedProperty("#{param.name}")
   private String name;
   
   @ManagedProperty("#{param.email}")
   private String email;
   

   And you'll miss JSF builtin validation/conversion facility and ajax magic.

There's however a completely different alternative: use HTML5 <input type="email">. This way the browser will autosuggest all previously entered emails on inputs of the very same type. This is not natively supported by <h:inputText>. You can however use a custom render kit to get it to work, as answered in Adding custom attribute (HTML5) support to Primefaces (3.4):

<h:inputText type="email" ... />

---

Update as of JSF 2.2 you can finally easily declare passthrough attributes without needing a custom render kit.

<... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
...
<h:inputText a:type="email" ... />

Answer 2

You are able to do what you want without specifying the name attribute. The id attribute is enough. Try the following as per an example:

< h:inputText id="email" ... />

...
$("#email input").click(function (event) {
...
}

instead of

$("#email input[name='email']").click(function (event) 

Hope this is what you are looking for :)