path: root/
diff options
authorSander van Leeuwen <>2015-01-29 01:05:23 +0100
committerSander van Leeuwen <>2015-01-29 01:05:23 +0100
commit079becf295023066a8cf2d7cc8b037708d6f25a5 (patch)
tree84288f199728f73717ee591518149a48839d206f /
parent422a715cd514c53215c2781eb3a17682b7cc2b37 (diff)
Add form styling conventions with an HTML example
Diffstat (limited to '')
1 files changed, 53 insertions, 1 deletions
diff --git a/ b/
index 765c018..c84f40c 100644
--- a/
+++ b/
@@ -52,13 +52,21 @@ The Bootstrap grid system is used for defining columns. We've chosen the 'small'
## Forms
+We're following a few conventions for a clean and consistent form layout:
+* Every form should have at least one 'panel' which contains the form fields. If certain fields can be grouped together, you can add multiple panels to a form.
+* A field consists of an outer wrapper `.form-group` which contains a `label` and the `input`
+* The submit button should be placed outside of the panels to prevent confusion (e.g., the save button saves the whole form and not just the last panel).
+* Checkboxes are placed within a label (see example below). The wrapping div needs an additional `.checkbox` class
+* Additional field descriptions can be placed in the `.help-block` `span`
After determining the proper layout for forms we decided to create wrappers in PHP to create all forms. This de-duplicates all of the current HTML, making this migration a bit harder but any future updates infinitely easier (since all forms can be updated centrally). This is what the form-code should look like:
$form = new Form;
-$section = new Form_Section('System');
+$section = new Form_Section('Form or panel heading');
$section->addInput(new Form_Input(
@@ -83,6 +91,50 @@ print $form;
Please make sure the referenced $_POST fields in the php-code above this code are also updated since they are automatically generated
+The PHP code above will result in something like this (with everything but relevant Bootstrap classes omitted for this example):
+<form class="form-horizontal">
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h2 class="panel-title">Form or panel heading</h2>
+ </div>
+ <div class="panel-body">
+ <div class="form-group">
+ <label for="input" class="col-sm-2 control-label">An input</label>
+ <div class="col-sm-10">
+ <input class="form-control" id="input" />
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="second-input" class="col-sm-2 control-label">Second label</label>
+ <div class="col-sm-10">
+ <input class="form-control" id="second-input" />
+ <span class="help-block">What's this all about?</span>
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="second-input" class="col-sm-2 control-label">Checkbox</label>
+ <div class="col-sm-10 checkbox">
+ <label>
+ <input type="checkbox" id="checkbox" /> Checkbox description
+ </label>
+ </div>
+ </div>
+ <!-- And more form-groups -->
+ </div>
+ </div>
+ <!-- And more panels -->
+ <div class="col-sm-10 col-sm-offset-2">
+ <input type="submit" class="btn btn-primary" value="Save" />
+ </div>
## Tables
* Wrap your tables in a `<div class="table-responsive">` to make them scroll horizontally on small devices.
OpenPOWER on IntegriCloud