將CSS和佔位符文本應用於導軌登錄表單

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，以及幾乎任何其他標記輔助如此。