Foundation Forms and input components

Foundation based forms and other input containers

GridForm implements a validable Foundation framework based form.

  • PHP code
    1. <?php
    2.  
    3. use Sphp\Html\Foundation\Sites\Forms\Inputs\ValidableInlineInput;
    4. use Sphp\Html\Foundation\Sites\Forms\GridForm;
    5. use Sphp\Html\Foundation\Sites\Grids\BasicRow;
    6. use Sphp\Html\Foundation\Sites\Buttons\ButtonGroup;
    7.  
    8. $username = ValidableInlineInput::text('username');
    9. $username->setRequired(true);
    10. $username->setLeftInlineLabel('<i class="fa fa-user"></i>');
    11. $username->setLabel('Username');
    12. $username->setPlaceholder('Username');
    13. $username->setErrorMessage('Username is required!');
    14. $username->setRequired(true);
    15.  
    16. $fname = ValidableInlineInput::text('fname');
    17. $fname->setRequired(true);
    18. $fname->setLeftInlineLabel('<i class="fa fa-user"></i>');
    19. $fname->setLabel('First name');
    20. $fname->setPlaceholder('First name');
    21. $fname->setErrorMessage('First name is required!');
    22. $fname->setRequired(true);
    23.  
    24. $lname = ValidableInlineInput::text('lname');
    25. $lname->setRequired(true);
    26. $lname->setLeftInlineLabel('<i class="fa fa-user"></i>');
    27. $lname->setLabel('Last name');
    28. $lname->setPlaceholder('Last name');
    29. $lname->setErrorMessage('Last name is required!');
    30. $lname->setRequired(true);
    31.  
    32. $carSelector = ValidableInlineInput::select('Favourite car');
    33. $carSelector->appendOption('', 'none');
    34. $carSelector->appendOption('saab', 'Saab');
    35. $carSelector->appendOption('volvo', 'Volvo');
    36. $carSelector->appendOption('ferrari', 'Ferrari');
    37. $carSelector->setErrorMessage('A car model is required');
    38. $carSelector->setRequired(true);
    39. $carSelector->setLeftInlineLabel('<i class="fas fa-car"></i>');
    40.  
    41.  
    42. $carPrice = ValidableInlineInput::text('car_price');
    43. $carPrice->setRequired(true);
    44. $carPrice->setPattern('number');
    45. $carPrice->setRightInlineLabel('<i class="fas fa-euro-sign"></i>');
    46. $carPrice->setLabel('Suitable price');
    47. $carPrice->setPlaceholder('10.000');
    48. $carPrice->setErrorMessage('Car price is required and must be a decimal number!');
    49. $carPrice->setRequired(true);
    50.  
    51. $form = new GridForm();
    52. $form->useValidation(true);
    53. $form->append($username);
    54.  
    55. $nameRow = new BasicRow();
    56. $nameRow->appendCell($fname)->small(12)->medium(6);
    57. $nameRow->appendCell($lname)->small(12)->medium(6);
    58. $form->append($nameRow);
    59.  
    60.  
    61. $carRow = new BasicRow();
    62. $carRow->appendCell($carSelector)->small(12)->medium(6);
    63. $carRow->appendCell($carPrice)->small(12)->medium(6);
    64. $form->append($carRow);
    65.  
    66. $form->appendHiddenVariable('hidden1', 'I am hidden!');
    67.  
    68. $buttonRow = new BasicRow();
    69. $buttons = new ButtonGroup();
    70. $buttons->appendSubmitter('Submit')->addCssClass('success');
    71. $buttons->appendResetter('Reset form')->addCssClass('alert');
    72. $buttons->setExtended();
    73. $buttonRow->appendCell($buttons);
    74. $form->append($buttonRow);
    75. $form->liveValidate();
    76. echo $form;
    77.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow

Foundation based input components

Foundation based input components extend interfaces defined in Sphp\Html\Foundation\Sites\Forms namespace.

Buttons

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Forms;
    4. use Sphp\Html\Foundation\Sites\Buttons\Button;
    5. use Sphp\Html\Foundation\Sites\Buttons\FileUploadButton;
    6. /*
    7. $form = (new GridForm())
    8.         ->useValidation(true)
    9.         ->setTarget("outputFrame")
    10.         ->append(new FileUploadButton("img-file", "Select image"))
    11.         ->append(Button::submitter("Load Image", "submit"));
    12.  
    13. $form->printHtml();*/
    14.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow

Radioboxes and Checkboxes components

These components extend AbstractSwitch and Foundation frameworks Switches on clientside

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Forms\Inputs;
    4.  
    5. use Sphp\Html\Foundation\Sites\Forms\GridForm as GridForm;
    6.  
    7. $radioBoxes = [
    8.     "m" => "male",
    9.     "f" => "female",
    10.     "x" => "X"
    11. ];
    12. $checkBoxes = [
    13.     "_basketball_" => "Basketball",
    14.     "_football_" => "Football"
    15. ];
    16. $checkboxes = (new Checkboxes("multiple", $checkBoxes, "Select hobbies:"))
    17.         ->setOption("_volleyball_", "Volleyball");
    18. $checkboxes->setLayouts('small-12', 'large-6');
    19.  
    20. $radios = (new Radioboxes("gender", $radioBoxes, "Select a gender:"))
    21.         ->setOption("?", "unknown")
    22.         ->setRequired();
    23. $radios->setLayouts('small-12', 'large-6');
    24. $form = new GridForm();
    25. $form->append([$checkboxes, $radios]);
    26. echo $form;
    27.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow
    Select hobbies:
    Select a gender:

RadioSwitch and SwitchBox components

These components extend AbstractSwitch and Foundation frameworks Switches on clientside

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Forms\Inputs;
    4.  
    5. use Sphp\Html\Foundation\Sites\Forms\GridForm;
    6.  
    7. $answer = new SwitchBox('like', 'yes');
    8. $answer->setScreenReaderLabel("Do you like me?");
    9. $answer->setInnerLabels("yes", "no");
    10.  
    11. $boxes[] = (new SwitchBox("box[]", "a", true, "select alphabet a"))
    12.         ->setInnerLabels("a", "")
    13.         ->setSize("tiny");
    14. $boxes[] = (new SwitchBox("box[]", "b", false, "select alphabet b"))
    15.         ->setInnerLabels("b", "")
    16.         ->setSize("small");
    17. $boxes[] = (new SwitchBox("box[]", "c", false, "select alphabet c"))
    18.         ->setInnerLabels("c", "");
    19. $boxes[] = (new SwitchBox("box[]", "d", false, "select alphabet d"))
    20.         ->setInnerLabels("d", "")
    21.         ->setSize("large");
    22.  
    23. $radios[] = (new RadioSwitch("foo", "bar", true))->setInnerLabels("bar", "bar");
    24. $radios[] = (new RadioSwitch("foo", "foo", false))->setInnerLabels("foo", "foo");
    25.  
    26. $sb = new SwitchBoard;
    27. $sb->appendNewSwitch('Singular', 's', null);
    28. $sb->appendNewSwitch('Plural', 'p', null);
    29. $sb->appendNewSwitch('Messages', 'msg', null);
    30. $sb->appendNewSwitch('Message IDs', 'id', null);
    31. $sb->setDescription('Select used fields');
    32. $form = new GridForm();
    33. $form->append($sb);
    34. $form->append($answer);
    35. $form->append($boxes);
    36. $form->append($radios);
    37. echo $form;
    38.  
    39. ?>
    40.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow
    Select used fields

Slider and RangeSlider components

These components implement RangeInput and Foundation frameworks Sliders on clientside

IMPORTANT:

When placing a Slider or a RangeSlider object into a dropdown component, the slider will have correct initial positioning but will jump to one end on the first slide. The initial positioning is calculated when the slider is added to the DOM (which when inside a dropdown is far off screen), and not when it is first made visible.

The example code of the form showing the exaples of Slider object is represented below.

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Forms\Inputs\Sliders;
    4.  
    5. use Sphp\Html\Foundation\Sites\Forms\GridForm;
    6. use Sphp\Html\Foundation\Sites\Forms\FormRow;
    7.  
    8. $weight = (new Slider())
    9.         ->setName("weight")
    10.         ->setVertical();
    11.  
    12. $hours = (new Slider(0, 23, 1))
    13.         ->setName("hours");
    14.  
    15. $score = (new Slider(0, 100, 50, 2))
    16.         ->setName("score")
    17.         ->setInitialValue(12);
    18. //->showValue();
    19.  
    20. $distance = (new Slider(10, 1000, 10, 10))
    21.         ->setName("distance")
    22.         ->setInitialValue(100);
    23. $bind = $distance->bindInput();
    24. $row = (new FormRow());
    25. $row->appendCell($weight, ['shrink']);
    26. $row->appendCell([$hours, $score, $distance, $bind], ['auto']);
    27. (new GridForm())
    28.         ->append($row)
    29.         ->printHtml();
    30. ?>
    31.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow

The example code of the form showing the exaples of RangeSlider object is represented below.

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Forms\Inputs\Sliders;
    4.  
    5. use Sphp\Html\Foundation\Sites\Forms\GridForm;
    6.  
    7. $hours = (new RangeSlider("hour", 0, 23, 1));
    8.  
    9. $score = (new RangeSlider("triple", 0, 99, 3))
    10.         ->setInitialValue(12);
    11.  
    12. $distance = (new RangeSlider("distance", 100, 200, .5))
    13.         ->setInitialValue([120, 150]);
    14.  
    15. $form = new GridForm();
    16. $form->getGrid()->setFull();
    17. $form->append([$hours, $score, $distance . $distance->buildValueViewer()])->useMargin(true);
    18. echo $form;
    19.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow