使用Play表单助手为一些字段并排布局

Question

我是Play框架和使用play 2.5.2的新手。 在某些页面中，我需要一个接一个地显示几个字段。

例如：

产品名称

[产品名称的文本框]

产品类别

[产品类别的文本框]

价格范围：从[输入框]到[输入框]

市

[城市文本框]

制造日期：从[输入框]到[输入框]

如何实现此布局（仅以不同方式显示价格范围和制造日期）？

我正在使用views.html.helper（@import helper._）而不是twitter bootstrap。 这就是我使用它的方式：

@inputText(
  extractSearchForm("productName"),
  '_label -> "Product name",
  'placeholder -> "Product name for ex: Jess Toer"
)

Answer 1

我相信有很多方法可以做到这一点。

以下是使用id字段自定义css的示例。 （我不擅长CSS，希望有些人能说出更好的CSS代码。）

<style>
.my_form {
  text-align:left;
}

#from dt {
  float:left;
}
#from dd {
  float:left;
}

#to {
  float:left;
}
#to dt {
  float:left;
}
#to dd {
  float:left;
}

#city
{
  clear:left;
}
</style>

<div class="my_form">
@inputText(formData("username"), '_id -> "name", '_label -> "Product name", 'placeholder->"Product name", '_help -> "")
@inputText(formData("username"), '_id -> "category", '_label -> "Product category", 'placeholder->"Product category", '_help -> "")
@inputText(formData("username"), '_id -> "from", '_label -> "Price range: from", 'placeholder->"from", '_help -> "")
@inputText(formData("username"), '_id -> "to", '_label -> "to", 'placeholder->"to", '_help -> "")
@inputText(formData("username"), '_id -> "city", '_label -> "City", 'placeholder->"City", '_help -> "")
</div>

然后你可以看到如下的输出。

如果你构建自己的表单构造函数，那么它会更好。