Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>As the author of <a href="http://pragprog.com/book/warv/the-rails-view" rel="nofollow">The Rails View</a>, I agree with Ben Taitelbaum's post on this and say that Formtastic is totally a great option for this kind of complexity. </p> <p>With regards to the code you posted, as developers we want to avoid that kind of view writing across the board, as it ends up an unmanageable mess. There's too many files involved in editing a form, and at some point, some other dev will come in and overwrite our shared partial, not knowing where else it was used, to change the way a different form behaves. Any benefit of code reuse that we can get out of this kind of abstraction is completely obliterated by the potential for it to go sour very quickly with mutliple developers.</p> <p>While Formtastic is great, I've also been using <a href="https://github.com/plataformatec/simple_form/" rel="nofollow">SimpleForm</a> a lot in my recent apps, especially when I don't need the full power of Formtastic.</p> <p>SimpleForm will handle your label, and it also supports i18n as well. With this it would be:</p> <pre><code>&lt;%= simple_form_for @user do |f| %&gt; &lt;%= f.input :name, :input_html =&gt; { :class =&gt; 'user-icon' } %&gt; &lt;%= f.input :email %&gt; &lt;%= f.input :password, :as =&gt; :password, :input_html =&gt; { :class =&gt; 'log-icon' } %&gt; &lt;%= f.input :password_confirmation, :as =&gt; :password, :input_html =&gt; { :class =&gt; 'log-icon' } %&gt; &lt;%= f.button :submit %&gt; &lt;% end %&gt; </code></pre> <p>Then in your I18n file, you can have:</p> <pre><code>en: simple_form: labels: user: username: 'User name' password: 'Password' password_confirmation: 'Password confirmation' de: simple_form: labels: user: username: 'Benutzername' password: 'Passwort' password_confirmation: 'Passwort wiederholen' </code></pre> <p>And more as you need it. You can define your hints and placeholders in the i18n file as well.</p> <p>Also, think about adding the icon as a CSS pseudo class :after, and do so for each class that you need to add in the code) </p> <pre><code>input.user-icon:after { // image as background, positioned properly, etc etc } input.log-icon:after { // image as background, positioned properly, etc etc } </code></pre> <p>And that way, you can remove this kind of stuff from your ERB/HTML and put it where it belongs: In the CSS (presentation layer).</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload