search

daxko / design

http://daxko.github.io/design
0 stars 1 forks source link

Need basic form css #23

Closed scurker closed 9 years ago

scurker commented 9 years ago

There's some default input styles right now, but they're not documented and we need to determine a clean way to layout forms for desktop and mobile devices.

scurker commented 9 years ago

Right now, we can do very basic form (horizontal) styling including inputs, radios, checkboxes, and textareas, legends, fieldsets, focus, and input groups with add-ons. We will need to consider how to approach input widths.

screen shot 2015-06-09 at 12 08 20 pm

jshores commented 9 years ago

Here's just a few examples that we can talk through should top aligned form labels be an option.

For this one we would need to figure out what needed to be grouped on a single line and what needs to have it's own line. For example, gender and date birth could be on a single line.

top aligned_1

Second, I still have name grouped, but not address. Why you ask..just to give some more visual as to the things we will need to decide.

top aligned_2

Third, all fields have their own line. Now we start seeing the amount of space that these forms can fill.

top aligned_3

Fourth, I removed the idea of field length affordance and made all fields the same length.

top aligned_4

Hopefully these will help continue discussion on forms from this week's team meeting.

scurker commented 9 years ago

From a visual expectation, the first would be the most consistent with how people may visualize information. With the last one, I don't think fields should generally be the same length within a certain rule. This article provides some good reasoning on what users typically expect.

For example, if you have an address 1 field that can contain up to 50 characters, and an address 2 field that can contain up to 40 characters, you should not see this:

screen shot 2015-06-12 at 8 24 34 am

At the same time, something like this should be acceptable:

screen shot 2015-06-12 at 8 29 06 am

At some point I need to put into the style a way to cleanly size inputs, but right now there's nothing specifying input width.

scurker commented 9 years ago

Also added custom styling for selects to better match the rest of our inputs.

Chrome select-chrome

Firefox select-firefox

IE10+ select-ie10

IE9 IE9 doesn't allow you to remove the native select dropdown indicator, so we hide our custom one and display the native one. select-ie9

scurker commented 9 years ago

We can now support both variations of the layouts above, so closing this.