Play Framework: How to set help text on inputText fields (Play templates/forms)

If you want to see an example of a Play Framework 2.6 data entry form that that sets help text (tips or tooltips) on text input fields (Play inputText fields), here’s an example of the required syntax:

@(
    form: Form[BlogPost],
    postUrl: Call
)(implicit request: MessagesRequestHeader)

@main("Blog Post") {

    <h1>Blog Post</h1>

    @* Flash shows updates to a page *@
    @request.flash.data.map{ case (name, value) =>
        <div>@name: @value</div>
    }

    @* Global errors are not tied to any particular form field *@
    @if(form.hasGlobalErrors) {
        @form.globalErrors.map { error: FormError =>
            <div>
                Error: @error.key: @error.message
            </div>
        }
    }

    @* “'id” in these elements is the css `id` field that will be shown *@
    @helper.form(postUrl, 'id -> "blog_edit_form") {
        @helper.CSRF.formField

        @helper.inputText(
            form("title"),
            '_label -> "Title",
            'placeholder -> "the title of your blog post",
            'id -> "title",
            'size -> 60
        )
        @helper.textarea(
            form("blogContent"),
            '_label -> "Content",
            'rows -> 10,
            'cols -> 60
        )
        @helper.inputText(
            form("tags"),
            '_label -> "Tags",
            'placeholder -> "comma-separated list (foo, bar baz, bazzle)",
            'size -> 60
        )
        @helper.textarea(
            form("description"),
            '_label -> "Description",
            'rows -> 2,
            'cols -> 60
        )
        @helper.inputText(
            form("uri"),
            '_label -> "URI",
            'placeholder -> "must start with a /",
            'size -> 60
        )

        <button>Save</button>
    }

}

The placeholder attributes on those inputText fields are the ones that set the help text on the input text fields. The placeholder attribute came along with HTML5, and it’s a nice way to set “tooltip”-like help text on input fields without the need for JavaScript.

FWIW, here’s what that Play Framework form looks like in a browser:

A Play Framework data entry form with tooltip help text

In summary, if you wanted to see a Play Framework data entry form/template that shows how to set attributes like help text (also known as tips, tooltips, or more accurately as placeholder text), along with other features such as setting labels on data entry fields, I hope this example is helpful.

Add new comment

The content of this field is kept private and will not be shown publicly.

Anonymous format

  • Allowed HTML tags: <em> <strong> <cite> <code> <ul type> <ol start type> <li> <pre>
  • Lines and paragraphs break automatically.