详解Yii2 定制表单输入字段的标签和样式

Yii2中对于表单和字段的支持组件为ActiveForm和ActiveField，

要生成一个具有label、input、error提示这样通用格式的登录框，可编写如下代码：

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

 <?= $form->field($model, 'username') ?>
 <?= $form->field($model, 'password')->passwordInput()
 ?>

上述代码生成两个带默认标签名（如Username，Password）的表单输入框（input）。

如果想更改输入框的标签及其样式，有两个方式，一个是通过labelOptions参数：

代码如下:

<?= $form->field($model, 'username',['labelOptions' => ['label' => 'Nick name','class' => 'your own class']]) ?>

还有一个更加面向对象的方法是：

代码如下:

<?= $form->field($model, 'username')->textInput()->hint('Please enter your nick name instead of email')->label('Nick name') ?>

更多关于表单和字段的内容，请参考Yii2在线中文指南-表单章节。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Yii2创建表单(ActiveForm)方法详解

    本文实例讲述了Yii2创建表单(ActiveForm)的方法.分享给大家供大家参考,具体如下: 由于表单涉及到一些验证方面的信息,属性设置又比较多.比较复杂,所以哪里有什么不正确的地方请留言指点 目录 表单的生成 表单中的方法   ActiveForm::begin()方法   ActiveForm::end()方法   getClientOptions()方法   其它方法:errorSummary.validate.validateMultiple 表单中的参数   表单form自身的属性

  • Yii2简单实现给表单添加验证码的方法

    本文实例讲述了Yii2简单实现给表单添加验证码的方法.分享给大家供大家参考,具体如下: 控制器SiteController: class SiteController extends Controller { // ... public function actions() { return [ // ... 'captcha' => [ 'class' => 'yii\captcha\CaptchaAction', 'fixedVerifyCode' => YII_ENV_TEST ?

  • Yii2基于Ajax自动获取表单数据的方法

    本文实例讲述了Yii2基于Ajax自动获取表单数据的方法.分享给大家供大家参考,具体如下: 这里有两张表,表结构如下,locations表存放的省份和邮编等信息,两张表的model和curd均使用gii生成 yii2advanced.customers表 customer_id:int(11) customer_name:varchar(100) zip_code:varchar(20) city:varchar(100) province:varchar(100) yii2advanced.l

  • yii2 modal弹窗之ActiveForm ajax表单异步验证

    前面我们讲述了yii2中如何使用modal以及yii2 gridview列表内更新操作如何使用modal的问题,本以为modal要告一段落可以开始新的话题了,但是实际问题往往超乎想像,这不modal弹窗提交的表单说是怎么验证的问题又出来了,又出来了! 首先撇开modal不谈,我们就yii2 ActiveForm如何以Ajax的方式提交表单做一个简单的说明,这也是我们今天主题的重点,modal确实没啥好说了.后面若是有我再把话改回来. yii2中,ActiveForm默认做了客户端验证,但是表单的

  • Yii2.0 模态弹出框+ajax提交表单

    Yii2.0 模态弹出框+ajax提交表单

    如题 我们使用模态弹出框+ajax提交表单 首先我们把index视图的create按钮添加data-toggle 和 data-target. 代码如下: <?php echo Html::a('添加请假单', ['create'], ['class' => 'btn btn-success','data-toggle'=>'modal','data-target'=>'#ajax']) ?> 在index视图添加如下代码 来显示模态弹出框: <div class=&q

  • YII2.0之Activeform表单组件用法实例

    本文实例讲述了YII2.0之Activeform表单组件用法.分享给大家供大家参考,具体如下: Activeform 文本框:textInput(); 密码框:passwordInput(); 单选框:radio(),radioList(); 复选框:checkbox(),checkboxList(); 下拉框:dropDownList(); 隐藏域:hiddenInput(); 文本域:textarea(['rows'=>3]); 文件上传:fileInput(); 提交按钮:submitBu

  • 详解Yii2 定制表单输入字段的标签和样式

    Yii2中对于表单和字段的支持组件为ActiveForm和ActiveField, 要生成一个具有label.input.error提示这样通用格式的登录框,可编写如下代码: <?php $form = ActiveForm::begin([ 'id' => 'login-form', 'options' => ['class' => 'form-horizontal'], 'fieldConfig' => [ 'template' => "{label}\n

  • 第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.下面逐一给大家介绍,有兴趣的朋友一起学习吧. 创建垂直或基本表单: •·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-cont

  • Linux 详解 /var/log/xferlog的各个字段解析

    Linux 详解 /var/log/xferlog的各个字段解析 /var/log/xferlog的各个字段解析 Thu Dec 1 17:40:46 2016 8 10.11.40.147 32035942 /home/chb/1.txt b _ o r dxpanalysis ftp 0 * c 字段 含义 Thu Dec 1 17:40:46 2016 日期和时间 8 下载文件所花费的秒数 10.11.40.147 远程系统 320359 文件大小 /home/chb/1.txt 本地路径

  • Mybatis详解动态SQL以及单表多表查询的应用

    目录 单表查询操作 参数占位符#{}和${} SQL 注入 like模糊查询 多表查询操作 一对一多表查询 一对多多表查询 动态SQL使用 if标签 trim标签 where标签 set标签 foreach标签 单表查询操作 参数占位符#{}和${} #{}:相当于JDBC里面替换占位符的操作方式(#{}->“”).相当于预编译处理(预编译处理可以防止SQL注入问题) ${}:相当于直接替换(desc这种关键字),但这种不能预防SQL注入 select * from userinfo where

  • Python 中的 Counter 模块及使用详解(搞定重复计数)

    文章目录 参考描述Counter 模块Counter() 类Counter() 对象字典有序性KeyError魔术方法 \_\_missing\_\_ update() 方法 Counter 对象的常用方法most_common()elements()total()subtract() Counter 对象间的运算加法运算减法运算并集运算交集运算单目运算 Counter 对象间的比较>== 参考 项目 描述 Python 标准库 DougHellmann 著 / 刘炽 等 译 搜索引擎 Bing

  • 详解AngularJS实现表单验证

    详解AngularJS实现表单验证

    开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <<input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <<input type="tex

  • js 限制表单输入长度 汉字为两个字符

    将该效果整合成了一个函数,此函数接受3个参数: 第一个为textarea或其他text表单的ID: 第二个为显示输入内容的ID,可留空: 第三个为最多输入的字符,一个汉字为2个字符. 这只是一个基础效果,欢迎同学们进行优化和改进. 要获取代码请查看demo的源文件 限制表单输入长度 汉字为两个字符 function lengthLimit(elem, showElem, max){ var elem = document.getElementById(elem); var showElem =

  • 详解基于Vue cli开发修改外部组件Vant默认样式

    详解基于Vue cli开发修改外部组件Vant默认样式

    前言 在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制 提示:以下是本篇文章正文内容,下面案例可供参考 一.Less 因为Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,可以通过替换样式变量即可定制你自己需要的主题. 给你的项目配置less: npm install less --save-dev npm install less-loader --s

  • CascadeView级联组件实现思路详解(分离思想和单链表)

    CascadeView级联组件实现思路详解(分离思想和单链表)

    本文介绍自己最近做省市级联的类似的级联功能的实现思路,为了尽可能地做到职责分离跟表现与行为分离,这个功能拆分成了2个组件并用到了单链表来实现关键的级联逻辑,下一段有演示效果的gif图.虽然这是个很常见的功能,但是本文的实现逻辑清晰,代码好理解,脱离了省市级联这样的语义,考虑了表现与行为的分离,希望本文的内容能够为你的工作带来一些参考的价值,欢迎阅读和指正. Cascade 级联操作 CascadeType. PERSIST 级联持久化 ( 保存 ) 操作 CascadeType. MERGE 级

  • 详解Angular 4 表单快速入门

    基础知识 Angular CLI 基本使用 安装 Angular CLI (可选) npm install -g @angular/cli 创建新的项目 ng new PROJECT-NAME 启动本地服务器 cd PROJECT-NAME ng serve Angular Forms 简介 Angular 4 中有两种表单: Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) Reactive Forms - 响应式表单 本文主要

随机推荐