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.

6,210 thoughts on “Play Framework HTML5 input elements

  1. Hi there just wanted to give you a quick heads up and let you
    know a few of the images aren’t loading correctly. I’m not
    sure why but I think its a linking issue. I’ve tried it in two different browsers
    and both show the same outcome.

  2. Hey there just wanted to give you a quick heads up.
    The words in your post seem to be running off the screen in Chrome.
    I’m not sure if this is a formatting issue or
    something to do with web browser compatibility but I thought I’d post to let you know.

    The design and style look great though! Hope you get the
    issue fixed soon. Kudos

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>