Yii2.0-表单form组件

第一步
创建模型

<?php
//模型命名空间
namespace app\modules\models;   
//引入继承类
use yii\db\ActiveRecord;
class Admin extends ActiveRecord
{   
   //当模板的input标签中需要一个在数据库表中没有的字段时需要在模型类里添加一个属性
   //如模板中的rememberMe是admin表中没有的字段，就需要在这里定义一个属性。
    public $rememberMe = true;
    public $repass;
    public static function tableName()
    {
        //返回数据库表名；
        //{{% }} 是加入表前缀 
        //admin  是数据库表名
        return "{{%admin}}";
    }
}

?>

创建控制器

<?php
//控制器命名空间
namespace app\modules\controllers;
//引入Controller类
use yii\web\Controller;
//引入admin模型类
use app\modules\models\Admin;

class PublicController extends Controller
{
    public function actionLogin()
    {
        $this->layout = false;
        //实例化admin类
        $model = new Admin;
        //渲染模板
        return $this->render("login", ['model' => $model]);
    }
 }

前台模板

首先需要在模板中载入form组件 use yii\bootstrap\ActiveForm;
然后在html这加入以下代码作为表单的开头。

<?php
//fieldConfig  对form表单每一个input的配置
//'template' => '{error}{input}' 只留error 和input标签
 $form = ActiveForm::begin([
       'fieldConfig' => [
       'template' => '{error}{input}',
         ],
   ]); 
?>

加入input组件
$model ：是控制器渲染标签
adminuser 是字段名，相当于input 里 name=adminuser
textInput() 表示定义的是 text标签
"class"=>"span12" 给input标签添加 span12 类
"placeholder" => "管理员账号" 添加 placeholder 标签描述输入内容

<?php echo $form->field($model, 'adminuser')->textInput(["class" => "span12", "placeholder" => "管理员账号"]); ?>

密码input
$model ：是控制器渲染标签
adminpass 是字段名，相当于input 里 name=adminuser
passwordInput() 表示input定义的是 type=”password”标签
"class"=>"span12" 给input标签添加 span12 类
"placeholder" => "管理员密码" 添加 placeholder 标签描述输入内容

<?php echo $form->field($model, 'adminpass')->passwordInput(["class" => "span12", "placeholder" => "管理员密码"]); ?>

复选框
$model ：是控制器渲染标签
rememberMe 数据库表中没有这个字段所以需要在admin模型中添加一个rememberMe属性不然会报错，同样也相当于input 里 name=rememberMe
checkbox() 表示input定义的是 type=”checkbox”标签
"id"=>"remember-me" 给input标签添加 remember-me ID
template 从以下代码可以看出在template标签里可以写html代码
{input} 这个{input}代表input标签放置的位置

 <?php echo $form->field($model, 'rememberMe')->checkbox([
                    'id' => 'remember-me',
                    'template' => '<div class="remember">{input}<label for="remember-me">记住我</label></div>',
                ]); ?>

提交按钮
做提交按钮需要引入另一个组件类 use yii\helpers\Html;

submitButton() ：定义提交按钮标签
登录 按钮表述
["class" => "btn-glow primary login"] 给submit标签添加的class样式

<?php echo Html::submitButton('登录', ["class" => "btn-glow primary login"]); ?>

ActiveForm::end(); 做为表单的结尾

 <?php ActiveForm::end(); ?>

以下是整个模板完整的代码


<?php
   //载入form组件
    use yii\bootstrap\ActiveForm;
    use yii\helpers\Html;
?>
<!DOCTYPE html>
<html class="login-bg">
<head>
    <title>慕课商城 - 后台管理</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- bootstrap -->
    <link href="assets/admin/css/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="assets/admin/css/bootstrap/bootstrap-responsive.css" rel="stylesheet" />
    <link href="assets/admin/css/bootstrap/bootstrap-overrides.css" type="text/css" rel="stylesheet" />

    <!-- global styles -->
    <link rel="stylesheet" type="text/css" href="assets/admin/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="assets/admin/css/elements.css" />
    <link rel="stylesheet" type="text/css" href="assets/admin/css/icons.css" />

    <!-- libraries -->
    <link rel="stylesheet" type="text/css" href="assets/admin/css/lib/font-awesome.css" />

    <!-- this page specific styles -->
    <link rel="stylesheet" href="assets/admin/css/compiled/signin.css" type="text/css" media="screen" />

    <!-- open sans font -->

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>


    <div class="row-fluid login-wrapper">
    <a class="brand" href="<?php echo yii\helpers\Url::to(['/index/index']) ?>"></a>
        <?php $form = ActiveForm::begin([
            'fieldConfig' => [
                'template' => '{error}{input}',
            ],
        ]); ?>
        <div class="span4 box">
            <div class="content-wrap">
                <h6>慕课商城 - 后台管理</h6>
                <?php echo $form->field($model, 'adminuser')->textInput(["class" => "span12", "placeholder" => "管理员账号"]); ?>
                <?php echo $form->field($model, 'adminpass')->passwordInput(["class" => "span12", "placeholder" => "管理员密码"]); ?>
                <a href="<?php echo yii\helpers\Url::to(['public/seekpassword']); ?>" class="forgot">忘记密码?</a>
                <?php echo $form->field($model, 'rememberMe')->checkbox([
                    'id' => 'remember-me',
                    'template' => '<div class="remember">{input}<label for="remember-me">记住我</label></div>',
                ]); ?>
                <?php echo Html::submitButton('登录', ["class" => "btn-glow primary login"]); ?>
            </div>
        </div>
        <?php ActiveForm::end(); ?>
    </div>

    <!-- scripts -->
    <script src="assets/admin/js/jquery-latest.js"></script>
    <script src="assets/admin/js/bootstrap.min.js"></script>
    <script src="assets/admin/js/theme.js"></script>

    <!-- pre load bg imgs -->
    <script type="text/javascript">
        $(function () {
            // bg switcher
            var $btns = $(".bg-switch .bg");
            $btns.click(function (e) {
                e.preventDefault();
                $btns.removeClass("active");
                $(this).addClass("active");
                var bg = $(this).data("img");

                $("html").css("background-image", "url('img/bgs/" + bg + "')");
            });

        });
    </script>

</body>
</html>

Yii2.0-表单form组件

前台模板

猜你喜欢