使用Yii2.0创建表单组件（input/单选按钮组/textarea文本域/文件上传...）

使用Yii2.0创建表单组件

在Yii中，通过使用yii\widgets\ActiveForm类的方式使用表单。

在View视图中显示的表单会有一个相对应的model模型，用来验证其输入的服务器数据。因此首先定义模型，再创建基于模型的表单。

下面使用一个项目中的实例以展示表单的创建：

1.Model：该表单的模型：

class Projects extends ActiveRecord
{
/**
* 字段验证规则
* @return array
*/
public function rules()
{
return [
["type", "required", "message" => "{attribute}不可为空"],
["type", "in", "range" => ["vr", "train"], "message" => "{attribute}输入有误"],

["name", "filter", "filter" => "trim"],
["name", "required", "message" => "{attribute}不可为空"],
["name", "string", "length" => [3, 80], "message" => "{attribute}长度应在3~80个字符之间"],

["applicant_name", "filter", "filter" => "trim"],
["applicant_name", "required", "message" => "{attribute}不可为空"],
["applicant_name", "string", "length" => [2, 20], "message" => "{attribute}长度应在2~20个字符之间"],

["team", "filter", "filter" => "trim"],
["team", "required", "message" => "{attribute}不可为空"],
["team", "string", "length" => [2, 80], "message" => "{attribute}长度应在2~80个字符之间"],

["description", "required", "message" => "{attribute}不可为空"],
["description", "string", "min" => 10, "message" => "{attribute}长度应大于10个字符"],

[["file"], "file", "extensions" => "gif, jpg, jpeg, png, pdf, doc, docx, ppt, pptx, xls, xlsx, zip, rar", "maxSize" => 1024 * 1024 * 10, "wrongExtension" => "仅支持上传 {extensions} 类型的文件", "tooBig" => "文件 \"{file}\" 太大了。 请将文件大小控制在 {formattedLimit} 以内！"]
];
}
//...
}

2.HTML：该表单的前端HTML布局(静态时)：

<div class="edit_info part active" style="padding-top: 10px;">
<h2>项目申报编辑</h2>
<form>
<div class="per_item nospace">
<span>*项目名称：</span>
<label for=""><input type="text"></label>
</div>
<div class="per_item type">
<span>*项目类型：</span>
<label for="vr"><input type="radio" name="type" id="vr">VR应用</label>
<label for="intelli"><input type="radio" name="type" id="intelli">人才培养</label>
</div>
<div class="per_item nospace">
<span>*申 报 人 ：</span>
<label for=""><input type="text"></label>
</div>
<div class="per_item">
<span>*项目团队：</span>
<label for=""><input type="text"><p>请填写项目团队人员姓名，姓名之间用“；”隔开</p></label>
</div>
<div class="per_item">
<span>*项目概述：</span>
<label for=""><textarea></textarea><p>请简要说明项目立项的必要性、项目目标、实施方案、筹资方案、组织方式、相关基础条件等</p></label>
</div>
<div class="per_item" style="margin-top: 80px;">
<span>*上传附件：</span>
<label for="file">+ 上传附件<input type="file" id="file"></label>
<p>请上传项目方案详细的文档材料等，多个材料请打包成压缩包上传</p>
</div>
<div class="btn_group" style="text-align: center;">
<button type="button" id="commit_btn">确认提交</button>
<button type="button" id="save_btn">暂时保存</button>
</div>
</form>
</div>
3.Controller：在控制器中，将传递一个模型的实例到视图，ActiveForm小部件用以显示表单。以下实例将分别演示input、textarea、单选按钮组、文件上传组件的使用：

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
?>
<?php $form = ActiveForm::begin(["id" => "form-new-edit"]); ?>
<!-- input -->
<?= $form->field($project,'name',[
'options' => [],
'template' => "<div class='per_item nospace'><span>*项目名称：</span><label for=''>{input}{error}</label></div>"
])->textInput([
'autofocus' => true,
'placeholder' => ''
])
?>
<!-- 单选按钮组radio -->
<div class="per_item type" style="position: relative;">
<span>*项目类型：</span>
<?= $form->field($project,"type")->radioList(
['0' => 'VR应用', '1' => '人才培养'],
[
'item' => function($index,$label,$name,$checked,$value){
$checked = $index ? "" : "checked";
$return = "<label for='t".$index."'>";
$return .= "<input type='radio' name='type' id='t".$index."'".$checked." value='".$label."'/>";
$return .= ucwords($label);
$return .= "</label>";
return $return;
}
]
)->label(false);
?>
</div>
<!-- textarea文本域 -->
<?= $form->field($project,"description",[
'options' => [],
'template' => "<div class='per_item'><span>*项目概述：</span><label for='' style='height: inherit;margin-bottom: 20px;'>{input}<p>请简要说明项目立项的必要性、项目目标、实施方案、筹资方案、组织方式、相关基础条件等</p>{error}</label></div>"
])->textarea([
'autofocus' => false,
'placeholder' => ''
])
?>
<!-- 文件上传按钮file -->
<div class="per_item fileUploader">
<span>*上传附件：</span>
<?= $form->field($project,"file")->fileInput() ?>
<p>请上传项目方案详细的文档材料等，多个材料请打包成压缩包上传</p>
</div>
<!-- 提交按钮button -->
<div class="btn_group" style="text-align: center;">
<?= Html::submitButton('确认提交',["id" => "commit_btn", "type" => "button"]) ?>
<?= Html::submitButton('暂时保存',["id" => "save_btn", "type" => "button"]) ?>
</div>
<?php $form = ActiveForm::end(); ?>

4.View：视图效果：



参考文章：Yii2.0中文网文档  http://www.yiichina.com/doc/guide/2.0/input-forms

使用Yii2.0创建下拉菜单参见另一篇博。