为 Ruby on Rails 应用程序设计表单答案

【问题标题】：designing a form for a Ruby on Rails application为 Ruby on Rails 应用程序设计表单
【发布时间】：2017-01-25 22:59:32
【问题描述】：

这是a link 我设计的一个简单的 HTML 表单。我正在寻找使用 Ruby on Rails 创建这种“内联”的最佳方法。是否有 gems 或其他工具来创建这种形式？

我真正想要的是一种类似电子表格的输入，其中包含可以一次编辑的多行。在此之上，必要时滚动并添加新行。我认为 CoffeeScript / JavaScript 或类似工具可以做到这些技巧！

这件事在我的脑海里已经有很长一段时间了；我已经搜索了示例和/或教程，但到目前为止我找不到真正适合我的东西。欢迎任何提示或示例！

谢谢！

【问题讨论】：

这是一个 CSS 问题而不是 Rails 问题，它是一种相对简单的形式，只需要一些样式。
这是一个rails问题，恕我直言。也许我不够清楚；我想知道，是否有某种rails form_for 设置或类似的东西来水平渲染输入框？在我见过的几乎所有示例中，输入都位于不同的行中。
这很可能是一个宝石，但对你来说可能有点过头了。像往常一样使用 rails 助手创建一个表单，然后添加一个像 input { display: inline; } 这样的 css 规则将使其水平显示。

标签： html ruby-on-rails coffeescript ruby-on-rails-5

【解决方案1】：

Html --> 请查看横向表单的示例 html 代码

<label>E-Mail:</label>
<input type="text" name="id" maxlength="30" value="" />
<label>Password:</label> 
<input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />

以下代码是导轨水平形式

<%= f.label :email %>:
<%= f.text_field :email %>
<%= f.label :password %>:
<%= f.password_field :last_name %>
<%= f.submit %>

css -->

input,label {
     float:left;
     margin:5px;
    }

对于 Jsfiddle 示例 Jsfiddle

【讨论】：