README

此库将创建具有浮动效果的占位符标签，具体取决于表单字段是否被填充或空白。

支持

文本输入和选择字段
Select2 支持
针对Bootstrap表单优化
支持Yii2表单 - 确保按照以下描述进行配置！

安装

安装此扩展的首选方式是通过 composer。

运行以下命令之一：

php composer.phar require mate-code/animated-label-form

或

"mate-code/animated-label-form": "~1.0"

将其添加到您的 composer.json 文件的require部分。

用法

在您的 <head> 标签内添加

<link href="/path/to/animated-label-form.css" rel="stylesheet">
<script src="/path/to/jQuery.js"></script>
<script src="/path/to/animated-label-form.js"></script>

并按以下方式构建您的表单

<form class="animated-label">

  <div class="form-group">
    <input type="email" class="form-control" id="exampleInputEmail1">
    <label for="exampleInputEmail1">Email address</label>
  </div>
  
  <!-- other form fields -->
  
</form>

确保将 <label> 放在输入字段之后

Yii2用法

在Yii2中的使用方式与表单的 begin 方法没有变化

<?php 

use yii\bootstrap\ActiveForm;

$form = ActiveForm::begin([
    "options"     => ["class" => "animated-label"],
    "fieldConfig" => ["template" => "{input}\n{label}\n{hint}\n{error}"],
]); 

?>

mate-code / animated-label-form

维护者

详细信息

README

支持

安装

用法

Yii2用法