From 079becf295023066a8cf2d7cc8b037708d6f25a5 Mon Sep 17 00:00:00 2001 From: Sander van Leeuwen Date: Thu, 29 Jan 2015 01:05:23 +0100 Subject: Add form styling conventions with an HTML example --- README.md | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) (limited to 'README.md') diff --git a/README.md b/README.md index 765c018..c84f40c 100644 --- a/README.md +++ b/README.md @@ -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: ```php require('classes/Form.class.php'); $form = new Form; -$section = new Form_Section('System'); +$section = new Form_Section('Form or panel heading'); $section->addInput(new Form_Input( 'Hostname', @@ -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): + +```html +
+
+
+

Form or panel heading

+
+
+
+ +
+ +
+
+
+ +
+ + What's this all about? +
+
+
+ +
+ +
+
+ + + +
+
+ + + +
+ +
+
+``` + ## Tables * Wrap your tables in a `
` to make them scroll horizontally on small devices. -- cgit v1.1