文档

§表单模板助手

Play 提供了一些助手来帮助您在 HTML 模板中渲染表单字段。

§创建 <form> 标签

第一个助手创建 <form> 标签。这是一个非常简单的助手，它会根据您传入的反向路由自动设置 action 和 method 标签参数。

@helper.form(action = routes.Application.submit) {

}

您还可以传入一组额外的参数，这些参数将被添加到生成的 HTML 中。

@helper.form(action = routes.Application.submit, Symbol("id") -> "myForm") {

}

§渲染 <input> 元素

views.html.helper 包中包含多个输入助手。您可以向它们提供一个表单字段，它们将显示相应的 HTML 表单控件，包括填充的值、约束和错误。

@(myForm: play.data.Form[User])(implicit messages: play.i18n.Messages)

@helper.form(action = routes.Application.submit) {

    @helper.inputText(myForm("email"))

    @helper.inputPassword(myForm("password"))

}

与 form 助手一样，您可以指定一组额外的参数，这些参数将被添加到生成的 HTML 中。

@helper.inputText(myForm("email"), Symbol("id") -> "email", Symbol("size") -> 30)

注意：所有额外的参数都将被添加到生成的 HTML 中，除了名称以 _ 字符开头的参数。以下划线开头的参数保留用于字段构造函数参数（我们将在后面看到）。

§自己处理 HTML 输入创建

还有一个更通用的 input 助手，它允许您编写所需的 HTML 结果。

@helper.input(myForm("email")) { (id, name, value, args) =>
    <input type="date" name="@name" id="@id" @toHtmlArgs(args)>
}

§字段构造函数

渲染的字段不仅包含 <input> 标签，还可能需要 <label> 标签以及 CSS 框架用来装饰字段的一系列其他标签。

所有输入助手都接受一个隐式的 FieldConstructor，它负责处理这部分。默认的构造函数（如果作用域中没有其他字段构造函数，则使用它）会生成类似于以下的 HTML：

<dl class="error" id="email_field">
    <dt><label for="email">Email:</label></dt>
    <dd><input type="text" name="email" id="email" value=""></dd>
    <dd class="error">This field is required!</dd>
    <dd class="error">Another error</dd>
    <dd class="info">Required</dd>
    <dd class="info">Another constraint</dd>
</dl>

此默认字段构造函数支持您可以在输入助手参数中传入的额外选项。

'_label -> "Custom label"
'_id -> "idForTheTopDlElement"
'_help -> "Custom help"
'_showConstraints -> false
'_error -> "Force an error"
'_showErrors -> false

§编写您自己的字段构造函数

通常您需要编写自己的字段构造函数。首先编写一个类似于以下的模板：

@(elements: helper.FieldElements)

<div class="@if(elements.hasErrors) {error}">
<label for="@elements.id">@elements.label</label>
<div class="input">
    @elements.input
    <span class="errors">@elements.errors.mkString(", ")</span>
    <span class="help">@elements.infos.mkString(", ")</span>
</div>
</div>

将它保存在 views/ 目录下，并命名为 myFieldConstructorTemplate.scala.html。

注意： 这只是一个示例。您可以根据需要将其变得更加复杂。您还可以使用 @elements.field 访问原始字段。

现在，使用以下方法在某个地方创建一个 FieldConstructor

@implicitField: FieldConstructor = @{ FieldConstructor(myFieldConstructorTemplate.f) }

@inputText(myForm("email"))

§处理重复值

最后一个助手可以更轻松地为重复值生成输入。假设您有以下类型的表单定义

public class UserForm {

  private String name;
  private List<String> emails;

  public void setName(String name) {
    this.name = name;
  }

  public String getName() {
    return name;
  }

  public void setEmails(List<String> emails) {
    this.emails = emails;
  }

  public List<String> getEmails() {
    return emails;
  }
}

当您使用这种重复数据时，在 HTTP 请求中发送表单值有两种选择。首先，您可以用一对空括号作为后缀来添加参数，例如“emails[]”。然后，可以以标准方式重复此参数，例如 http://foo.com/request?emails[][email protected]&emails[][email protected]。或者，客户端可以使用数组下标显式地唯一命名参数，例如 emails[0]、emails[1]、emails[2] 等。这种方法还允许您维护输入序列的顺序。

现在，您必须为 emails 字段生成与表单中包含的输入数量相同的输入。只需为此使用 repeat 助手即可

@helper.inputText(userForm("name"))

@helper.repeat(userForm("emails"), min = 1) { emailField =>

    @helper.inputText(emailField)

}

使用 min 参数来显示最小数量的字段，即使相应的表单数据为空。

如果您想访问字段的索引，可以使用 repeatWithIndex 助手代替

@helper.repeatWithIndex(userForm("emails"), min = 1) { (emailField, index) =>

    @helper.inputText(emailField, Symbol("_label") -> ("email #" + index))

}

下一步： 使用 Json

发现此文档中的错误？此页面的源代码可以在 这里 找到。阅读完 文档指南 后，请随时贡献拉取请求。有疑问或建议要分享？访问 我们的社区论坛，与社区开始对话。