视图(view)
首先在模板头部引入ActiveForm和Html这里两个是很重要的
<?php
use yii\bootstrap\ActiveForm;
use yii\helpers\Html;
?>
文本框: textInput();
密码框: passwordInput();
单选框: radio() , radioList();
复选框: checkbox() , checkboxList();
下拉框: dropDownList();
隐藏域: hiddenInput();
文本域: textarea(['rows'=>3]);
文件上传:fileInput();
提交按钮:submitButton();
重置按钮:resetButtun();
form 头部设置
<?php $form = ActiveForm::begin([
// 传值类型
'method' => 'post',
// 默认不写,提交到当前控制器方法,但也可以这么设置
'action' => \yii\helpers\Url::to(['user/index']),
// 设置form的样式
'options' => [
// 上传文件设置 注意:与post方法配套使用
'enctype' => 'multipart/form-data',
// 设置form的class
'class' => 'form-horizontal',
],
// 为每一个input 设置
'fieldConfig' => [
// template是布局标签 是对input标签的重新部署
'template' => "{label}\n<div class=\"col-lg-5\">{input}</div>\n<div class=\"col-lg-5\">{error}</div>",
// 设置label 的属性 添加class
'labelOptions' => ['class' => 'col-lg-2 control-label'],
],
]); ?>
text 标签
<?= $form->field($model, 'username')->textInput([
'maxlength' => 20, // 最多输入20个字符
'minlength' => 6, // 最少输入6个字符
'placeholder' => '输入框描述信息',
]) ?>
在模板中解析后会附带一些布局样式 变成
<div class="form-group field-admin-adminemail">
<p class="help-block help-block-error"></p>
<input maxlength =20 minlength=6 class="span12" name="Admin[username]" placeholder="输入框描述信息" type="text">
</div>
密码输入框
<?= $form->field($model, 'password')->passwordInput(['maxlength' => 20]) ?>
在模板中解析后的input变成
<input type="password" name="password" maxlength =20 />
单选框
<?= $form->field($model, 'sex')->radioList(['1' => '男', '0' => '女']) ?>
会根据sex的默认值来选择默认选项变成
<div id="admin-sex">
<div class="radio"><label><input name="Admin[sex]" value="1" checked="" type="radio"> 男</label</div>
<div class="radio"><label><input name="Admin[sex]" value="0" type="radio"> 女</label></div></div>
下拉列表
<?php echo $form->field($model, 'edu')->dropDownList(['1' => '大学', '2' => '高中', '3' => '初中'], ['prompt' => '请选择', 'style' => 'width:120px']) ?>
在模板中解析后变成
<div class="form-group field-admin-edu">
<p class="help-block help-block-error"></p>
<select id="admin-edu" class="form-control" name="Admin[edu]" style="width:120px">
<option value="">请选择</option>
<option value="1" selected="">大学</option>
<option value="2">高中</option>
<option value="3">初中</option>
</select>
</div>
文件上传
<?php echo $form->field($model, 'file')->fileInput() ?>
在模板解析后变成
<div class="form-group field-admin-sex">
<p class="help-block help-block-error"></p>
<input name="Admin[file]" value="" type="hidden">
<input id="admin-file" name="Admin[file]" value="1" type="file">
</div>
复选框
<?php echo $form->field($model, 'hobby')->checkboxList(['0' => '篮球', '1' => '足球', '2' => '羽毛球', '3' => '乒乓球']) ?>
在模板中解析后变成
<div class="form-group field-admin-sex">
<p class="help-block help-block-error"></p>
<input name="Admin[hobby]" value="" type="hidden">
<div id="admin-hobby">
<div class="checkbox"><label><input name="Admin[hobby][]" value="0" type="checkbox"> 篮球</label></div>
<div class="checkbox"><label><input name="Admin[hobby][]" value="1" checked="" type="checkbox"> 足球</label></div>
<div class="checkbox"><label><input name="Admin[hobby][]" value="2" type="checkbox"> 羽毛球</label></div>
<div class="checkbox"><label><input name="Admin[hobby][]" value="3" type="checkbox"> 乒乓球</label></div>
</div>
</div>
复选框2
有点想单选因为只有0和1两个值,但是可以手动添加多个重复选择
<?php echo $form->field($model, 'basketball')->checkbox(); ?>
<?php echo $form->field($model, 'football')->checkbox(); ?>
在模板中解析后变成
<div class="checkbox">
<label for="admin-basketball">
<input name="Admin[basketball]" value="0" type="hidden"><input id="admin-basketball" name="Admin[hobby]" value="1" checked="" type="checkbox">
basketball
</label>
<p class="help-block help-block-error"></p>
</div>
<div class="checkbox">
<label for="admin-football">
<input name="Admin[football]" value="0" type="hidden"><input id="admin-football" name="Admin[football]" value="1" checked="" type="checkbox">
football
</label>
<p class="help-block help-block-error"></p>
</div>
文本域
<?php
echo $form->field($model, 'sex', [
// 可以自定义,并会覆盖掉form中设置的属性
'template' => '<div class="form-group">{label}<div class="col-lg-6">{input}</div>{error}</div>',
'labelOptions' => ['class' => 'col-lg-2 control-label'],
])->textarea([
'rows' => 4, // 可输入多少行
'placeholder' => '输入框描述内容'
]) ?>
在模板中解析后变成
<div class="form-group field-admin-info">
<div class="form-group">
<label class="col-lg-2 control-label" for="admin-info">info</label>
<div class="col-lg-6">
<textarea id="admin-info" class="form-control" name="Admin[info]" rows="4" placeholder="输入框描述内容">1</textarea>
</div>
<p class="help-block help-block-error"></p>
</div>
</div>
隐藏输入域
<?php echo $form->field($model, 'text')->hiddenInput(['value' => 1]) ?>
在模板中解析后 input 变成
<input id="admin-text" class="form-control" name="Admin[text]" value="1" type="hidden" />
表单提交按钮
提示:标签中可以使用三木运算符来改变文字样式
如:$model->isadd ? ‘添加’ : ‘修改’
?php echo Html::submitButton($model->isadd ? '添加' : '修改', ['class' => $model->isadd ? 'btn btn-primary' : ' btn-glow primary login']); ?>
在模板中解析后变成
<button type="submit" class="btn btn-primary">添加</button>
或
<button type="submit" class="btn-glow primary login">修改</button>
表单重置按钮
<?php echo Html::resetButton('重置', ['class' => 'btn btn-info']) ?>
在模板中解析后变成
<button type="reset" class="btn btn-info">重置</button>
dropDownList 与 checkboxList遍历
// 控制器引入ArrayHelper
use yii\helpers\ArrayHelper;
方法中
//从数据库取出数据
$Admin= Admin::find()->all();
$dataList = ArrayHelper::map($Admin, 'id', 'name');
//$dataList 就变成 Array ( [0] => 张三 [1] => 李四 [2] => 王五 )
模板中
<?php echo $form->field($model, 'sex')->radioList($dataList) ?>
<?php echo $form->field($model, 'edu')->dropDownList($dataList, ['prompt' => '请选择', 'style' => 'width:120px']) ?>
checkBoxList 自定义样式
方法一
<?php $model->test=($model->test)?:[1,2,3]?>
<?= $form->field($model, 'test',
[
'options'=>['class' => 'form-group form-md-checkboxes'],
'template' => '{label}<div class="col-md-9 md-checkbox-inline">{input}</div>{hint}{error}',
]
)->checkBoxList($model->test(),
[
'item' => function($index, $label, $name, $checked, $value) {
//$index 数组键名
//$label 标签名
//$name 设置checkbox的name
//$checked 默认选择
//$value 值
$checked=$checked?"checked":"";
$return = '<div class="md-checkbox">';
$return .= '<input type="checkbox" id="' . $name . $value . '" name="' . $name . '" value="' . $value . '" class="md-checkbox" '.$checked.'>';
$return .= '<label for="' . $name . $value . '"><span></span><span class="check"></span><span class="box"></span>' . ucwords($label) . '</label>';
$return .= '</div>';
return $return;
}
]) ?>
方法二
item : 在生成每个checkbox表单的时候,都会回调这个函数,如果设置了则使用返回值作为checkbox的表单,否则使用static::checkbox函数来生成每个checkbox表单,函数格式为: function ($index,$label, $name, $checked, $value)
<?php $model->test=($model->test)?:[1,2,3]?>
<?= Html::checkboxList('children', [], $model->test, ['class' => 'col-lg-5',
'item' => function ($index, $label, $name, $checked, $value) {
//$index 数组键名
//$label 标签名
//$name 设置checkbox的name
//$checked 默认选择
//$value 值
$checkStr = $checked ? "checked" : "";
return '<label><input type="checkbox" style="margin:10px" name="' . $name . '" value="' . $value . '" ' . $checkStr . ' class="class' . $index . '" data-uid="user' . $index . '">' . $label . '</label>';
}]); ?>
方法三
最简单
<?php $model->sex=($model->test)?:[1,2,3]?>
<?= Html::checkboxList('children', [], $model->test, ['class' => 'col-lg-5','itemOptions'=>array('style'=>'margin:10px')]); ?>