summaryrefslogtreecommitdiffstats
path: root/README.md
diff options
context:
space:
mode:
authorSjon Hortensius <sjon@hortensius.net>2015-01-28 13:33:12 +0100
committerSjon Hortensius <sjon@hortensius.net>2015-01-28 13:56:45 +0100
commit01a84fcf003ee96a3e2a08bd6cbfda5823ce9095 (patch)
treec300bd44f689eccbe9c925b193a8f61002f15bb8 /README.md
parent69f9ff4034e4de69f4b375fbf51bc4822f9038db (diff)
downloadpfsense-01a84fcf003ee96a3e2a08bd6cbfda5823ce9095.zip
pfsense-01a84fcf003ee96a3e2a08bd6cbfda5823ce9095.tar.gz
updated forms description HTML > PHP
Diffstat (limited to 'README.md')
-rw-r--r--README.md75
1 files changed, 28 insertions, 47 deletions
diff --git a/README.md b/README.md
index 6b0d91d..765c018 100644
--- a/README.md
+++ b/README.md
@@ -52,56 +52,37 @@ The Bootstrap grid system is used for defining columns. We've chosen the 'small'
## Forms
-* 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:
-An example (which omits everything but relevant Bootstrap classes):
+```php
+require('classes/Form.class.php');
+$form = new Form;
-```html
-<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">Labeltext</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>
-</form>
+$section = new Form_Section('System');
+
+$section->addInput(new Form_Input(
+ 'Hostname',
+ 'text',
+ $pconfig['hostname'],
+ ['placeholder' => 'pfSense']
+))->setHelp('Name of the firewall host, without domain part');
+
+$section->addInput(new Form_Input(
+ 'Domain',
+ 'text',
+ $pconfig['domain'],
+ ['placeholder' => 'mycorp.com, home, office, private, etc.']
+))->setHelp('Do not use \'local\' as a domain name. It will cause local '.
+ 'hosts running mDNS (avahi, bonjour, etc.) to be unable to resolve '.
+ 'local hosts not running mDNS.');
+
+$form->add($section);
+
+print $form;
```
+Please make sure the referenced $_POST fields in the php-code above this code are also updated since they are automatically generated
+
## Tables
* Wrap your tables in a `<div class="table-responsive">` to make them scroll horizontally on small devices.
@@ -125,4 +106,4 @@ The button colours aren't set in stone, but the variants used so far are:
## Icons
-Icons are primarily used for status indications. Try to supply a legend when the icon is not 100% self explanatory. See `usr/local/www/firewall_rules.php` for an good example of icon usage and a legend. \ No newline at end of file
+Icons are primarily used for status indications. Try to supply a legend when the icon is not 100% self explanatory. See `usr/local/www/firewall_rules.php` for an good example of icon usage and a legend.
OpenPOWER on IntegriCloud