I want to create form using yii2 ActiveForm. Here is my code:
<?php
$form = \yii\widgets\ActiveForm::begin([
'options' => [
'class' => 'form-inline'
]
]);
?>
<div class="form-group">
<label class="sr-only" for="example">Email</label>
<?php echo $form->field($model, 'email', [
'inputOptions' => ['autofocus' => 'autofocus', 'class' => 'form-control transparent']
])->textInput(['placeholder' => "Enter Your Email"])->input('email')->label(false); ?>
</div>
<button type="submit" class="subscr-btn btn btn-primary btn-fill">Join</button>
<?php \yii\widgets\ActiveForm::end(); ?>
which generates this html:
<form id="w0" class="form-inline" action="/example" method="post">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<div class="form-group field-subscriber-email required">
<input type="email" id="subscriber-email" class="form-control transparent" name="Subscriber[email]"
autofocus="autofocus">
<div class="help-block"></div>
</div>
</div>
<button type="submit" class="subscr-btn btn btn-primary btn-fill">Join</button>
Everything is ok, but where is placeholder?
Put it inside input() method as second parameter - reference
<div class="form-group">
<label class="sr-only" for="example">Email</label>
<?php echo $form->field($model, 'email', [
'inputOptions' => ['autofocus' => 'autofocus', 'class' => 'form-control transparent']
])->textInput()->input('email', ['placeholder' => "Enter Your Email"])->label(false); ?>
</div>
Related
displaying msg on above the line, how to display error msg below line. I have added below view page. any suggestions.
below is view page
<div class="ibox-content bwform clearfix" id="bwcart">
<h2><b>Profile</b><div id="loader"></div></h2>
<?php $form = ActiveForm::begin(
['action' =>'',
'options' => ['method'=>'post','class'=>'form-horizontal','id'=>'profile-form','enctype'=>'multipart/form-data'],
'fieldConfig' => [
'template' => "{label}<div class=\"col-md-12\">{input}\n{error}</div>",
'labelOptions' => ['class' => 'col-lg-12 control-label p-l-0'],
],
'enableAjaxValidation'=>true,'enableClientValidation' => true,'validateOnSubmit'=>true]); ?>
<div class="box-2">
<div class="input input--hoshi <?=$prefilled ?>">
<?= $form->field($model, 'firstname')->textInput(array('placeholder' => '','class'=>'input__field input__field--hoshi'))->label(false); ?>
<label class="input__label input__label--hoshi input__label--hoshi-color-3" for="first_name">
<span class="input__label-content input__label-content--hoshi">First Name</span>
</label>
</div>
</div>
<div class="box-2">
<div class="input input--hoshi <?=$prefilled ?>">
<?= $form->field($model, 'lastname')->textInput(array('placeholder' => '','class'=>'input__field input__field--hoshi'))->label(false); ?>
<label class="input__label input__label--hoshi input__label--hoshi-color-3" for="first_name">
<span class="input__label-content input__label-content--hoshi">Last Name</span>
</label>
</div>
</div>
You can use this solution:
<?php $form = ActiveForm::begin(
['action' =>'',
'options' => ['method'=>'post','class'=>'form-horizontal','id'=>'profile-form','enctype'=>'multipart/form-data'],
'fieldConfig' => [
//modify this
'template' => "{label}<div class='col-md-12'>{input}</div><div class='col-md-12 '>{error}</div>",
'labelOptions' => ['class' => 'col-lg-12 control-label p-l-0'],
],
'enableAjaxValidation'=>true,'enableClientValidation' => true,'validateOnSubmit'=>true]); ?>
So your error tag is positioned
under your input tag.
Your error attribute should not be in your col-md-12 class div.
So it should be like this:
<?php $form = ActiveForm::begin(
['action' =>'',
'options' => ['method'=>'post','class'=>'form-horizontal','id'=>'profile-form','enctype'=>'multipart/form-data'],
'fieldConfig' => [
'template' => "{label}<div class=\"col-md-12\">{input}</div>{error}",
'labelOptions' => ['class' => 'col-lg-12 control-label p-l-0'],
],
'enableAjaxValidation'=>true,'enableClientValidation' => true,'validateOnSubmit'=>true]); ?>
I want to add some nice bottstrap html and css to my register page, but i don't know how to embedding php into html input and show it with style. Is there any way to do this?
The code produces the next view:
Full .php file
Note: it is showing both forms(to compare results), php and html + php. form with only php works fine, the problem is to give it style.
<?php defined('BASEPATH') OR exit('No direct script access allowed');?>
<link rel="stylesheet" href="<?= base_url('assets/bootstrap2/bootstrap.min.css'); ?>">
<link rel="stylesheet" href="<?= base_url('assets/bootstrap2/bootstrap.css'); ?>">
<link rel="stylesheet" href="<?= base_url('assets/js2/bootstrap.js'); ?>">
<link rel="stylesheet" href="<?= base_url('assets/js2/bootstrap.min.js'); ?>">
<div class="container">
<?php
echo isset($_SESSION['auth_message']) ? $_SESSION['auth_message'] : FALSE;
?>
<h1>Registro usuario</h1>
<?php
echo form_open();
echo form_label('Nombre:','first_name').'<br />';
echo form_error('first_name');
echo form_input('first_name',set_value('first_name')).'<br />';
echo form_label('Apellidos:','last_name').'<br />';
echo form_error('last_name');
echo form_input('last_name',set_value('last_name')).'<br />';
// echo form_label('Username:','username').'<br />';
//echo form_error('username');
//echo form_input('username',set_value('username')).'<br />';
echo form_label('Email:','email').'<br />';
echo form_error('email');
echo form_input('email',set_value('email')).'<br />';
echo form_label('Contraseña:', 'password').'<br />';
echo form_error('password');
echo form_password('password').'<br />';
echo form_label('Confirmar contraseña:', 'confirm_password').'<br />';
echo form_error('confirm_password');
echo form_password('confirm_password').'<br /><br />';
echo form_submit('register','Confirmar');
echo form_close();
?>
</div>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Registro de usuario</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Nombre</label>
<div class="col-md-4">
<!-- <input value="" id="textinput" name="textinput" type="text" placeholder="Ej: José Manuel..." class="form-control input-md" required=""> -->
<?php $nombre = array(
'name' => 'first_name',
'id' => 'first_name',
'type' => 'text',
'class' => 'form-control input-md',
'placeholder' => 'Ej: José Manuel...',
); ?>
<?php echo form_input($nombre); ?>
<!-- <?php echo form_input('first_name',set_value('first_name')); ?> -->
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Apellidos</label>
<div class="col-md-4">
<!-- <input value="" id="textinput" name="textinput" type="text" placeholder="Ej: Palma..." class="form-control input-md" required=""> -->
<?php $apellidos = array(
'name' => 'last_name',
'id' => 'last_name',
'type' => 'text',
'class' => 'form-control input-md',
'placeholder' => 'Ej: Palma...',
); ?>
<?php echo form_input($apellidos); ?>
<!-- <?php echo form_input('last_name',set_value('last_name')); ?> -->
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Email</label>
<div class="col-md-4">
<!-- <input value="" id="textinput" name="textinput" type="text" placeholder="Ej: herba#gmail.com..." class="form-control input-md" required=""> -->
<?php $email = array(
'name' => 'email',
'id' => 'email',
'type' => 'text',
'class' => 'form-control input-md',
'placeholder' => 'Ej: herba#gmail.com...',
); ?>
<?php echo form_input($email); ?>
<!-- <?php echo form_input('email',set_value('email'));?> -->
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="passwordinput">Contraseña</label>
<div class="col-md-4">
<!-- <input value="" id="passwordinput" name="passwordinput" type="password" placeholder="Ej: herbaricemills9..." class="form-control input-md" required=""> -->
<?php $password = array(
'name' => 'password',
'id' => 'password',
'type' => 'password',
'class' => 'form-control input-md',
'placeholder' => 'Ej: herbaricemills9...',
); ?>
<?php echo form_input($password); ?>
<!-- <?php echo form_password('password'); ?> -->
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="passwordinput">Confirmar contraseña</label>
<div class="col-md-4">
<!-- <input value="" id="passwordinput" name="passwordinput" type="password" placeholder="Repetir contraseña..." class="form-control input-md" required=""> -->
<?php $password1 = array(
'name' => 'confirm_password',
'id' => 'confirm_password',
'type' => 'password',
'class' => 'form-control input-md',
'placeholder' => 'Repetir contraseña...',
); ?>
<?php echo form_input($password1); ?>
<!-- <?php echo form_password('confirm_password');?> -->
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<!-- <button value="" id="singlebutton" name="singlebutton" class="btn btn-primary">Confirmar</button> -->
<!-- <?php $confirm = array(
'name' => 'singlebutton',
'id' => 'singlebutton',
//'type' => 'password',
'class' => 'btn btn-primary',
); ?>
<?php echo form_input($confirm); ?> -->
<?php echo form_submit('register','Confirmar');?>
</div>
</div>
</fieldset>
</form>
for inserting this
<input value="" id="textinput" name="textinput" type="text" placeholder="Ej: herba#gmail.com..." class="form-control input-md" required="">
try to use this example:
$data = array(
'name' => 'textinput',
'id' => 'textinput',
'type' => 'text',
'class' => 'form-control input-md',
'placeholder' => 'Ej: herba#gmail.com...',
);
echo form_input($data);
you can use like below.
for example first_name field
$data = array(
'name' => 'first_name',
'id' => 'first_name',
'type' => 'text',
'class' => 'form-control input-md',
'placeholder' => 'Enter First Name',
);
echo form_input($data);
use same for other element too.
This is my code I want to add template for input field which is not proper what i want:
<?=$form->field($modelSignupSlotDates, 'SlotDate',
[
'template' => "<div class='col-md-2'><div class='form-group date'>{input}</div></div>",'options'=>['class'=>'form-group']
])->widget(DatePicker::classname(), [
'name'=>"SignupSlotDates[SlotDate]",
'options' => ['placeholder' => Yii::t($messageFile,'SignupExpirationDatePlaceholderText'), 'autocomplete' => 'off'],
'type' => DatePicker::TYPE_COMPONENT_APPEND,
'removeButton' => false,
'pluginOptions' => [
'autoclose'=>true,
'format' => 'mm-dd-yyyy',
'startDate' => date('m-d-Y'),
'endDate' => date('m-d-Y', strtotime('+60 days')),
]
])->label(false);?>
And Below is the HTML what I'm getting:
<div class="form-group field-signupslotdates-slotdate">
<div class="col-md-2">
<div class="form-group date">
<div id="signupslotdates-slotdate-kvdate" class="input-group date">
<input id="signupslotdates-slotdate" class="krajee-datepicker form-control" name="SignupSlotDates[SlotDate]" placeholder="Expiration date" autocomplete="off" data-datepicker-source="signupslotdates-slotdate-kvdate" data-datepicker-type="3" data-krajee-kvdatepicker="kvDatepicker_26ee0803" type="text">
<span class="input-group-addon kv-date-calendar" title="Select date">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
But I want Below Structure, which i'm not able to do.
<div class='col-md-2'><div class='form-group date'>
<input class="krajee-datepicker form-control" name="" placeholder="Date" type="text">
<span class='input-group-addon kv-date-calendar' title='Select date'><i class='glyphicon glyphicon-calendar'></i></span>
</div>
</div>
i have created a form in yii2 basic and used material design to enable floating labels but its labels are not floating above when i click the input field. Here is my code for form.
<?php
$form = ActiveForm::begin([
'action' => ['index'],
'method' => 'get',
]);
?>
<div class="panel-body container-fluid">
<div class="row">
<div class="col-md-12">
<div class="col-xs-6 col-lg-6">
<div class="form-group form-material floating" data-plugin="formMaterial">
<?= $form->field($model, 'corporation_name',[ 'labelOptions' => [ 'class' => 'floating-label' ]])->textInput(['maxlength' => true, 'class' => 'form-control'])->label('Corporation Name') ?>
</div>
<div class="form-group form-material floating" data-plugin="formMaterial">
<?= $form->field($model, 'user_first_name',[ 'labelOptions' => [ 'class' => 'floating-label' ]])->textinput(['class' => 'form-control'])->label('Corporation Admin'); ?>
</div>
</div>
<div class="col-xs-6 col-lg-6">
<div class="form-group form-material floating" data-plugin="formMaterial">
<div class="example"> <b role="presentation"></b>
<?= $form->field($model, 'corporation_status')->dropDownList(Yii::$app->appstatues->status, ['prompt' => 'Status'])->label(false); ?>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group form-material floating m-t-27" data-plugin="formMaterial">
<?= Html::submitButton('Search', ['class' => 'btn-primary btn waves-effect waves-light waves-effect']) ?>
<?= Html::resetButton('Reset', ['class' => 'btn-primary btn waves-effect waves-light waves-effect', 'onclick' => 'location.href = "/admin/corporations";']) ?>
</div>
</div>
</div>
</div>
<?php ActiveForm::end(); ?>
</div>
can anybody tell what am i doing wrong?
Have you look in inspect element?
If I understand you well...
Try to remove divs around input form. When you bind form for model you already have divs around input. Try this...
<?= $form->field($model, 'ime',['options'=>['class'=>'form-group form-material floating', 'data-plugin'=> 'formMaterial'], 'labelOptions' => [ 'class' => 'floating-label' ]])->textInput(['maxlength' => true, 'class' => 'form-control'])->label('Corporation Name') ?>
I set the form parametres:
<? $form = ActiveForm::begin(
[
'options' => ['class' => 'form-horizontal'],
'fieldConfig' =>
[
'template' => '<div class="control-group">{input}</div>.<div class="control-group error">{error}</div>',
],
]);
?>
<div class="control-group">
<b>Регистрация</b>
</div>
<?
echo $form->field($model, 'login', ['template' => "{input}{error}", 'inputOptions' => array('placeHolder' => 'Логин')]);
echo $form->field($model, 'password', ['template' => "{input}{error}", 'inputOptions' => array('placeHolder' => 'Пароль')]);
echo $form->field($model, 'repassword', ['template' => "{input}{error}", 'inputOptions' => array('placeHolder' => 'Повторите пароль')]);
?>
As a result, it still turns a standard form with standart classes:
<form id="w0" class="form-horizontal" action="/web/index.php?r=site%2Freg" method="post">
<input type="hidden" name="_csrf" value="cjZfVVZNOElDbml4NBlhMBRbcjslfFIvFg4OJm4aFSpERDI5Zn19OA==">
<div class="control-group">
<b>Регистрация</b>
</div>
<div class="form-group field-user-login required">
<input type="text" id="user-login" class="asd" name="User[login]" placeHolder="Логин">
<div class="help-block"></div>
</div>
<div class="form-group field-user-password required">
<input type="text" id="user-password" class="asd" name="User[password]" placeHolder="Пароль">
<div class="help-block"></div>
</div>
<div class="form-group field-user-repassword required">
<input type="text" id="user-repassword" class="asd" name="User[repassword]" placeHolder="Повторите пароль">
<div class="help-block"></div>
</div>
</form>
I don't need this classes and div with "help-block" class.
do something like :
$form->field($model, 'username', [ 'inputTemplate' => '<div class="input-group input-group-sm"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>{input}</div>'])->label(false)->textInput(['placeholder'=>'Your Email']);
Updatedcustomize template for all :
$form = ActiveForm::begin([
'layout' => 'horizontal',
'fieldConfig' => [
'template' => "{label}\n{beginWrapper}\n{input}\n{hint}\n{error}\n{endWrapper}",
'horizontalCssClasses' => [
'label' => 'col-sm-4',
'offset' => 'col-sm-offset-4',
'wrapper' => 'col-sm-8',
'error' => '',
'hint' => '',
],
],
]);
references : yii2 doc and bootstrap activeform yii2 doc