README

#扩展的 Twitter Bootstrap 3 表单用于 Zend Framework 1

这个库最初由 @zfbase 创建，并由 @wendrowycz 分支出来。这是一个扩展版本，添加了 HTML 元素、内联表单选项、表单组类选项等。

表单类型

该库支持所有 Bootstrap 3 表单类型。

一段 PHP 代码

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

        ));
    }
}

或者

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 生成

表单必须继承自类 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 生成

表单必须继承自类 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 生成

表单必须继承自类 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>

要使用带有标签的内联表单，可以使用类 Twitter_Bootstrap3_Form_Inlinelabel。

如果你正在使用内联表单，当然不会设置尺寸。如果你需要尺寸，可以使用属性 formgroupclass 如下添加

		$count = new Twitter_Bootstrap3_Form_Element_Number('count');
		$count->setAttrib('formgroupclass','col-xs-6');

这将给出以下输出

    <div class="form-group col-xs-6">
        <input type="number" name="count" id="count" value="" class="form-control">
    </div>

你还可以在输入中使用 Bootstrap 扩展。例如这样

		$message = new Zend_Form_Element_Textarea('message');
		$message->setAttrib('addon_append','@');

将生成以下输入组

    <div class="input-group">
	<textarea name="message" id="message" class="form-control" rows="24" cols="80"></textarea><span class="input-group-addon">@</span>
	</div>

支持的控件

该库支持所有 Zend Framework 1 和 Bootstrap 3 表单元素。

所有示例均为垂直表单。

输入

最常见的表单控件，基于文本的输入字段。包括对所有 HTML5 类型的支持：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 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',
));

文本区域

<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,
));

复选框和单选按钮

一个复选框

<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',
));

一个没有隐藏字段的复选框（如果 name 上使用了 jQuery 或其他，可能很有用）

<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);

多选框

<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 &mdash; be sure to include why it\'s great',
        'option2' => 'Option two is disabled',
    ),
    'disable' => array('option2'),
    'escape' => false,
));

单选按钮

<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 &mdash; 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,
));

内联多选框和单选按钮

<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,
));

选择框

一个值

<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',
    ),
));

多个

<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',
    ),
));

按钮

包括对按钮类型的支持：button、submit、reset 和 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',
));

简单文本

元素 static 是元素 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',
));

其他装饰元素

该库还包含用于装饰器的元素：file、hidden、hash 和 captcha。

这还包含类似范围元素的 HTML5 输入类型。用法如下

$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');

其他 HTML5 输入类型包括 tel、url、date、time、datetime 和 datetimelocal。

如果你需要在标签或描述中使用未转义的 HTML，可以使用此代码片段

$distanceinput->getDecorator('description')->setOption('escape', false);

如果你喜欢使用扩展，可以使用如下代码

$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>');

cruiser13 / zend1-bootstrap3

维护者

详细信息