Need basic form css

[scurker]

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]

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.

[jshores]

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.

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.

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

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

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

[scurker]

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:

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

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]

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

Chrome

Firefox

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.

[scurker]

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