Design of Forms

Imre Farkas ifarkas at redhat.com
Wed Aug 15 10:24:35 UTC 2012


On 08/14/2012 07:15 PM, Matt Wagner wrote:
> On Tue, Aug 14, 2012 at 05:32:19PM +0200, Jaromír Coufal wrote:
>> One more "hello" :)
>>
>> another thing I have designed is a layout and behavior of forms - you
>> can check it here:
>>
>> http://codepen.io/coufalj/pen/qiEkH
>>
>> Still working on responsive, but it is not that important in this
>> stage. What do you think about this concept of forms used across our
>> whole application?
>
> Hi Jarda,
>
> Looks good, as usual!
>
> A few nits, though I think they're largely personal opinion:
>
> - I think the "?" for tooltips should be closer to the input. Maybe on
>    the other side of the label? Or maybe on the right of the input? It's
>    just where I would look for it.
>
> - While using a "*" to mark required inputs has a lot of precedent, it's
>    also sometimes used to denote fine print or a footnote. Would it be
>    clearer if we used bold text for required fields, maybe?
>
> I wonder about the markup, though. Will a developer building a form need
> to deal with creating a .control_group that contains a .left_column and a
> .right_column? It seems like this could be error-prone. Or will the form
> library we discussed automate this?

I played with simple_form to get an idea of how difficult the markup is 
to implement.

Step 1: Created a new wrapper. You can find the code here: 
https://gist.github.com/bf366db929ee55af7e82
Step 2: Created a new simple_form component for other fields e.g. 
'note': https://gist.github.com/3358420
Step 3: Change the default wrapper for simple_form in the initializer: 
config.default_wrapper = :conductor

After these steps, implementing a form is pretty easy:
= simple_form_for(@post) do |f|
   = f.input :title, :placeholder => 'placeholder',
                     :hint => 'hint',
                     :note => 'note'

The added benefit of simple_form is that you will automatically get the 
require/optional class for the inputs for free based on the validations 
of the model (You can override them via options if necessary). The same 
applies for the maxlength attribute of the input field. Developers won't 
need to implement the markup Jarda created, but using a simple api call 
would do the magic.

Imre

> The Date input does not work in my browser.
>
> Overall, this is great, though. It looks both aesthetically pleasing and
> intuitive.
>
> -- Matt
>




More information about the aeolus-devel mailing list