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.

One problem so far: form-horizontal class is missing.

Many of Tiki's converted forms that are "form-horizontal" type according to Bootstrap docs don't have that class. The wiki edit page and some other content-creating/editing pages have class form-horizontal, but most tiki-admin.php?page=x forms don't. The visual difference is that with form-horizontal, field labels are aligned right, to be close to the field. This is considered best practice for UI. Without form-horizontal, the labels are aligned left, which makes for a visually nice even left margin, but worsens UI since the user has to try harder to match each label and its field.

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

sample for long label:

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.

update: Tiki has many options for each feature and I agree it makes the editing layout too long and scattered. Having labels on the left is ok for "small" inputs, eg language selection, but for larger text areas (eg: body of a blog post or an article) having the label above is nicer as it leaves more space for the content.
I think the key is the content, the focus should alway be on the content.

Maybe an approach could be to have a different layout for content, eg: have Content tab where labels are above and all other tabs that are for settings the labels are on the left.

Or is it too comlicated and hard to follow?

Voting might be useful to achieve a general understanding

luci: +1 for option1, also for removing the need to use "for" attribute and id="" on these labels+inputs (prevent breakage of things when you get accidentally two forms with same IDs on one page), something like this (notice how the label contains the form input element; would be possible ?):

<div class="form-group">
     <label class="col-sm-12 control-label"><span>Priority:</span>
          <select name="priority" class="form-control">
     </label>
</div>

gary: luci, I like the simpler way you describe, of wrapping the input or select with the label tags, but it doesn't seem to be supported very well in Bootstrap (see http://getbootstrap.com/css/#forms). I get not-so-good results when I try that.

About the choice of label position - above the input or on the left side, I followed the legacy layout pretty much, as shown on tiki-admin pages. This also seems to be the most common on the web (anyway, according to http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php). I kind of prefer to have the labels on the left, as the page content seems more clear to me, but this is probably a matter of opinion. I didn't check about label length problems in translated strings. I (ignorantly) used the English string lengths to decide about the grid size. This could be adjusted if there is a frequent problem with too much text wrapping. Here are two versions of tiki-editpage.tpl's Properties tab content (not optimized, but just for a quick comparison):

Do we need to have a "vote" or something to decide label position?