Project

General

Profile

« Previous | Next » 

Revision 01a84fcf

Added by Sjon Hortensius over 10 years ago

updated forms description HTML > PHP

View differences:

README.md
52 52 

  		




  53
  53
  
    
## Forms


  		




  54
  54
  
    

  		




  55
  
  
    
* 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.


  		




  56
  
  
    
* A field consists of an outer wrapper `.form-group` which contains a `label` and the `input`


  		




  57
  
  
    
* 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).


  		




  58
  
  
    
* Checkboxes are placed within a label (see example below). The wrapping div needs an additional `.checkbox` class


  		




  59
  
  
    
* Additional field descriptions can be placed in the `.help-block` `span`


  		




  
  55
  
    
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:


  		




  60
  56
  
    

  		




  61
  
  
    
An example (which omits everything but relevant Bootstrap classes):


  		




  
  57
  
    
```php


  		




  
  58
  
    
require('classes/Form.class.php');


  		




  
  59
  
    
$form = new Form;


  		




  62
  60
  
    

  		




  63
  
  
    
```html


  		




  64
  
  
    
<form class="form-horizontal">


  		




  65
  
  
    
	<div class="panel panel-default">


  		




  66
  
  
    
		<div class="panel-heading">


  		




  67
  
  
    
			<h2 class="panel-title">Form or panel heading</h2>


  		




  68
  
  
    
		</div>


  		




  69
  
  
    
		<div class="panel-body">


  		




  70
  
  
    
			<div class="form-group">


  		




  71
  
  
    
				<label for="input" class="col-sm-2 control-label">Labeltext</label>


  		




  72
  
  
    
				<div class="col-sm-10">


  		




  73
  
  
    
					<input class="form-control" id="input" />


  		




  74
  
  
    
				</div>


  		




  75
  
  
    
			</div>


  		




  76
  
  
    
			<div class="form-group">


  		




  77
  
  
    
				<label for="second-input" class="col-sm-2 control-label">Second label</label>


  		




  78
  
  
    
				<div class="col-sm-10">


  		




  79
  
  
    
					<input class="form-control" id="second-input" />


  		




  80
  
  
    
					<span class="help-block">What's this all about?</span>


  		




  81
  
  
    
				</div>


  		




  82
  
  
    
			</div>


  		




  83
  
  
    
			<div class="form-group">


  		




  84
  
  
    
				<label for="second-input" class="col-sm-2 control-label">Checkbox</label>


  		




  85
  
  
    
				<div class="col-sm-10 checkbox">


  		




  86
  
  
    
					<label>


  		




  87
  
  
    
						<input type="checkbox" id="checkbox" /> Checkbox description


  		




  88
  
  
    
					</label>


  		




  89
  
  
    
				</div>


  		




  90
  
  
    
			</div>


  		




  91
  
  
    

  		




  92
  
  
    
			<!-- And more form-groups -->


  		




  93
  
  
    

  		




  94
  
  
    
		</div>


  		




  95
  
  
    
	</div>


  		




  96
  
  
    

  		




  97
  
  
    
	<!-- And more panels -->


  		




  98
  
  
    

  		




  99
  
  
    
	<div class="col-sm-10 col-sm-offset-2">


  		




  100
  
  
    
		<input type="submit" class="btn btn-primary" value="Save" />


  		




  101
  
  
    
	</div>


  		




  102
  
  
    
</form>


  		




  
  61
  
    
$section = new Form_Section('System');


  		




  
  62
  
    

  		




  
  63
  
    
$section->addInput(new Form_Input(


  		




  
  64
  
    
    'Hostname',


  		




  
  65
  
    
    'text',


  		




  
  66
  
    
    $pconfig['hostname'],


  		




  
  67
  
    
    ['placeholder' => 'pfSense']


  		




  
  68
  
    
))->setHelp('Name of the firewall host, without domain part');


  		




  
  69
  
    

  		




  
  70
  
    
$section->addInput(new Form_Input(


  		




  
  71
  
    
    'Domain',


  		




  
  72
  
    
    'text',


  		




  
  73
  
    
    $pconfig['domain'],


  		




  
  74
  
    
    ['placeholder' => 'mycorp.com, home, office, private, etc.']


  		




  
  75
  
    
))->setHelp('Do not use \'local\' as a domain name. It will cause local '.


  		




  
  76
  
    
    'hosts running mDNS (avahi, bonjour, etc.) to be unable to resolve '.


  		




  
  77
  
    
    'local hosts not running mDNS.');


  		




  
  78
  
    

  		




  
  79
  
    
$form->add($section);


  		




  
  80
  
    

  		




  
  81
  
    
print $form;


  		




  103
  82
  
    
```


  		




  104
  83
  
    

  		




  
  84
  
    
Please make sure the referenced $_POST fields in the php-code above this code are also updated since they are automatically generated


  		




  
  85
  
    

  		




  105
  86
  
    
## Tables


  		




  106
  87
  
    

  		




  107
  88
  
    
* Wrap your tables in a `<div class="table-responsive">` to make them scroll horizontally on small devices.


  		




  ......




  125
  106
  
    

  		




  126
  107
  
    
## Icons


  		




  127
  108
  
    

  		




  128
  
  
    
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.


  		




  
  109
  
    
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.


  		












Also available in:  Unified diff