History: Bootstrap Transition - Forms

There are many forms in Tiki's Smarty template files, and generally these need to be modernized and made Bootstrap-compatible (and therefore responsive - more usable in all device sizes).

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.

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.

Select

<div class="form-group">
     <label class="col-sm-2 control-label" for="mess-prio">Priority:</label>
     <div class="col-sm-10">
          <select name="priority" id="mess-prio" class="form-control">
     </div>
</div>