将CSS和占位符文本应用于Rails登录表单

Question

<% title "Log in" %>

<p>Don't have an account? <%= link_to "Sign up!", signup_path %></p>

<%= form_tag sessions_path do %>
  <p>
    <%= label_tag :login, "Username or Email Address" %><br />
    <%= text_field_tag :login, params[:login] %>
  </p>
  <p>
    <%= label_tag :password %><br />
    <%= password_field_tag :password %>
  </p>
  <p><%= submit_tag "Log in" %></p>
<% end %>

如何使用CSS和占位符文本自定义这些登录字段？ 他们不像普通的html字段。 谢谢

Answer 1

您可以看一下FormTagHelper的文档。 将您的表单更改为跟随表单会将类应用于您的标签和字段，然后您可以根据需要设置其样式。

<% title "Log in" %>

<p>Don't have an account? <%= link_to "Sign up!", signup_path %></p>

<%= form_tag sessions_path do %>
  <p>
    <%= label_tag :login, "Username or Email Address", :class => "login-label" %><br />
    <%= text_field_tag :login, params[:login], :class => "login-field" %>
  </p>
  <p>
    <!-- second parameter is the content to be written inside label parameter, you can also pass nil which will humanize the first parameter -->
    <%= label_tag :password, "Password", :class => "password-label" %><br />

    <!-- second parameter is the value to be populated, you can pass nil if you don't want any -->
    <%= password_field_tag :password, nil, :class => "password-field" %>
  </p>
  <p><%= submit_tag "Log in", :class => "login-button" %></p>
<% end %>

内联样式不是恕我直言的好主意。

Answer 2

它们确实可以编译成普通的HTML字段。 例如

<%= label_tag :password %>

编译成

<label for="password">Password</label>

您可以传递其他选项，以向标签添加其他参数。 例：

<%= label_tag :password, "Password", :class => "some_class", :style => "background: green;" %>

编译为

<label class="some_class" for="password" style="background: green;">Password</label>

password_field_tag，text_field_tag和几乎所有其他标签帮助器也是如此。