Form dengan bootstrap dan Yii 1 – PT Proweb Indonesia

Setelah pada artikel sebelumnya kita membahas Memakai Bootstrap pada Yii 1 (http://www.proweb.co.id/articles/web_application/bootstrap_yii1.html), maka pada kali ini kita akan membuat form dengan bootstrap dan Yii.

Kita akan mengubah form dengan menambahkan class form-horizontal, form-group, col-sm-2, control-label, btn dan btn-default. Misal kita mengubah contact.php seperti berikut ini:
<?php
/* @var $this SiteController */
/* @var $model ContactForm */
/* @var $form CActiveForm */

$this->pageTitle=Yii::app()->name . ‘ – Contact Us’;
$this->breadcrumbs=array(
‘Contact’,
);
?>

<h1>Contact Us</h1>

<?php if(Yii::app()->user->hasFlash(‘contact’)): ?>

<div class=”flash-success”>
<?php echo Yii::app()->user->getFlash(‘contact’); ?>
</div>

<?php else: ?>

<p>
If you have business inquiries or other questions, please fill out the following form to contact us. Thank you.
</p>

<?php $form=$this->beginWidget(‘CActiveForm’, array(
   ‘id’=>’contact-form’,
   ‘enableClientValidation’=>true,
   ‘clientOptions’=>array(
       ‘validateOnSubmit’=>true,
   ),
)); ?>

<p class=”note”>Fields with <span class=”required”>*</span> are required.</p>

<?php echo $form->errorSummary($model); ?>

   <div class=”form-group”>
       <?php echo $form->labelEx($model,’name’,array(“class”=>”col-sm-2 control-label”)); ?>
       <?php echo $form->textField($model,’name’); ?>
       <?php echo $form->error($model,’name’); ?>
   </div>

   <div class=”form-group”>
       <?php echo $form->labelEx($model,’email’,array(“class”=>”col-sm-2 control-label”)); ?>
       <?php echo $form->textField($model,’email’); ?>
       <?php echo $form->error($model,’email’); ?>
   </div>

   <div class=”form-group”>
       <?php echo $form->labelEx($model,’subject’,array(“class”=>”col-sm-2 control-label”)); ?>
       <?php echo $form->textField($model,’subject’,array(‘size’=>60,’maxlength’=>128)); ?>
       <?php echo $form->error($model,’subject’); ?>
   </div>

   <div class=”form-group”>
       <?php echo $form->labelEx($model,’body’,array(“class”=>”col-sm-2 control-label”)); ?>
       <?php echo $form->textArea($model,’body’,array(‘rows’=>6, ‘cols’=>50)); ?>
       <?php echo $form->error($model,’body’); ?>
   </div>

   <?php if(CCaptcha::checkRequirements()): ?>
   <div class=”form-group”>
       <div class=”col-sm-2″></div>
       <?php $this->widget(‘CCaptcha’); ?>
   </div>
   <div class=”form-group”>
       <?php echo $form->labelEx($model,’verifyCode’,array(“class”=>”col-sm-2 control-label”)); ?>
       <?php echo $form->textField($model,’verifyCode’); ?>
       <?php echo $form->error($model,’verifyCode’); ?>
   </div>
   <?php endif; ?>

   <div class=”form-group”>
       <div class=”col-sm-2″></div>
       <?php echo CHtml::submitButton(‘Submit’,array(“class”=>”btn btn-default”)); ?>
   </div>

<?php $this->endWidget(); ?>

</div><!– form –>

<?php endif; ?>

Tampilan yang terjadi adalah :

Informasi lebih lanjut silahkan mengunjungi
1. http://getbootstrap.com/css/#forms
2. http://getbootstrap.com/css/#forms-horizontal .

Artikel selanjutnya adalah : http://www.proweb.co.id/articles/web_application/bootstrap_cgridview_yii1.html .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Form dengan bootstrap dan Yii 1

Halo!