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