h:inputText - jsf does not render the placeholder

Question

I want to create a landingPage and I want to save the data in my database through jsf 2.0 and Primefaces 3.5

My page *.xhtml page looks like this:

enter image description here

However, I want to make it look like my HTML page:

enter image description here

Besides the CSS my h:inputText should contain a placeholder. My code looks like this:

<h:form class="homepage_invitee_form" action="" method="POST">
    <h:inputText name="email" placeholder="Email Address"
                 id="email_address_new" type="text placeholder" />
    <br />
    <h:inputText name="firstName" placeholder="First Name"
                 id="firstname_new" type="text placeholder" />
    <h:inputText name="lastName" placeholder="Last Name"
                 id="lastname_new" type="text placeholder" />
    <br />
    <h:button value="Request Invitation" type="submit" class="btn btn-primary opal_btn"
              id="submit_form_new" />
</h:form>

As you can see the placeholder attribute doesn't get rendered. I would really appreciate any idea as to how to render that properly.

UPDATE

My HTML code looks like this:

<form class="homepage_invitee_form" action="" method="POST">
    <input name="email" placeholder="Email Address" id="email_address_new" type="text placeholder"><br>
    <input name="firstName" placeholder="First Name" id="firstname_new" type="text placeholder">
    <input name="lastName" placeholder="Last Name" id="lastname_new" type="text placeholder"><br> 
    <button type="submit" class="btn btn-primary opal_btn" id="submit_form_new">Request Invitation</button>
</form>

The answer is here: http://stackoverflow.com/questions/8494264/where-is-the-placeholder-text-going-when-using-jsf-and-inputtext — NeplatnyUdaj, Apr 17 '13 at 13:27

score 10 · Accepted Answer · edited Dec 12 '14 at 19:56

10

Use p:watermark in xhtml instead of your placeholders. Other visual design is totally about your css.

Here look at this primefaces showcase

edited Dec 12 '14 at 19:56

ArnoHolo

311
3
13

answered Apr 17 '13 at 13:28

oko

1,295
1
14
30

score 8 · Answer 2 · answered Aug 19 '14 at 11:27

For JSF 2.2 (JEE 7), you can use the namespace

xmlns:p="http://xmlns.jcp.org/jsf/passthrough"

then use it e.g.:

<h:inputText value="#{bean.field}" p:placeholder="supply value"/>

This passes it through to the generated HTML (NB: HTML 5 attribute).

See http://www.adam-bien.com/roller/abien/entry/jsf_2_2_and_html .

score 0 · Answer 3 · answered Nov 14 '14 at 16:07

I ran into this same issue and fixed it. You may not be using the proper xmln namespace on that tag.

Make sure the "h" xmln namespace is mapped to PrimeFaces. Normally this is mapped to "http://java.sun.com/jsf/html" and the xmln namespace "p" is normally mapped to PrimeFaces, "http://primefaces.org/ui". If you have the normal mappings then you need to change the xmln on that code to "p" instead of "h":


    <h:form class="homepage_invitee_form" action="" method="POST">
       <p:inputText name="email" placeholder="Email Address"
       id="email_address_new" type="text placeholder" />
       <br />
       ...

h:inputText - jsf does not render the placeholder

3 Answers3

Linked