Support for forms

[Shawn Sullivan]

I am very new to OOCSS and I just got to say I love it! The alpha for tags is looking good, but I would like see some ideas for OOCSS for forms. Any ideas or talk about adding forms?

[Matt B.]

I'm not sure how well it fits into the "OOCSS way," but I like to use the following a starting point for forms...

Example HTML:

<form>

<fieldset>

<legend>Your Information</legend>

<ul>

<li><label for="firstName">First name<em>*</em></label>

<input type="text" name="firstName" id="firstName" required>

</li>

<li><label for="lastName">Last name<em>*</em></label>

<input type="text" name="lastName" id="lastName" required>

</li>

<li><label>Multi-line<br>label</label>

<input type="text">

</li>

<li><label>Single-line label</label>

<div class="input">Multi-line input:<br>

<input type="text"><br>

<input type="text">

</div>

</li>

</ul>

</fieldset>

<div class="submitButtons">

<button type="submit">Save</button>

</div>

</form>

CSS:

Below is the CSS you'd put in your stylesheet. You'd also need to specify the width of the label, which I like to specify as "label, .label { width: [your width here] }" - that will vary from form to form, depending on how wide your longer labels are. I find it easiest to put that part (just the width) in an inline stylesheet. I have .label and .input classes so that the styles can be reused in cases where you don't just have a single <label> or <input> element - e.g. you want to wrap your label or input in a div.

form ul, .form ul, fieldset ul {list-style:none; margin:0; padding:0;}

.submitButtons {margin-top:2em; clear:both;}

form > fieldset, .form > fieldset {

margin-bottom: 30px; clear:both;

}

form fieldset fieldset, .form fieldset fieldset {border:none;}

form > fieldset:last-of-type {

margin-bottom: 0;

}

legend {font-weight:bold; color:#666666;} /* color must be specified or it will show up as blue in IE8 and below */

form ul, .form ul {

clear:both;

}

form ul li, .form ul li {

  clear:both;

  padding: 5px 0;

  margin-bottom: 2px;

  padding-bottom:10px;

}

label, .label {padding-bottom: 10px;}

label em {color:blue} /* for stars indicating required fields */

li > label, li > .label {

float: left;

text-align:right;

margin-right:10px;

min-width:60px;

}

form li > .input, .form li > .input {

overflow:hidden; /* leaves room below label floated to left, in case the .input element spans more than one line */

/* for IE 8 and below: */

*display:inline;

zoom:1;

}

This is my preferred method, but there are plenty of other ways you could go about it...for example you could use OOCSS grids.

I welcome any feedback on this, especially any suggestions on how the OOCSS philosophy could improve it...I feel like forms are a case where using the HTML elements themselves rather than classes for absolutely everything makes sense, but if anyone thinks it would benefit from more classes or a different approach please let me know.

I think it would be great if we could include some sort of forms module, or at least a section in the documentation with a suggested approach for styling forms.

[Renoir Boulanger]

Hello people,

I would like to remind that OOCSS as far as I recall is to use CSS selectors in an Object Oriented approach.

Mlle Sullivan who coined the term made it pretty clear.

Separate CSS effects and assemble.

The problem of doing the way you showed, Matt B., is that what do you do when, clients (e.g. a graphic designer) wants...:
- helper link beside input
- Many .submitButtons, but one is a cancel, other must be a tag or button? (and look like a button)
- Label is beside input//label over input
- Error message in any case possible

With the following requirement:
- Same HTML markup
- consistent look
- Easy to add javascript "behaviors"
- Not uslessly (imprisoning) specific

All this and more are the benefits of imementing OOCSS

I recommend you have a look at markup libraries such as Twitter bootstrap, Kikstrap, Zurb Foundation, Pea.rs, and others.

Here's my favourites
http://delicious.com/inexisdotnet/css+framework

As an example of this concept, I wrote a plugin to create a form confirmation window using only two class names:

http://beta.renoirboulanger.com/blog/2012/05/snippet-confirm-form-before-submitting-using-twitter-bootstrap-in-a-modal-window

Hope this helps.

--
Renoir Boulanger
http://renoirboulanger.com/

(envoyé de mon téléphone)
~