cruiser13 / zend1-bootstrap3
Twitter Bootstrap v.3 Forms for Zend Framework v.1 extended
Requires
- php: >=5.3.0
- zf1s/zend-controller: 1.13
- zf1s/zend-file: ^1.13
- zf1s/zend-file-transfer: ^1.13
- zf1s/zend-filter: ^1.13
- zf1s/zend-form: ^1.13
- zf1s/zend-view: 1.13
README
#Twitter Bootstrap 3 Form for Zend Framework 1 extended
This library was originally created by @zfbase and forked by @wendrowycz This is an extended version, adding an HTML element, inline form option with labels, form-group class option and more.
Form types
The library supports all Bootstrap 3 form types.
One PHP code
class Application_Form_Example extends Twitter_Bootstrap3_Form_* { public function init() { $email = new Twitter_Bootstrap3_Form_Element_Email('email'); $email->setLabel('Email')->setAttrib('placeholder', 'Email'); $email->setRequired(true); $password = new Zend_Form_Element_Password('password'); $password->setLabel('Password')->setAttrib('placeholder', 'Password'); $checkbox = new Zend_Form_Element_Checkbox('checkbox'); $checkbox->setLabel('Remember me'); $submit = new Zend_Form_Element_Submit('submit'); $submit->setLabel('Sign in'); $this->addElements(array( $email, $password, $checkbox, $submit )); } }
OR
class Application_Form_Example extends Twitter_Bootstrap3_Form_* { public function init() { $this->addElement('email', 'email', array( 'label' => 'Email', 'placeholder' => 'Email', 'required' => true, )); $this->addElement('password', 'password', array( 'label' => 'Password', 'placeholder' => 'Password', )); $this->addElement('checkbox', 'checkbox', array( 'label' => 'Remember me', )); $this->addElement('submit', 'submit', array( 'label' => 'Sign in', )); } }
HTML generated for vertical form
The form must be inherited from class Twitter_Bootstrap3_Form_Vertical
.
<form enctype="application/x-www-form-urlencoded" class="form-vertical" action="" method="post"> <div class="form-group"> <label for="email" class="control-label required">Email</label> <input type="email" name="email" id="email" value="" required="required" placeholder="Email" class="form-control"> </div> <div class="form-group"> <label for="password" class="control-label optional">Password</label> <input type="password" name="password" id="password" value="" placeholder="Password" class="form-control"> </div> <div class="form-group"> <div class="checkbox"> <label> <input type="hidden" name="checkbox" value="0"> <input type="checkbox" name="checkbox" id="checkbox" value="1"> Remember me </label> </div> </div> <div class="form-group"> <input type="submit" name="submit" id="submit" value="Sign in" class="btn btn-primary"> </div> </form>
HTML generated for horizontal form
The form must be inherited from class Twitter_Bootstrap3_Form_Horizontal
.
<form enctype="application/x-www-form-urlencoded" class="form-horizontal" action="" method="post"> <div class="form-group"> <label for="email" class="required control-label col-sm-2">Email</label> <div class="col-sm-10"> <input type="email" name="email" id="email" value="" required="required" placeholder="Email" class="form-control"> </div> </div> <div class="form-group"> <label for="password" class="optional control-label col-sm-2">Password</label> <div class="col-sm-10"> <input type="password" name="password" id="password" value="" placeholder="Password" class="form-control"> </div> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <div class="checkbox"> <label> <input type="hidden" name="checkbox" value="0"> <input type="checkbox" name="checkbox" id="checkbox" value="1"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <input type="submit" name="submit" id="submit" value="Sign in" class="btn btn-primary"> </div> </div> </form>
HTML generated for inline form
The form must be inherited from class Twitter_Bootstrap3_Form_Inline
.
<form enctype="application/x-www-form-urlencoded" class="form-inline" action="" method="post"> <div class="form-group"> <label for="email" class="sr-only required">Email</label> <input type="email" name="email" id="email" value="" required="required" placeholder="Email" class="form-control"> </div> <div class="form-group"> <label for="password" class="sr-only optional">Password</label> <input type="password" name="password" id="password" value="" placeholder="Password" class="form-control"> </div> <div class="form-group"> <div class="checkbox"> <label> <input type="hidden" name="checkbox" value="0"> <input type="checkbox" name="checkbox" id="checkbox" value="1"> Remember me </label> </div> </div> <div class="form-group"> <input type="submit" name="submit" id="submit" value="Sign in" class="btn btn-primary"> </div> </form>
To use inlineforms with labels you can use the class Twitter_Bootstrap3_Form_Inlinelabel
.
If you are using inline forms, the dimensions will not be set of course. If you need dimensions, you can add them using the attribute formgroupclass like this:
$count = new Twitter_Bootstrap3_Form_Element_Number('count'); $count->setAttrib('formgroupclass','col-xs-6');
This will give you the following output:
<div class="form-group col-xs-6"> <input type="number" name="count" id="count" value="" class="form-control"> </div>
You can also use bootstrap addons on inputs. Something like this:
$message = new Zend_Form_Element_Textarea('message'); $message->setAttrib('addon_append','@');
will generate the following input group:
<div class="input-group"> <textarea name="message" id="message" class="form-control" rows="24" cols="80"></textarea><span class="input-group-addon">@</span> </div>
Supported controls
The library supports all Zend Framework 1 and Bootstrap 3 form elementes.
All example present for vertical form.
Inputs
Most common form control, text-based input fields. Includes support for all HTML5 types: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, and color
.
<div class="form-group"> <label for="text" class="control-label optional">Text</label> <input type="text" name="text" id="text" value="" class="form-control" placeholder="Text input"> </div>
$this->addElement('text', 'text', array( 'label' => 'Text', 'placeholder' => 'Text input', ));
Textarea
<div class="form-group"> <label for="textarea" class="control-label optional">Textarea</label> <textarea name="textarea" id="textarea" rows="4" class="form-control" cols="80">Textarea</textarea> </div>
$this->addElement('textarea', 'textarea', array( 'label' => 'Textarea', 'value' => 'Textarea', 'rows' => 4, ));
Checkboxes and radios
One checkbox
<div class="form-group"> <div class="checkbox"> <label> <input type="hidden" name="checkbox1" value="unchecked Value"> <input type="checkbox" name="checkbox1" id="checkbox" value="checked Value"> Checkbox </label> </div> </div>
$this->addElement('checkbox', 'checkbox', array( 'label' => 'Checkbox', 'checkedValue' => 'checked Value', 'uncheckedValue' => 'unchecked Value', ));
One checkbox without hidden field (might come in handy if jquery or others are being used on name)
<div class="form-group"> <div class="checkbox"> <label> <input type="checkbox" name="checkbox1" id="checkbox" value="checked Value"> Checkbox </label> </div> </div>
$this->addElement('checkbox', 'checkbox', array( 'label' => 'Checkbox', 'checkedValue' => 'checked Value', 'uncheckedValue' => 'unchecked Value', )); $checkbox->setAttrib('disableHidden', true);
MultiCheckbox
<div class="form-group"> <div class="checkbox"> <label> <input type="checkbox" name="multiCheckbox[]" id="multiCheckbox-option1" value="option1"> Option one is this and that — be sure to include why it's great </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" name="multiCheckbox[]" id="multiCheckbox-option2" value="option2" disabled="disabled"> Option two is disabled </label> </div> </div>
$this->addElement('multiCheckbox', 'multiCheckbox', array( 'multiOptions' => array( 'option1' => 'Option one is this and that — be sure to include why it\'s great', 'option2' => 'Option two is disabled', ), 'disable' => array('option2'), 'escape' => false, ));
Radios
<div class="form-group"> <label for="radio" class="control-label optional">Radio</label> <div class="radio"> <label> <input type="radio" name="radio" id="radio-option1" value="option1" checked="checked"> Option one is this and that — be sure to include why it's great </label> </div> <div class="radio"> <label> <input type="radio" name="radio" id="radio-option2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> <div class="radio disabled"> <label> <input type="radio" name="radio" id="radio-option3" value="option3" disabled="disabled"> Option three is disabled </label> </div> </div>
$this->addElement('radio', 'radio', array( 'multiOptions' => array( 'option1' => 'Option one is this and that — be sure to include why it\'s great', 'option2' => 'Option two can be something else and selecting it will deselect option one', 'option3' => 'Option three is disabled', ), 'label' => 'Radio', 'value' => 'option1', 'disable' => array('option3'), 'escape' => false, ));
Inline multicheckbox and radio
<div class="form-group"> <label class="checkbox-inline"> <input type="checkbox" name="checkbox[]" id="checkbox-1" value="1">One </label> <label class="checkbox-inline"> <input type="checkbox" name="checkbox[]" id="checkbox-2" value="2">Two </label> </div> <div class="form-group"> <label class="radio-inline"> <input type="radio" name="radio" id="radio-1" value="1">One </label> <label class="radio-inline"> <input type="radio" name="radio" id="radio-2" value="2">Two </label> </div>
$this->addElement('multiCheckbox', 'checkbox', array( 'multiOptions' => array( '1' => 'One', '2' => 'Two', ), 'inline' => true, )); $this->addElement('radio', 'radio', array( 'multiOptions' => array( '1' => 'One', '2' => 'Two', ), 'inline' => true, ));
Selects
One value
<div class="form-group"> <label for="select" class="control-label optional">Select</label> <select name="select" id="select" class="form-control"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select> </div>
$this->addElement('select', 'select', array( 'label' => 'Select', 'multiOptions' => array( 1 => 'one', 2 => 'two', 3 => 'three', ), ));
Multiple
<div class="form-group"> <label for="multiselect" class="control-label optional">MultiSelect</label> <select name="multiselect[]" id="multiselect" multiple="multiple" class="form-control"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> </div>
$this->addElement('multiselect', 'multiselect', array( 'label' => 'MultiSelect', 'multiOptions' => array( 1 => 'January', 2 => 'February', 3 => 'March', 4 => 'April', 5 => 'May', 6 => 'June', 7 => 'July', 8 => 'August', 9 => 'September', 10 => 'October', 11 => 'November', 12 => 'December', ), ));
Buttons
Includes support for button types: button
, submit
, reset
and image
.
<div class="form-group"> <button name="button" id="button" type="button" class="btn btn-default">button</button> </div> <div class="form-group"> <input type="submit" name="submit" id="submit" value="submit" class="btn btn-primary"> </div> <div class="form-group"> <input type="reset" name="reset" id="reset" value="reset" class="btn btn-default"> </div> <div class="form-group"> <input type="image" name="image" id="image" src="/button.png" alt=""> </div>
$this->addElement('button', 'button', array( 'label' => 'button', )); $this->addElement('submit', 'submit', array( 'label' => 'submit', )); $this->addElement('reset', 'reset', array( 'label' => 'reset', )); $this->addElement('image', 'image', array( 'src' => '/button.png', ));
Simple text
Element static
is an alias of element note
.
<div class="form-group"> <label for="static" class="control-label optional">Static</label> <p id="static" class="form-control-static">Static</p> </div>
$this->addElement('static', 'static', array( 'label' => 'Static', 'value' => 'Static', ));
Other decorated elements
The library also contains elements for decorators: file
, hidden
, hash
and captcha
.
This does also contain HTML5 Input Types like the range element. Usage like this:
$distanceinput = new Twitter_Bootstrap3_Form_Element_Range('distanceinput'); $distanceinput->setAttrib('min','5')->setAttrib('max','50')->setAttrib('step','5'); $distanceinput->setLabel('Distance in kilometers'); $distanceinput->setDescription('Set the distance in kilometers here');
The other HTML5 Input Types are tel, url, date, time, datetime and datetimelocal.
If you need to use HTML unescaped in labels or descriptions you can use this snippet:
$distanceinput->getDecorator('description')->setOption('escape', false);
If you like using addons, use code like this:
$field = new Twitter_Bootstrap3_Form_Element_DateTimeLocal('field'); $field->setAttrib('addon_append','<span class="someclass"><i class="fa fa-calendar" aria-hidden="true"></i></span>');