Yii2 ActiveForm修改表单样式

使用ActiveForm小部件来定义表单代码简洁易读,但是需要调整表单样式的时候就没有使用div布局那么直接明了,下面记录一部分针对ActiveForm表单样式调整的过程,方便以后使用. 后续会继续补充.

1.在表单元素form中设置

<?php $form = ActiveForm::begin(['id' => 'login-form','options' => ['class'=>'form-horizontal'],'fieldConfig' => ['template' => "<div'>{label}</div><div>{input}</div><div class='col-lg-10 col-lg-offset-2'>{error}</div>",],'labelOptions' => ['class'=>'control-label col-lg-2' ],'inputOptions' => ['class'=>'col-lg-8'],]); ?><?php $form = ActiveForm::end() ?>

上面代码ActiveForm::begin()中的配置信息:

'id'表示表单的id属性;
'options'为表单form元素的样式,如果需要上传文件的时候,还可以设置'encytype'=>'multipart/formdata';
'fieldConfig'统一修改字段模板, 'template'指定表单每个form-group中显示的内容.也可以在这里指定class或者设置行内css样式;
'labelOptions'添加label标签样式
'inputOptions'添加输入框input样式

2.修改某个字段的样式

设置checkbox样式

<?= $form->field($model, 'rememberMe')->label('记住帐号')->checkbox(['template'=>"<div class='col-lg-4 col-lg-offset-2'>{input}{label}</div>",'lay-skin' => 'primary','title' => '记住密码'
]) ?>

设置按钮样式

<div class="form-group"><?= Html::submitButton('登录', ['class' => 'col-lg-10 btn btn-primary col-lg-offset-1', 'name' => 'login-button'])?>
</div>

待续...

Yii2 ActiveForm修改表单样式相关推荐

html修改表单样式,HTML 样式表单
HTML 的 style 属性 style 属性的作用: 提供了一种改变所有 HTML 元素的样式的通用方法. 样式是 HTML 4 引入的,它是一种新的首选的改变 HTML 元素样式的方式.通过 H ...
yii表单ajax验证,yii2 modal弹窗之ActiveForm ajax表单异步验证
前面我们讲述了yii2中如何使用modal以及yii2 gridview列表内更新操作如何使用modal的问题,本以为modal要告一段落可以开始新的话题了,但是实际问题往往超乎想像,这不modal弹 ...
还不错的Table样式和form表单样式
作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加上图: 带鼠标滑动效果的table样式看起来比较清爽样式 <he ...
html中某个名称不能修改,解决type=file 文件修改表单名称不能正常回显的问题
easyui 框架下代码如下: css: .file_box{ float: right; width: 1035px; border: 1px solid #999; height: 32px ...
基于jQuery会员中心安全修改表单代码
基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览源码下载实现的代码. html代码 ...
js入门·表单详解一（修改表单属性，修改表单元素值）
实在javascript入门·Document对象入门讲解(访问表单,创建新页,获取页标题) 一文中,我们已经把表单的一些基本访问等弄清楚了,下面我们深入的学下表单的属性以及对表单元素的简单操作! 演 ...
1-17. Bootstrap 表单样式汇总
网站数据交互一般都是通过表单实现 Bootstrap中表单布局类型有哪些? 垂直表单内联表单水平表单向父 <form> 元素添加 role="form" 把标签和 ...
用于设定表格样式的附加css,css设置表格与能表单样式.ppt
css设置表格与能表单样式第6章 CSS设置表格与表单样式学习目标什么是表格模型对数据表格应用样式. 创建简单和复杂的表单布局对各种表单元素应用样式. 掌握CSS中用列表制作各种菜单的方法. ...
精通CSS.DIV网页样式与布局（五） ——设置表格与表单样式
原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...
css美化表格和表单样式
Css美化表格和表单样式表格创建默认是没有边框的,我们要用boder属性去设置表格的边框表格基本样式表格边框合并boder-collapse 在显示表格时,通常来说表格都是有边框的,边框的作用: ...

Yii2 ActiveForm修改表单样式

Yii2 ActiveForm修改表单样式相关推荐

最新文章

热门文章