My main effort was to make the HTML as simple as possible, and use always the same elements. On top of these elements there are some classes that are used to tell the form how to behave.
Main Container: the main container is a "ol" list, each row is a "li" tag. I have followed a good tut on
alistapart for the html markup.
<!-- [Form Container] -->
<ol class="form-container">
<li>Fields here</li>
</ol>
<!-- [/End Form Container] -->
: the basic structure is composed by two or three divs, the first is the label, the second is a container for the form fields, the third is generally a tooltip or a description. The following is the html for a simple input text field.
<li>
<div class="form-label">Page Title</div>
<div class="form-fields">
<input type="text" />
</div>
<div class="form-tooltip" title="Tooltip text here"></div>
</li>
:
<li>
<div class="form-label">Summary (Introtext)</div>
<div class="form-fields">
<textarea rows="4"></textarea>
</div>
<div class="form-tooltip" title="Text here."></div>
</li>
:
<li>
<div class="form-label">Uses Template</div>
<div class="form-fields">
<select>
<optgroup label="default">
<option>Blank</option>
<option>Template 1</option>
<option>Template 2</option>
</optgroup>
<optgroup label="default 2">
<option>Blank</option>
<option>Template 1</option>
<option>Template 2</option>
</optgroup>
</select>
</div>
<div class="form-tooltip" title="Text here."></div>
</li>
:
<li>
<div class="form-label">Show In Menu?</div>
<div class="form-fields">
<label><input type="checkbox" />Yes</label>
</div>
<div class="form-tooltip" title="Text here."></div>
</li>
: note the "inline" class, added to the "form-fields" div. Usually this is the only change you'll need, to make a form behave in a different way.
<li>
<div class="form-label">Inline Checkbox</div>
<div class="form-fields inline">
<label><input type="checkbox" />Yes</label>
<label><input type="checkbox" />No</label>
<label><input type="checkbox" />Maybe</label>
</div>
<div class="form-tooltip" title="Text here."></div>
</li>
: here are other two examples, again, I just added the class "big" or "medium" to the label and to the "form-fields" div, and all is handled by CSS
<li>
<div class="form-label">Textarea Medium</div>
<div class="form-fields medium">
<textarea rows="6"></textarea>
</div>
</li>
<li>
<div class="form-label big">Textarea Big</div>
<div class="form-fields big">
<textarea rows="10"></textarea>
</div>
</li>
: this is slightly different from the other examples, because there is a button for removing the date.
<li>
<div class="form-label"> DatePicker</div>
<div class="form-fields">
<div class="form-datepicker">
<input type="text" />
<input type="button" title="Remove Date" />
</div>
</div>
</li>
:
<li>
<div class="form-label">Insert Image</div>
<div class="form-fields">
<div class="form-image">
<input type="text" />
<input type="button" title="Insert Image" />
</div>
</div>
</li>
: here is an example useful for building complex applications. The fields itself are always the same, what is important is the additional class to the "form-fields" div, in this case "form-double-inline" and "form-triple-inline", and "form-quadruple-inline".
<li>
<div class="form-label">Double Inline Input Text</div>
<div class="form-fields form-double-inline">
<input type="text" />
<input type="text" />
</div>
<div class="form-tooltip" title="Text here."></div>
</li>
<li>
<div class="form-label">Triple Inline Input Text</div>
<div class="form-fields form-triple-inline">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="form-tooltip" title="Text here."></div>
</li>
<li>
<div class="form-label">Quadruple Inline Input Text</div>
<div class="form-fields form-quadruple-inline">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="form-tooltip" title="Text here."></div>
</li>
:
<li>
<div class="form-label">Link Button</div>
<div class="form-fields">
<a class="button">Insert long text</a>
</div>
</li>
<li>
<div class="form-label">Input Button </div>
<div class="form-fields">
<input type="button" value="Insert" class="button" />
</div>
</li>
: for slitting the form into two columns, you can add "form-container-left" and "form-container-right" classes to the main container
<!-- [Form Container] -->
<ol class="form-container form-container-left">
<li>Fields here...<li>
</ol>
<ol class="form-container form-container-right">
<li>Fields here...<li>
</ol>
<!-- [/End Form Container] -->:
<!-- [Form Container] -->
<ol class="form-container">
<li class="is-container">
<ol class="form-box">
<li class="form-box-title">
<p>This is: Box 1</p>
<ul class="form-box-title-actions">
<li>Collapse, Add, Move Up, Move Down, and Remove actions buttons for this Box</li>
</ul>
</li>
<li>Fields here...</li>
<li>Fields here...</li>
</ol>
<ol class="form-box">
<li class="form-box-title">
<p>This is: Box 2</p>
<ul class="form-box-title-actions">
<li>Collapse, Add, Move Up, Move Down, and Remove actions buttons for this Box</li>
</ul>
</li>
<li>Fields here...</li>
<li>Fields here...</li>
</ol>
</li>
</ol>
<!-- [/End Form Container] -->
:
<li>
<div class="form-label error">Page Title <em>*</em></div>
<div class="form-fields error">
<input type="text" />
</div>
<div class="form-tooltip" title="Enter the name/title of the Resource. Avoid using backslashes in the name."></div>
<div class="form-description">This is the standard description of the field</div>
<div class="form-description error">And this is an additional text for the error</div>
</li>
:
<li>
<div class="form-label">Standard Input Text</div>
<div class="form-fields"><input type="text" /></div>
<div class="form-dynamic-fields">
<input type="button" class="form-dynamic-fields-add" title="Add Another Field" />
<input type="button" class="form-dynamic-fields-remove" title="Remove Field" />
</div>
</li>
: see the class "validate[required,custom[email] ]" and "validate[required,custom[email] ]"
<li>
<div class="form-label">Number</div>
<div class="form-fields">
<input type="text" class="validate[required,custom[number]]" />
</div>
<div class="form-tooltip" title="Text here."></div>
</li>
<li>
<div class="form-label">Email</div>
<div class="form-fields">
<input type="text" class="validate[required,custom[email]]" />
</div>
<div class="form-tooltip" title="Text here."></div>
</li>
☆ A M B ☆
☆ A M B ☆