Form Elements

The following form elements are currently supported:

text input (you can use the type() method for html5 types like url)
password (basically just a text of type password)
textarea
button (button, submit, reset)
checkbox
radio
select
label (which can stand alone or wrap an element)
hidden

The majority of elements can have the typical attributes assigned to them via shortcut methods, or by the attribute() method. For example:

<?php
$form = new \Vespula\Form\Form();

echo $form->text()
        ->id($id)
        ->name($name)
        ->idName($value)
        ->class(string $class | array $classes)
        ->value($value)
        ->maxlength($maxlength)
        ->type($type) // not required as default is `text`
        ->style($style)
        ->data($key, $val) // omit `data-` in $key
        ->aria($key, $val) // omit `aria-` in $key
        ->readonly()
        ->disabled()
        ->attribute($key, $val);

Text input

<?php
$form = new \Vespula\Form\Form();

echo $form->text()->id($id)->name($name)->value($value);

// Set the id and name at once
echo echo $form->text()->idName($name)->value($value);

You can also create newer HTML5 form elements using the type() method.

<?php
echo $form->text()->type('color')->id('bar');

Password input

<?php
$form = new \Vespula\Form\Form();

echo $form->password()->id($id)->name($name);

Textarea

<?php
$form = new \Vespula\Form\Form();

echo $form->textarea()->id($id)->value($value);

Button

<?php
$form = new \Vespula\Form\Form();

// Normal button (type="button")

echo $form->button('My Button')->id($id);

// Submit button

echo $form->submit('Save');

// Or...
echo $form->button('Save')->type('submit');

// Reset Button
echo $form->button('Clear')->type('reset');

// Do not call $form->reset() as that will reset the form

Checkbox

<?php
$form = new \Vespula\Form\Form();

// Checkbox with label
echo $form->checkbox()->label('My Checkbox')->id('my-cbox')->value('yes');

// You can apply the other common attributes as with other form elements

// Checkbox without a label
echo $form->checkbox()->value('hi');

// Multiple checkboxes
echo $form->checkbox()->label('Yes')->id('my-cbox')->value('yes')->name('my-name[]');
echo $form->checkbox()->label('No')->id('my-other-cbox')->value('no')->name('my-name[]');

You can specify a checkbox as checked by using the checked() method.

<?php
echo $form->checkbox()->id('foo')->label('My Checkbox')->checked();

Which outputs

<input type="checkbox" id="foo" checked /><label for="foo">My Checkbox</label>

Alternatively, you can pass a value to the checked() method and if that value matches the checkbox value, it will be marked checked.

<?php
echo $form->checkbox()->id('foo')->value('bar')->label('My Checkbox')->checked('bar');

Which outputs

<input type="checkbox" id="foo" value="bar" checked /><label for="foo">My Checkbox</label>

Specify what the unchecked value should be. This adds a hidden element before the checkbox. You must have a name attribute on the element.

<?php
// Set id and name in on method
echo $form->checkbox()->idName('foo')->value('1')->label('My Checkbox')->checked('1')->uncheckedValue('0');

Which outputs

<input name="foo" value="0" type="hidden">
<input type="checkbox" id="foo" name="foo" value="1" checked /><label for="foo">My Checkbox</label>

Radio

<?php
$form = new \Vespula\Form\Form();

// Radio with label
echo $form->radio()->label('My Radio')->id('my-radio')->value('yes');

// You can apply the other common attributes as with other form elements

// Radio without a label
echo $form->radio()->value('hi');

// Multiple radios
echo $form->radio()->label('Yes')->id('radio1')->value('yes')->name('my-name');
echo $form->radio()->label('No')->id('radio1')->value('no')->name('my-name');

Just like checkboxes, you can specify a radio as checked by using the checked() method.

<?php
echo $form->radio()->id('foo')->label('My Radio')->checked();

Which outputs

<input type="radio" id="foo" checked /><label for="foo">My Radio</label>

Alternatively, you can pass a value to the checked() method and if that value matches the checkbox value, it will be marked checked.

<?php
echo $form->radio()->id('foo')->value('bar')->label('My Radio')->checked('bar');

Which outputs

<input type="radio" id="foo" value="bar" checked /><label for="foo">My Radio</label>

Select

<?php
$form = new \Vespula\Form\Form();

$options = [
    'foo'=>'Foo',
    'bar'=>'Bar'
];
echo $form->select()->options($options)->id('my-select');

Outputs

<select id="my-select">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
</select>

0-indexed arrays

If you don’t specify the array keys then then value for the option will be the numeric index of that element in the array.

<?php
$form = new \Vespula\Form\Form();

$options = [
    'Foo',
    'Bar'
];
echo $form->select()->options($options)->id('my-select');

Outputs

<select id="my-select">
    <option value="0">Foo</option>
    <option value="1">Bar</option>
</select>

Option Groups

<?php
$form = new \Vespula\Form\Form();
$options = [
    'Foo'=>[
        'a'=>'Option 1',
        'b'=>'Option 2'
    ],
    'Bar'=>[
        'c'=>'Option 3',
        'd'=>'Option 4'
    ],
];
echo $form->select()->options($options)->id('my-select');

Output

<select id="my-select">
    <optgroup label="Foo">
        <option value="a">Option 1</option>
        <option value="b">Option 2</option>
    </optgroup>
    <optgroup label="Bar">
        <option value="c">Option 3</option>
        <option value="d">Option 4</option>
    </optgroup>
</select>

You can specify a selected option by using the selected() method and passing the value that should be selected.

<?php
$options = [
    'foo'=>'Foo',
    'bar'=>'Bar'
];
echo $form->select()->options($options)->id('my-select')->selected('bar');

Which outputs

<select id="my-select">
    <option value="foo">Foo</option>
    <option value="bar" selected>Bar</option>
</select>

A select form element consists of a select opening tag and one or more options, followed by the closing tag. The resulting output for the select element attempts to format the html with correct indenting. However, if you start the output with initial indenting, the indenting of the subsequent tags will be too far to the left. While the HTML is perfectly valid, you may want the HTML to be indented properly. To accomplish this, you can use an indent() method to force indenting of the options and the closing select tag.

<?php
$form = new \Vespula\Form\Form();
?>
<body>
    <?php echo $form->begin(); ?>
    <div>
        <?php echo $form->text()->lf(); ?>
    </div>
    <div>
        <?php echo $form->select()->options($options)->indent(2)->lf(); ?>
    </div>
    <?php echo $form->end(); ?>
</body>

Label

<?php
$form = new \Vespula\Form\Form();

// output a basic label
echo $form->label('My Label')->for('some-element');

You can wrap a label around an element, placing the label text before (default) or after the element itself. Putting the text after the element is useful for checkboxes and radios.

<?php

// Wrap the label around the element, with the label text before the element
$text = $form->text()->id('foo');
echo $form->label('My Label')->wrap($text);

Outputs

<label>My Label
    <input type="text" id="foo" />
</label>

Wrap the element, but put the label text after.

<?php

// Wrap the label around the element, with the label text after the element
$text = $form->text()->id('foo');
echo $form->label('My Label')->wrapAfter($text);

Outputs

<label>
    <input type="text" id="foo" />My Label
</label>

Just like a select element, the indenting can become misaligned if you start your label with initial indenting. You can remedy this by using the indent() method.

<div>
    <?php echo $form->label('My Label')->wrap($text)->indent(2); ?>
</div>

Hidden

<?php
$form = new \Vespula\Form\Form();

// output a hidden element
echo $form->hidden()->id('foo')->value('myVal');