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.

In the following, the label and selector or textarea are contained in grid classes for appropriate layout.

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>

Similarly, for

Textarea

<div class="form-group">
     <label class="col-sm-2 control-label" for="broadcast-body">Body:</label>
     <div class="col-sm-10">
          <textarea class="form-control" rows="20" name="broadcast-body" id="broadcast-body" />
    </div>
</div>

Form input style

Question as of 2014-01-25: two directions emerged in the recent bootstrap transition for styling of input fields, can we/should we pick one in order to have a standardized layout?

Option 1: label is above the input field

Sample:

Pro: label length does not matter, also translations can be as long as desired without linebreaks

Contra: form becomces longer vertically as each label is a new row

Option 2: label is before the input field

Sample:

Pro: form is shorter vertically

Contra: if the label text or the translation is long, than the input filed has less space, also layout becomes messy as the label text/description get linebreaks to fit into the allowed space, so the form becomes long again..

Opinions

gezza: i am for option1