setMode('development');
// materialize plugin
$form->addPlugin('materialize', '#input-with-addons');
/* Input with icon
-------------------------------------------------- */
$form->startFieldset('Input with icon', 'class=border-bottom mb-4 pb-4', 'class=text-muted pb-4');
$form->setCols(3, 9);
$form->addIcon('input-with-icon-after', '', 'after');
$form->addInput('text', 'input-with-icon-after', '', 'Your name');
$form->addIcon('input-with-icon-before', '', 'before');
$form->addInput('text', 'input-with-icon-before', '', 'Your name');
$form->setCols(0, 12);
$form->addIcon('input-with-icon-and-helper', '', 'after');
$form->addHelper('Your name', 'input-with-icon-and-helper');
$form->addInput('text', 'input-with-icon-and-helper', '', '');
$form->addIcon('input-with-icon-and-placeholder', '', 'after');
$form->addInput('text', 'input-with-icon-and-placeholder', '', 'Your name');
$form->endFieldset();
/* Input with Button
-------------------------------------------------- */
$form->startFieldset('Input with button', 'class=border-bottom mb-4 pb-4', 'class=text-muted pb-4');
$form->setCols(3, 9);
$addon = '';
$form->addAddon('input-with-button-after', $addon, 'after');
$form->addInput('text', 'input-with-button-after', '', 'Your name');
$addon = '';
$form->addAddon('input-with-button-before', $addon, 'before');
$form->addInput('text', 'input-with-button-before', '', 'Your name');
$form->setCols(0, 12);
$addon = '';
$form->addAddon('input-with-button-and-helper', $addon, 'after');
$form->addHelper('Your name', 'input-with-button-and-helper');
$form->addInput('text', 'input-with-button-and-helper', '', '');
$addon = '';
$form->addAddon('input-with-button-and-placeholder', $addon, 'after');
$form->addInput('text', 'input-with-button-and-placeholder', '', 'Your name');
$form->endFieldset();
/* Input with Text
-------------------------------------------------- */
$form->startFieldset('Input with text', 'class=border-bottom mb-4 pb-4', 'class=text-muted pb-4');
$form->setCols(3, 9);
$addon = '$';
$form->addAddon('input-with-text-after', $addon, 'after');
$form->addInput('number', 'input-with-text-after', '', 'Number');
$addon = '$';
$form->addAddon('input-with-text-before', $addon, 'before');
$form->addInput('number', 'input-with-text-before', '', 'Number');
$form->setCols(0, 12);
$addon = '$';
$form->addAddon('input-with-text-and-helper', $addon, 'after');
$form->addHelper('Number', 'input-with-text-and-helper');
$form->addInput('number', 'input-with-text-and-helper', '', '');
$addon = '$';
$form->addAddon('input-with-text-and-placeholder', $addon, 'after');
$form->addInput('number', 'input-with-text-and-placeholder', '', 'Number');
$form->endFieldset();
/* Input with Button & icon
-------------------------------------------------- */
$form->startFieldset('Input with button & icon', 'class=border-bottom mb-4 pb-4', 'class=text-muted pb-4');
$form->setCols(3, 9);
$form->addIcon('input-with-button-and-icon-after', '', 'before');
$addon = '';
$form->addAddon('input-with-button-and-icon-after', $addon, 'after');
$form->addInput('text', 'input-with-button-and-icon-after', '', 'Your name');
$form->addIcon('input-with-button-and-icon-before', '', 'after');
$addon = '';
$form->addAddon('input-with-button-and-icon-before', $addon, 'before');
$form->addInput('text', 'input-with-button-and-icon-before', '', 'Your name');
$form->setCols(0, 12);
$form->addIcon('input-with-button-and-icon-and-helper', '', 'before');
$addon = '';
$form->addAddon('input-with-button-and-icon-and-helper', $addon, 'after');
$form->addHelper('Your name', 'input-with-button-and-icon-and-helper');
$form->addInput('text', 'input-with-button-and-icon-and-helper', '', '');
$form->addIcon('input-with-button-and-icon-and-placeholder', '', 'before');
$addon = '';
$form->addAddon('input-with-button-and-icon-and-placeholder', $addon, 'after');
$form->addInput('text', 'input-with-button-and-icon-and-placeholder', '', 'Your name');
$form->endFieldset();
/* Input with date picker & cancel button
-------------------------------------------------- */
$form->startFieldset('Input with date picker & cancel button', 'class=border-bottom mb-4 pb-4', 'class=text-muted pb-4');
$form->setCols(3, 9);
$addon = '';
$form->addAddon('date-pickup', $addon, 'after');
$form->addInput('text', 'date-pickup', '', 'Pick a date please');
$form->addPlugin('material-datepicker', '#date-pickup');
$form->endFieldset();
/* Select with Button
-------------------------------------------------- */
$form->startFieldset('Select with button', 'class=border-bottom mb-4 pb-4', 'class=text-muted pb-4');
$addon = '';
$form->addAddon('select-with-button-after', $addon, 'after');
$form->addOption('select-with-button-after', '', 'Choose one ...', '', 'disabled, selected');
$form->addOption('select-with-button-after', 'Mr', 'Mr');
$form->addOption('select-with-button-after', 'Mrs', 'Mrs');
$form->addSelect('select-with-button-after', 'Prefix', 'required');
$addon = '';
$form->addAddon('select-with-button-before', $addon, 'before');
$form->addOption('select-with-button-before', '', 'Choose one ...', '', 'disabled, selected');
$form->addOption('select-with-button-before', 'Mr', 'Mr');
$form->addOption('select-with-button-before', 'Mrs', 'Mrs');
$form->addSelect('select-with-button-before', 'Prefix', 'required');
$form->endFieldset();
/* Select with Button + icon
-------------------------------------------------- */
$form->startFieldset('Select with button & icon', 'class=mb-5 pb-5', 'class=text-muted pb-4');
// $(\'#select-with-button-and-icon-after\').formSelect();
$addon = '';
$form->addAddon('select-with-button-and-icon-after', $addon, 'after');
$form->addIcon('select-with-button-and-icon-after', '', 'before');
$form->addOption('select-with-button-and-icon-after', '', 'Choose one ...', '', 'disabled, selected');
$form->addOption('select-with-button-and-icon-after', 'Mr', 'Mr');
$form->addOption('select-with-button-and-icon-after', 'Mrs', 'Mrs');
$form->addSelect('select-with-button-and-icon-after', 'Prefix', 'required');
$addon = '';
$form->addAddon('select-with-button-and-icon-before', $addon, 'before');
$form->addIcon('select-with-button-and-icon-before', '', 'after');
$form->addOption('select-with-button-and-icon-before', '', 'Choose one ...', '', 'disabled, selected');
$form->addOption('select-with-button-and-icon-before', 'Mr', 'Mr');
$form->addOption('select-with-button-and-icon-before', 'Mrs', 'Mrs');
$form->addSelect('select-with-button-and-icon-before', 'Prefix', 'required');
$form->endFieldset();
?>
Material Design Bootstrap 4 - Input with Addons examples - How to create PHP forms easily
printIncludes('css'); ?>
Php Form Builder - Material Design Bootstrap 4 Input and select with icon, button and text Addons
printIncludes('js');
$form->printJsCode();
?>