Search by 
jbzoo / html
This package is abandoned and no longer maintained.
No replacement package was suggested.
HTML helper for easy way form building from any PHP code
Installs: 1 260
Dependents: 0
Suggesters: 0
Security: 0
Stars: 4
Watchers: 3
Forks: 1
Open Issues: 1
1.0.0
2016-02-19 20:46 UTC
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