简单表单 - 输入后显示标签答案

【问题标题】：Simple Form - Make label appear after input简单表单 - 输入后显示标签
【发布时间】：2022-03-18 13:43:48
【问题描述】：

我有一个简单的表单标签，如下所示：

= f.input :email, required: true, input_html: {class: 'md-input'}, wrapper_html: {class: 'md-form-group float-lable'}

它会生成下面的 HTML

<div class="input email required user_email md-form-group float-lable">
 <label class="email required" for="user_email">
  <abbr title="required">*</abbr> Email
 </label>
 <input class="string email required md-input" type="email" value="" name="user[email]" id="user_email">
</div>

如何调整简单表单标签，使标签元素出现在输入元素之后？

我尝试过inline_label，但这似乎不起作用，因为无论如何它都不是为此目的

【问题讨论】：

标签： ruby-on-rails simple-form

【解决方案1】：

我迟到了，但是如果有人像我一样在 2022 年偶然发现它，并坚持使用 f.input 就像在原始问题中一样，那么您可以创建一个新的简单表单包装器（或更新现有的包装器） ) 像这样：

SimpleForm.setup do |config|
  # Other extensions and component types are left out for brevity.
  config.wrappers :label_after_input_form do |b|
    b.use :input
    b.use :label
  end
end

基本上只使用组件类型 - input 和 label - 按照您希望它们在 HTML 中呈现的顺序。

您可以在视图中使用此包装器 - 例如在 Slim 模板中 - 如下所示：

= simple_form_for some_model_object, wrapper: :label_after_input_form do |f|
  = f.input :some_field

这将在<label> 元素之前呈现<input> 元素。您可以通过添加将此包装器设为默认值

config.default_wrapper = :label_after_input_form

到SimpleForm.setup 块，现在您可以在视图中使用simple_form_for 助手，而无需明确定义wrapper 选项。

【讨论】：

【解决方案2】：

Simple Form 让您可以访问f.input_field 和f.label。您可以轻松地执行以下操作：

.md-form-group.float-lable
  = f.input_field :email, class: 'md-input'
  = f.label :email

这会使用简单表单在输入字段之后呈现标签。

【讨论】：

【解决方案3】：

作为第一步，您可以将自定义样式应用于标签：

label_html: { class: 'custom-label' }

并且取决于设计用途，例如cssfloat: right;

【讨论】：

问题是关于元素的 HTML 顺序，而不是 CSS 类。