How is is possible to include a prepend icon or an append icon using form_input();
<?php
$email = array(
'name' => '',
'value' => '',
'id' => null,
'placeholder' => 'Email',
'class' => 'mail form-control'
);
echo form_input($email);
?>
What I would like to do is add, for example, the following bootstrap 3 styling to the email input box:
<span class="input-group-addon" id="basic-addon2">@example.com</span>
I am unsure how that would fit into the array. I have looked at the manual for CI3, however, it does not mention anything in particular. Any suggestions, etc, appreciated.
This is what I am aiming for:
Taking code from bootstrap website:
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<?php
$email = array(
'type' => 'text',
'class' => 'form-control'
'id' => 'inputGroupSuccess2',
'aria-describedby' => 'inputGroupSuccess2Status',
'name' => 'email',//name field is mandatory to be able to control it in form_validation library
'placeholder' => 'Email',
);
echo form_input($email);
?>
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form>
you can see that span tag and input tag doesn't collide. So you would just use:
<?php
$email = array(
'name' => '',
'value' => '',
'id' => null,
'placeholder' => 'Email',
'class' => 'mail form-control'
);
echo form_input($email);
?>
instead of bootstrap input field. Everything else can stay the same in view file. If you would like to make input field like second one from example above, you should code it like:
<?php
$email = array(
'type' => 'text',
'class' => 'form-control'
'id' => 'inputGroupSuccess2',
'aria-describedby' => 'inputGroupSuccess2Status',
'name' => 'email',//name field is mandatory to be able to control it in form_validation library
'placeholder' => 'Email',
);
echo form_input($email);
?>
This could be example like "Optional icons in horizontal and inline forms" on Forms page.
Unfortunately, you can't. form_input()
is used to build the input element only. If you take a closer look at the html structure. <span>
comes right after <input>
and not within <input>
. So, you have to add it after the input element
....
<?php echo form_input($email); ?>
<span class="input-group-addon" id="basic-addon2">@example.com</span>
...