使用Yii2.0创建表单组件(input/单选按钮组/textarea文本域/文件上传...)
来源:互联网 发布:tensor flow 知乎 编辑:程序博客网 时间:2024/05/23 20:03
使用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、单选按钮组、文件上传组件的使用:
<?phpuse 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创建下拉菜单参见另一篇博。
阅读全文
1 0
- 使用Yii2.0创建表单组件(input/单选按钮组/textarea文本域/文件上传...)
- Yii2使用表单上传文件
- Yii2使用表单上传文件
- Html: 表单、文本域、单选按钮
- yii2.0表单上传文件
- Yii2.0-单文件上传
- Yii2使用原生态input上传文件
- input上传文件按钮使用
- text文本输入表单input和textarea
- 单选按钮组组件的使用
- yii2.0使用ActionForm创建表单
- yii2.0使用ActionForm创建表单
- yii2.0使用ActionForm创建表单
- yii2.0使用ActionForm创建表单
- yii2 常用组件 -- 按钮组(ButtonGroup)
- 表单控件(文本域textarea)
- iOS使用表单流上传文件(图片/文本/...)
- nodejs使用multer中间件上传混合表单提交(文件和非文件普通文本域)
- com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException
- 剑指offer——65.矩阵中的路径
- 读《编译原理》第十章至终章 指令级并行性
- Android组件定位不准的原因
- zookeeper
- 使用Yii2.0创建表单组件(input/单选按钮组/textarea文本域/文件上传...)
- BZOJ 1150: [CTSC2007]数据备份Backup 链表
- OpenGL学习:Per-fragment operation(3)-混合(blending)
- Arch美化——配置oh-my-zsh
- 机器学习第九周(一)--异常检测
- MVC、MVP、MVVM模式
- chrome解决跨域(CORS)问题---chrome插件
- 递归数列
- 搭win server2012的web服务器