Design of Forms

Jirka Tomasek jtomasek at redhat.com
Wed Aug 15 11:24:38 UTC 2012


On 08/15/2012 12:24 PM, Imre Farkas wrote:
> 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
This looks like a great solution to me, using simple_form simplifies the 
form views and nicely reduces the need to maintain error-prone markup in 
the views.
>
>> The Date input does not work in my browser.
>>
>> Overall, this is great, though. It looks both aesthetically pleasing and
>> intuitive.
>>
>> -- Matt
>>
>
Jirka



More information about the aeolus-devel mailing list