Awesome Open Source
Awesome Open Source

HTML5 form tags module for Play Framework

for Java and Scala

This module brings client side validation attributes (required, max|min length, ...) and formats support (date, number, email, ...) to Play templates. The provided tags can also display forms with special input controls, like a numeric keypad to enter numbers on a smartphone, a calendar for date selection and so on.

Attributes are generated from the constraints defined in the model or in a form mapping.



This module is compatible with Play >= 2.1.

How to install it

In your application, add this configuration to the build.sbt file :

libraryDependencies ++= Seq(
  //your dependencies
  "com.loicdescotte.coffeebean" %% "html5tags" % "1.2.2"

resolvers += Resolver.url("github repo for html5tags", url(""))(Resolver.ivyStylePatterns)


This module supports several versions of Play and Scala.

Module version Play version Scala version
1.1.0 2.1.x 2.10.x
1.1.1 2.2.x 2.10.x
1.2.1 2.3.x 2.11.x, 2.10.x
1.2.2 2.4.x, 2.5.x 2.11.x, 2.10.x

Code examples

With this view template :

@import html5.tags.html._

@text(form("name"), 'label -> "Your name : ")
@number(form("age"), 'label -> "Your age : ")

If your form mapping is defined like this (Scala) :

  "name" -> nonEmptyText(maxLength=10),
  "age" -> number

Or if your model contains this (Java) :

public String name;

public Integer age;

The generated output will be :

<input type="text" id="name" name="name" value="" label="Your name : " required maxlength="10">
<input type="number" id="age" name="age" value="" label="Your age : ">

Then the browser will check that the name field is not empty and the age input is a number, before sending to server. It will also limit the length of the name input.

A few examples with pictures

Email validation :


Telephone number keyboard (on Safari mobile) :


Available tags and formats

You can use the following tags :

And the following constraint values on models/mappings :

  • required (or nonEmpty or nonEmptyText)
  • maxLength
  • minLength
  • max
  • min
  • pattern (regular expressions)

Note : you can check features and browsers compatibility for this new attributes on [wufoo] (

Magic tag

The text tag is able to change the input type if a specific format is detected.

For example, using the email constraint :

public String contactMail;

And this tag :

@text(form("contactMail"), 'label -> "Your mail : ")

The generated output will be :

<input type="email" id="contactMail" name="contactMail" value="">

And the browser will check that the field contains an email address.

The same trick is working with number input type if you use max/min constraints.

Important notes

MinLength behavior

As minLength does not exist in HTML5 specification, a regular expression pattern will be used to simulate it. If you need both 'minLength' and 'pattern' on a field, write the min length constraint directly in your regex pattern. Example : add {2,} to your pattern for minLength=2.

Browser regex patterns

You can check pattern compatibility with Javascript regular expressions (used by browsers) on [regexpal] ( (check the 'Dot matches all' option).


This project is published under the Apache License v2.0.

You may obtain a copy of the License at [] (

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
html (10,849
frontend (501
html5 (451
validation (312
forms (167
templates (111
client-side (44
play-framework (36

Find Open Source By Browsing 7,000 Topics Across 59 Categories