HTML FORMS

The HTML <form> element represents a document section that contains interactive controls to submit information to a web server.

NOTE

Form components in this framework are used to build User Interfaces and not to handle the form data submitted.

All built-in HTML form objects implement atleast Form interface. This interface defines the basic form implementation. Whereas TraversableForm is also container for HTML components like Input.

Building HTML forms using FormController and Input components

FormController is the base interface for all functional form content and Input inherits it. Functional form content

All of the following components declare an Input input control for a Form form.

Basic input components

Framework has many build-in form components that implement basic HTML form elements.

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Forms\Inputs;
    4.  
    5. use Sphp\Html\Forms\ContainerForm;
    6.  
    7. $form = new ContainerForm();
    8. $form[] = "Number range between -10 and 10";
    9. $number = FormControls::number("number")
    10.         ->setStepLength(5)
    11.         ->setRange(-10, 10);
    12. $form[] = $number;
    13. $form[] = FormControls::text("text")
    14.         ->setPlaceholder("Text field");
    15. $form[] = FormControls::email("email")
    16.         ->setPlaceholder("Email field");
    17. $form[] = FormControls::password("password")
    18.         ->setPlaceholder("Password field");
    19. $form[] = FormControls::textarea("textarea")
    20.         ->setPlaceholder("Textarea field")
    21.         ->setRows(5);
    22.  
    23. $select = FormControls::select("select");
    24. $select->appendOption("opt1", "Option 1.");
    25. $select->appendOption("opt2", "Option 2.");
    26. $form[] = $select;
    27.  
    28. $form[] = FormControls::hidden("hidden", "value");
    29. $form->printHtml();
    30.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as highlighted code
    1.     Number range between -10 and 10
    2.     <input type="number" name="number" step="5" min="-10" max="10">
    3.     <input type="text" name="text" placeholder="Text&#x20;field">
    4.     <input type="email" name="email" placeholder="Email&#x20;field">
    5.     <input type="password" name="password" placeholder="Password&#x20;field">
    6.     <textarea name="textarea" placeholder="Textarea&#x20;field" rows="5"></textarea>
    7.     <select name="select">
    8.         <option value="opt1" >Option 1.</option>
    9.         <option value="opt2" >Option 2.</option>
    10.     </select>
    11.     <input type="hidden" name="hidden" value="value">
    12. </form>
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow
    Number range between -10 and 10

The Select component

The Select component is used to create a drop-down list in forms. The Option components inside a Select component define the available options in the list Option components can be grouped using Optgroup components,

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Forms\Inputs\Menus;
    4.  
    5. use Sphp\Html\Foundation\Sites\Forms\GridForm;
    6.  
    7. $cars = ['Sweden' => [
    8.         'saab' => 'Saab',
    9.         'volvo' => 'Volvo'
    10.     ],
    11.     'Germany' => [
    12.         'audi' => 'Audi',
    13.         'bmw' => 'BMW',
    14.         'mb' => 'Mercedes-Benz',
    15.         'opel' => 'Opel',
    16.         'porsche' => 'Porsche',
    17.         'vw' => 'Volkswagen'
    18.     ],
    19.     'Italy' => [
    20.         'ferrari' => 'Ferrari',
    21.         'fiat' => 'Fiat'
    22.     ]
    23. ];
    24.  
    25. $carMenu = (new Select("cars[]"))
    26.         ->setRequired(true)
    27.         ->appendArray($cars)
    28.         ->setSize(5)
    29.         ->selectMultiple()
    30.         ->setSelectedValues(['audi', 'porsche', 'volvo']);
    31.  
    32. $form = new GridForm();
    33. $form->append([
    34.     $carMenu,
    35.     MenuFactory::rangeMenu(0, 15, 2, "range")->setSelectedValues(6)
    36. ]);
    37. $form->printHtml();
    38.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow

The AnyTimeInput component

Note! This element uses Any+Timeā„¢{target="_blank"} DatePicker/TimePicker AJAX Calendar Widget for its functionality.

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Forms\Inputs;
    4.  
    5. use Sphp\Html\Forms\ContainerForm;
    6. use Sphp\Html\Forms\Label;
    7.  
    8. $datetimeInput = (new AnyTimeInput("datetime"))
    9.                 ->setPlaceholder("what ever date and time...")->setLocale('fi_FI');
    10. $dateInput = (new AnyTimeInput("date"))->setDateTimeFormat('%Y-%m-%d')
    11.         ->setPlaceholder("what ever time..."); //->setLocale('fi_FI');
    12.  
    13. $form = (new ContainerForm());
    14.  
    15. $form[] = new Label("what ever time...", $datetimeInput);
    16. $form[] = $datetimeInput;
    17. $form[] = $dateInput;
    18. $form->printHtml();
    19.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow

Sliders and range sliders implemntations of RangeInput interface

All sliders in this namespace implement RangeInput interface. These components specify numeric values which must be no less than a given value, and no more than another given value.

A Slider object implements single sliders, whereas RangeSlider component implements double (range) sliders.

These components implement Ion.RangeSlider{target="_blank"} client side slider element for object oriented PHP. The original Ion.RangeSlider is a jQuery range slider with CSS3 skin support.

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Forms\Inputs\Ion;
    4.  
    5. use Sphp\Html\Forms\ContainerForm;
    6.  
    7. $form = new ContainerForm();
    8. $form[] = (new Slider("weight", 0, 100, 1))
    9.         ->useGrid(true)
    10.         ->setPostfix("kg")
    11.         ->setSubmitValue(50);
    12. $form[] = (new Slider("temperature", -100, 100, 1))
    13.         ->useGrid(true)
    14.         ->setPostfix("&deg;C")
    15.         ->setSubmitValue(20);
    16.  
    17. $form->append((new RangeSlider("weightRange", 0, 10, .5))
    18.                 ->useGrid(true)
    19.                 ->setPostfix("kg")
    20.                 ->setInitialRange(1.5, 8))
    21.         ->append((new RangeSlider("heightRange", 0, 300, 5))
    22.                 ->useGrid(true)
    23.                 ->setPostfix("cm"))
    24.         ->append((new RangeSlider("tempRange2", -100, 100, 1))
    25.                 ->useGrid(true)
    26.                 ->setPostfix("&deg;C")
    27.                 ->setInitialRange(-20, 60));
    28. $form->printHtml();
    29.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow

The ButtonInterface Implementing buttons for HTML forms

Components in this namespace are build using HTML <button> tag.

  • Submitter is a submit button (submits form-data)
  • Resetter is a reset button (resets the form-data to its initial values)
  • Button is is a clickable button

Components in this namespace are build using HTML <input> tag.

  • SubmitInput is a submit button (submits form-data)
  • ResetInput is a reset button (resets the form-data to its initial values)
  • InputButton is is a clickable button
  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Forms\Buttons;
    4.  
    5. (new Submitter("button:submit", "submitter", "submit"))
    6.         ->addCssClass("success", "button")
    7.         ->printHtml();
    8. (new Resetter("button:reset"))
    9.         ->addCssClass("alert", "button")
    10.         ->printHtml();
    11. (new Button("button:push"))
    12.         ->addCssClass("button")
    13.         ->printHtml();
    14.  
    15. namespace Sphp\Html\Forms\Inputs\Buttons;
    16.  
    17. (new SubmitInput("input:submit", "submitter", "submit"))
    18.         ->addCssClass("success", "button")
    19.         ->printHtml();
    20. (new ResetInput("input:reset"))
    21.         ->addCssClass("alert", "button")
    22.         ->printHtml();
    23. (new InputButton("input:push"))
    24.         ->addCssClass("button")
    25.         ->printHtml();
    26.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as highlighted code
    1. <button type="submit" name="submitter" value="submit" class="success button">button:submit</button>
    2. <button type="reset" class="alert button">button:reset</button>
    3. <button type="button" class="button">button:push</button>
    4. <input type="submit" name="submitter" value="input&#x3A;submit" class="success button">
    5. <input type="reset" value="input&#x3A;reset" class="alert button">
    6. <input type="button" value="input&#x3A;push" class="button">
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow