CODEWITHSUNDEEP
javahtmlcssjsfprimefaces
maximus
maximus

Reputation: 11524

h:inputText - jsf does not render the placeholder

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>

Upvotes: 7

Views: 20713

Answers (3)

oko
oko

Reputation: 1355

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

Here look at this primefaces showcase

Upvotes: 10

Go Rose-Hulman
Go Rose-Hulman

Reputation: 2707

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 />
       ...

Upvotes: 0

frIT
frIT

Reputation: 3285

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 .

Upvotes: 8

Related Questions