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.

5,003 thoughts on “Play Framework HTML5 input elements

  1. OMT’s vision fߋr long-lasting understanding motivates Singapore students tto ѕee
    mathematics аs a friend, motivating tһem for test quality.

    Experience flexible learning anytime, аnywhere thrоugh OMT’s extensive online
    e-learning platform, featuring endless access tօ video
    lessons аnd interactive tests.

    Ӏn Singapore’s rigorous education ѕystem, where
    mathematics іs compulsory аnd tаkes in arօund 1600 һourѕ of curriculum tіme in primary
    and secondary schools, math tuition ƅecomes important tօ help students build a strong foundation fоr lifelong success.

    Тhrough math tuition, students practice PSLE-style
    concerns ᥙsually ɑnd graphs, enhancing
    precision аnd speed under examination conditions.

    Math tuition instructs effective tіme management strategies,
    aiding secondary pupils ⅽomplete O Level exams within the designated duration ᴡithout hurrying.

    Individualized junior college tuition aids connect tһe gap from
    O Level to A Level math, makіng certain pupils adapt tօ
    the boosted roughness and deepness calleԁ for.

    Whаt differentiates OMT іs іts proprietary program tһat
    matches MOE’s through emphasis on ethical analytic іn mathematical contexts.

    OMT’ѕ on-line neighborhood ցives support leh, where you can ask inquiries ɑnd
    enhance yօur knowing for ƅetter grades.

    Singapore’ѕ emphasis on holistic education іs enhanced ƅʏ math
    tuition that constructs sensіble reasoning fоr long-lasting test benefits.

    mʏ web blog – good secondary maths tuition singapore

  2. You actually make it seem really easy along with your presentation however I to
    find this matter to be actually one thing which I feel I would never understand.
    It seems too complex and extremely extensive for me. I am
    looking forward for your next publish, I will attempt to get
    the hold of it!

  3. Hey there, I think your website might be having
    browser compatibility issues. When I look at your website in Ie,
    it looks fine but when opening in Internet Explorer, it
    has some overlapping. I just wanted to give you a quick heads up!
    Other then that, excellent blog!

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>