jbzoo / html
HTML helper for easy way form building from any PHP code
Installs: 1 259
Dependents: 0
Suggesters: 0
Security: 0
Stars: 4
Watchers: 3
Forks: 1
Open Issues: 1
Requires
- php: >=5.3.10
- jbzoo/path: ^1.0
- pimple/pimple: ^3.0
Requires (Dev)
- jbzoo/phpunit: ^1.0
This package is auto-updated.
Last update: 2020-05-20 00:10:00 UTC
README
HTML helper for easy way form building from any PHP code.
Install
composer require jbzoo/html:"1.x-dev" # Last version composer require jbzoo/html # Stable version
How to use?
require_once './vendor/autoload.php'; // composer autoload.php // Get needed classes use JBZoo\Html\Html; echo Html::_('input')->render( /* ... */ ); // Underscore as factory $html = Html::getInstance(); // Create or get pimple container echo $html['input']->render( /* ... */ ); // As array echo $html->input->render( /* ... */ ); // As object
1# Html button
1.1 Simple button
echo Html::_('button')->render('test', 'Button', array('title' => 'title attr'));
<button title="title attr" name="test" type="submit">Button</button>
1.2 Change button type
echo Html::_('button')->render('test', 'Button', array(), 'reset');
<button name="test" type="reset">Button</button>
1.3 Support UIkit CSS Framework button
echo Html::_('button')->render('test', 'My button', array('button' => 'success', 'class' => 'my-class'));
<button class="my-class uk-button uk-button-success" name="test" type="submit">My button</button>
1.4 Support UIkit CSS Framework icon
echo Html::_('button')->render('test', 'My button', array('button' => 'success', 'icon' => 'stop'));
<button name="test" class="uk-button uk-button-success" type="submit"> <i class="uk-icon-stop"></i> My button </button>
2# Boolean elements
2.1 Radio buttons
echo Html::_('radiobool')->render('show', 0); // 0 is "No" and 1 is "Yes"
<label for="radio-346544" class="jb-radio-lbl jb-label-0"> <input id="radio-346544" class="jb-val-0" type="radio" name="show" value="0" checked="checked"> No </label> <label for="radio-522643" class="jb-radio-lbl jb-label-1"> <input id="radio-522643" class="jb-val-1" type="radio" name="show" value="1"> Yes </label>
2.2 Single checkbox flag
echo Html::_('checkbool')->render( 'show', // Name 0, // Checked value array( // Attrs 'data-rel' => 'tooltip', 'data-title' => 'Checkbox title', ) );
<label for="checkbox-270924" class="jb-checkbox-lbl jb-label-1"> <input id="checkbox-270924" <!-- Random ID for label --> type="checkbox" <!-- We want checkbox --> name="show" <!-- Name --> value="1" <!-- True/False --> data-rel="tooltip" <!-- ... and custom attrs --> data-title="Checkbox title" class="jb-val-1" > Yes </label>
3# Elements with list of options
3.1 Default checkbox template (No wrap)
echo Html::_('checkbox')->render( array( // List of options 'val-1' => 'Label 1', 'val-2' => 'Custom Label', 'val-3' => 'Var 3', ), 'test', // Name array('val-1', 'val-3'), // Checked values array('data-rel' => 'tooltip') // Attrs );
<input id="checkbox-903654" class="jb-val-val-1" type="checkbox" name="test" value="val-1" data-rel="tooltip" checked="checked"> <label for="checkbox-903654" class="jb-checkbox-lbl jb-label-val-1">Label 1</label> <input id="checkbox-630561" class="jb-val-val-2" type="checkbox" name="test" value="val-2" data-rel="tooltip"> <label for="checkbox-630561" class="jb-checkbox-lbl jb-label-val-2">Custom Label</label> <input id="checkbox-405099" class="jb-val-val-3" type="checkbox" name="test" value="val-3" data-rel="tooltip" checked="checked"> <label for="checkbox-405099" class="jb-checkbox-lbl jb-label-val-3">Var 3</label>
3.2 Default wrap checkbox template
echo Html::_('checkbox')->render( array( // List of options 'val-1' => 'Label 1', 'val-2' => 'Custom Label', 'val-3' => 'Var 3', ), 'test', // Name array('val-1', 'val-3'), // Checked values array('data-rel' => 'tooltip') // Attrs );
<label for="checkbox-923873" class="jb-checkbox-lbl jb-label-val-1"> <input id="checkbox-923873" class="jb-val-val-1" type="checkbox" name="test" value="val-1" checked="checked"> Label 1 </label> <label for="checkbox-193649" class="jb-checkbox-lbl jb-label-val-2"> <input id="checkbox-193649" class="jb-val-val-2" type="checkbox" name="test" value="val-2"> Custom Label </label> <label for="checkbox-301932" class="jb-checkbox-lbl jb-label-val-3"> <input id="checkbox-301932" class="jb-val-val-3" type="checkbox" name="test" value="val-3" checked="checked"> Var 3 </label>
3.3 Custom checkbox template
echo Html::_('checkbox')->render( array( // List of options 'val-1' => 'Label 1', 'val-2' => 'Custom Label', 'val-3' => 'Var 3', ), 'test', // Name 'val-1', // Checked value array(), // Attrs function ($list, $name, $value, $id, $text, $attrs) { // Custom render function $alias = $value; $inpClass = 'jb-val-' . $alias; $input = $list->input($name, $value, $id, $inpClass, $attrs); $text = '<span class="label-title">' . $text . '</span>'; $label = $list->label($id, $alias, $text); return implode(PHP_EOL, array($input, $label)); } );
<input id="checkbox-836392" class="jb-val-val-1" type="checkbox" name="test" value="val-1" checked="checked"> <label for="checkbox-836392" class="jb-checkbox-lbl jb-label-val-1"> <span class="label-title">Label 1</span> </label> <input id="checkbox-498731" class="jb-val-val-2" type="checkbox" name="test" value="val-2"> <label for="checkbox-498731" class="jb-checkbox-lbl jb-label-val-2"> <span class="label-title">Custom Label</span> </label> <input id="checkbox-491721" class="jb-val-val-3" type="checkbox" name="test" value="val-3"> <label for="checkbox-491721" class="jb-checkbox-lbl jb-label-val-3"> <span class="label-title">Var 3</span> </label>
3.3 Default checkbox template (No wrap)
echo Html::_('radio')->render( array( // List value 'val-1' => 'Label 1', 'val-2' => 'Custom Label', 'val-3' => 'Var 3', ), 'test', // Checked value array('val-1', 'val-3'), array('data-rel' => 'tooltip') );
<input id="radio-963578" class="jb-val-val-1" type="radio" name="test" value="val-1" data-rel="tooltip"> <label for="radio-963578" class="jb-radio-lbl jb-label-val-1">Label 1</label> <input id="radio-658731" class="jb-val-val-2" type="radio" name="test" value="val-2" data-rel="tooltip"> <label for="radio-658731" class="jb-radio-lbl jb-label-val-2">Custom Label</label> <input id="radio-170734" class="jb-val-val-3" type="radio" name="test" value="val-3" data-rel="tooltip" checked="checked"> <label for="radio-170734" class="jb-radio-lbl jb-label-val-3">Var 3</label>
3.4 Default wrap checkbox template
echo Html::_('radio')->render( array( // List of options 'val-1' => 'Label 1', 'val-2' => 'Custom Label', 'val-3' => 'Var 3', ), 'test', // Name 'val-1', // Checked value array(), // Attrs true // Wrap input by label );
<label for="radio-134987" class="jb-radio-lbl jb-label-val-1"> <input id="radio-134987" class="jb-val-val-1" type="radio" name="test" value="val-1" checked="checked"> Label 1 </label> <label for="radio-976234" class="jb-radio-lbl jb-label-val-2"> <input id="radio-976234" class="jb-val-val-2" type="radio" name="test" value="val-2"> Custom Label </label> <label for="radio-336365" class="jb-radio-lbl jb-label-val-3"> <input id="radio-336365" class="jb-val-val-3" type="radio" name="test" value="val-3"> Var 3 </label>
3.5 Custom radio template
echo Html::_('radio')->render( array( 'val-1' => 'Label 1', 'val-2' => 'Custom Label', 'val-3' => 'Var 3', ), 'test', 'val-1', array(), function ($list, $name, $value, $id, $text, $attrs) { $alias = $value; $inpClass = 'jb-val-' . $alias; $input = $list->input($name, $value, $id, $inpClass, $attrs); $text = '<span class="label-title">' . $text . '</span>'; $label = $list->label($id, $alias, $text); return implode(PHP_EOL, array($input, $label)); } );
<input id="radio-139486" class="jb-val-val-1" type="radio" name="test" value="val-1" checked="checked"> <label for="radio-139486" class="jb-radio-lbl jb-label-val-1"> <span class="label-title">Label 1</span> </label> <input id="radio-648231" class="jb-val-val-2" type="radio" name="test" value="val-2"> <label for="radio-648231" class="jb-radio-lbl jb-label-val-2"> <span class="label-title">Custom Label</span> </label> <input id="radio-491721" class="jb-val-val-3" type="radio" name="test" value="val-3"> <label for="radio-491721" class="jb-radio-lbl jb-label-val-3"> <span class="label-title">Var 3</span> </label>
3.5 Checked value is not exists
echo Html::_('radio')->render( array( // List of options 'val-1' => 'Label 1', 'val-2' => 'Custom Label', 'val-3' => 'Var 3', ), 'test', // Name 'val-8', // Undefined value array(), // Atrs true // Wrap inputs by labels );
<label for="radio-123654" class="jb-radio-lbl jb-label-val-1"> <input id="radio-123654" class="jb-val-val-1" type="radio" name="test" value="val-1"> Label 1 </label> <label for="radio-698736" class="jb-radio-lbl jb-label-val-2"> <input id="radio-698736" class="jb-val-val-2" type="radio" name="test" value="val-2"> Custom Label </label> <label for="radio-479358" class="jb-radio-lbl jb-label-val-3"> <input id="radio-479358" class="jb-val-val-3" type="radio" name="test" value="val-3"> Var 3 </label> <label for="radio-706898" class="jb-radio-lbl jb-label-no-exits"> <input id="radio-706898" class="jb-val-no-exits" type="radio" name="test" value="no-exits" checked="checked"> Undefined </label>
3# Data list
echo Html::_('datalist')->render( array( // Keys and Values 'Label' => 'Content text', 'Custom label' => 'List text', ), array( // Attrs 'class' => 'test', 'id' => 'custom', ) );
<dl class="test jb-data-list" id="custom"> <dt title="Label">Label</dt> <dd>Content text</dd> <dt title="Custom label">Custom label</dt> <dd>List text</dd> </dl>
4# Selects
4.1 Simple select list
echo Html::_('select')->render( array( 'val-1' => 'Label 1', 'test' => 'Label test', 'custom' => 'Custom', ), 'test', 'custom', array( 'data-title' => 'My form select', ) );
<select data-title="My form select" method="post" name="test" class="jb-select"> <option value="val-1" class="jb-option jb-option-1">Label 1</option> <option value="test" class="jb-option jb-option-2">Label test</option> <option value="custom" class="jb-option jb-option-3" selected="selected">Custom</option> </select>
4.1 Multiple select
echo Html::_('select')->render( array( 'val-1' => 'Label 1', 'test' => 'Label test', 'custom' => 'Custom', 'simple' => 'Simple label', 'moscow' => 'Moscow', ), 'test', array('test', 'moscow'), array( 'multiple' => true, ) );
<select multiple="multiple" name="test[]" class="jb-select"> <option value="val-1" class="jb-option jb-option-1">Label 1</option> <option value="test" class="jb-option jb-option-2" selected="selected">Label test</option> <option value="custom" class="jb-option jb-option-3">Custom</option> <option value="simple" class="jb-option jb-option-4">Simple label</option> <option value="moscow" class="jb-option jb-option-5" selected="selected">Moscow</option> </select>
4.3 Selected option is not found
/** * If selected params is array. For check selected option taken last array var. * If option is not exists created new option. See output. */ echo Html::_('select')->render( array( 'val-1' => 'Label 1', 'test' => 'Label test', 'custom' => 'Custom', 'simple' => 'Simple label', 'moscow' => 'Moscow', ), 'test', array('test', 'moscow', 'no-value') );
<select method="post" name="test" class="jb-select"> <option value="no-value" class="jb-option jb-option-6" selected="selected">--No selected--</option> <option value="val-1" class="jb-option jb-option-1">Label 1</option> <option value="test" class="jb-option jb-option-2">Label test</option> <option value="custom" class="jb-option jb-option-3">Custom</option> <option value="simple" class="jb-option jb-option-4">Simple label</option> <option value="moscow" class="jb-option jb-option-5">Moscow</option> </select>
4.4 Select with groups
echo Html::_('select')->render( array( 'val-1' => 'Label 1', 'test' => 'Test label', array( 'gr-test' => 'Group test 1', 'val-1' => 'No exits in group', ) ), 'test', array('test', 'moscow', 'no-value') );
<select method="post" name="test" class="jb-select"> <option value="no-value" class="jb-option jb-option-no-value" selected="selected">--No selected--</option> <option value="val-1" class="jb-option jb-option-val-1">Label 1</option> <option value="test" class="jb-option jb-option-test">Test label</option> <optgroup label="Select group 0"> <option value="gr-test" class="jb-option jb-option-group-test-1">Group test 1</option> </optgroup> </select>
5# Hiddens fields
5.1 Single hidden input
echo Html::_('hidden')->render('image', 'my-value', 'my-class', 'unique', array('data-profile' => 'user-1'));
<input data-profile="user-1" id="unique" class="jb-input-hidden my-class" name="image" value="my-value" type="hidden">
5.2 Group of hidden inputs
echo Html::_('hidden')->group(array( 'my-name' => 'My name value', 'user' => 'Administrator', 'array' => array( 'value' => 'my value', 'class' => 'array-hidden', 'id' => 'hide-id', ), ));
<input name="my-name" value="My name value" type="hidden" class="jb-input-hidden"> <input name="user" value="Administrator" type="hidden" class="jb-input-hidden"> <input name="array" value="my value" type="hidden" id="hide-id" class="jb-input-hidden array-hidden">
6# Iframe
echo Html::_('iframe')->render('http://my-site.com/page', 'my-class', 'my-id', array('data-rel' => 'my-iframe'));
<iframe data-rel="my-iframe" frameborder="0" src="http://my-site.com/page" id="my-id" class="my-class"></iframe>
7# Textarea
echo Html::_('textarea')->render( 'test', 'Text area content', 'my-class', 'my-id', array( 'data-rel' => 'tooltip', 'data-title' => 'Enter description', ) );
<textarea data-rel="tooltip" data-title="Enter description" name="test" id="my-id" class="my-class">Text area content</textarea>
7# Custom tag
echo Html::_('tag')->render('My content', 'custom-class', 'unique', array( 'tag' => 'div', 'title' => 'Custom title' ));
<div title="Custom title" id="unique" class="custom-class">My content</div>
8# Data attr builder
echo Html::_('input')->render( 'test', 'My value', '', '', array('data' => array( 'test' => 'val', 'json' => array( 'param-1' => 'val-1', 'param-2' => 'val-2', ) )) );
<input data-test="val" data-json="{'param-1':'val-1','param-2':'val-2'}" class="jb-input-text" name="test" value="My value" type="text">
Unit tests and check code style
make make test-all
License
MIT