Play Framework HTML5 input elements

The built in Play input elements are fairly restrictive in that you can’t specify the input type. I wrote a helper template that you can use to generate input elements which have HTML5 type attributes such as url, email, number, search etc. etc.

All you have to do is call the template method, passing the HTML input type as a parameter. For example:

@helper.html5.input(form("website"), '_label -> "Website:", 'type -> "url")

If you have a form field mapped as a play.api.data.Forms.email then the template will automatically infer it’s type so you don’t have to pass the type attribute in with your html attributes:

@helper.html5.input(form("email"), '_label -> "Email:")

If your field has the required constraint, e.g. it is a “nonEmptyText” then the template will add the HTML5 “required” attribute to the field as well.

You can get the source code here.

13,355 thoughts on “Play Framework HTML5 input elements

  1. Hi there, I discovered your blog by way of Google whilst looking
    for a comparable subject, your web site got here up, it looks
    good. I’ve bookmarked it in my google bookmarks.

    Hi there, simply was alert to your blog through Google, and found that it
    is really informative. I am gonna watch out for brussels.
    I will appreciate should you proceed this in future. A
    lot of other people will probably be benefited out of your
    writing. Cheers!

  2. Wow, superb blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of your
    web site is excellent, as well as the content!

  3. You are so cool! I do not believe I have read something like that
    before. So great to discover someone with a few genuine
    thoughts on this issue. Seriously.. thank you for starting this up.

    This site is something that is required on the internet, someone
    with some originality!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>