History: Bootstrap Transition - Forms

There are many forms in Tiki's Smarty template files, and generally these need to be modernized and make Bootstrap-compatible.

For example, code like:

<form>
<table class="formcolor" width="100%">
	<tr>
		<td><label for="anonymous_name">Name</label></td>
		<td><input type="text" maxlength="50" size="30" 
id="anonymous_name" name="anonymous_name"  value="{$comment_preview_data.name|escape}"></td>
	</tr>
</table>
</form>

Needs to be changed to something like:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="anonymous_name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input type="text" maxlength="50" class="form-control" 
id="anonymous_name" name="anonymous_name"  value="{$comment_preview_data.name|escape}">
    </div>
  </div>
</form>

Class="form-horizontal" uses Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout. Class="form-group" groups a label and input and gives them some bottom white space. Class="control-label" gives the label some spacing and aligns the text to the right. Class="form-control" adds styling to the input and makes its width 100%. The width can be controlled by wrapping the div in one of the grid-class divs, if needed.

Form construction style guide needed

Other general practices will follow, here. We should have a guide so any forms added in the future can be made the same way and have a unified appearance.

Although the construction of some admin pages, etc. was updated, the templates directory still (as of Dec. 8, 2013) contains 218 usages of table class="formcolor", which as a rule has been used for form layout in Tiki. So the task continues.