ikan Uploader :
Directory : /var/www/html/shardahospital.org/application/views/admin/includes/
Upload File : |
| Current File : /var/www/html/shardahospital.org/application/views/admin/includes/form_elements.php |
<h4>Vertical labels</h4>
<p class="font-gray-dark">
For making labels vertical you have two options, either use the apropiate grid <b>.col-</b> class or wrap the form in the <b>form-vertical</b> class.
</p>
<div class="left-margin">
<form class="form-vertical form-label-left">
<!-- ///////////////Input Box/////////////////////// -->
<!-- Text Field Required -->
<div class="form-group col-md-8">
<label>Input Field<span class="required">*</span></label>
<input type="text" class="form-control" id="first-name" required="required" placeholder="Enter First Name">
</div>
<!-- Text Field for Email -->
<div class="form-group col-md-8">
<label>Email address</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<!-- Text Field for Password -->
<div class="form-group col-md-8">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<!-- Text Field Input Disabled -->
<div class="form-group col-md-8">
<label>Disabled Input Field</label>
<input type="text" class="form-control" disabled="disabled" placeholder="Disabled Input">
</div>
<!-- Text Field Read-Only -->
<div class="form-group col-md-8">
<label>Read-Only Input Field</label>
<input type="text" class="form-control" readonly="readonly" placeholder="Read-Only Input">
</div>
<!-- Text Field with icon -->
<div class="form-group col-md-12">
<label>Text Field with feedback Icons</label>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 form-group has-feedback">
<input type="text" class="form-control has-feedback-left" id="inputSuccess2" placeholder="First Name">
<span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 form-group has-feedback">
<input type="text" class="form-control" id="inputSuccess3" placeholder="Last Name">
<span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
</div>
<div class="clearfix"></div>
<div class="col-md-4 col-sm-4 col-xs-12 form-group has-feedback">
<input type="text" class="form-control has-feedback-left" id="inputSuccess4" placeholder="Email">
<span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 form-group has-feedback">
<input type="text" class="form-control" id="inputSuccess5" placeholder="Phone">
<span class="fa fa-phone form-control-feedback right" aria-hidden="true"></span>
</div>
<div class="clearfix"></div>
<!-- ///////////////Select Box/////////////////////// -->
<!-- Select Box using Select2 Plugin-->
<div class="form-group col-md-8">
<label>Select Box</label>
<select class="form-control select2-single">
<option>Choose option</option>
<option>Option one</option>
<option>Option two</option>
<option>Option three</option>
<option>Option four</option>
</select>
<!-- Add this script in footer to use Select2 plugin
<script type="text/javascript">
$(document).ready(function() {
$('.select2-single').select2();
});
</script> -->
</div>
<!-- Select Box Grouped using Select2 Plugin-->
<div class="form-group col-md-8">
<label>Select Box Grouped</label>
<select class="form-control select2-single">
<option value=""></option>
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>
<!-- Add this script in footer to use Select2 plugin
<script type="text/javascript">
$(document).ready(function() {
$('.select2-single').select2();
});
</script> -->
</div>
<!-- Select Box Multiple using Select2 Plugin-->
<div class="form-group col-md-8">
<label>Select Box Multiple</label>
<select name="select_sample[]" class="form-control select2-multiple" multiple="multiple">
<option>Choose option</option>
<option>Option one</option>
<option>Option two</option>
<option>Option three</option>
<option>Option four</option>
</select>
<!-- Add this script in footer to use Select2 plugin
<script type="text/javascript">
$(document).ready(function() {
$('.select2-multiple').select2();
});
</script> -->
</div>
<!-- ///////////////Check Box/////////////////////// -->
<!-- Check Box -->
<div class="form-group col-md-8">
<label>Check Box</label>
<div class="checkbox">
<label>
<input type="checkbox" checked="checked"> Checked
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" > Unchecked
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" disabled="disabled"> Disabled
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" disabled="disabled" checked="checked"> Disabled & checked
</label>
</div>
</div>
<!-- Check Box Green using iCheck Plugin -->
<div class="form-group col-md-8">
<label>Check Box Green using iCheck Plugin</label>
<div class="checkbox">
<label>
<input type="checkbox" class="flat" checked="checked"> Checked
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="flat"> Unchecked
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="flat" disabled="disabled"> Disabled
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="flat" disabled="disabled" checked="checked"> Disabled & checked
</label>
</div>
</div>
<!-- ///////////////Radio Buttons/////////////////////// -->
<!-- Radio Button -->
<div class="form-group col-md-8">
<label>Radio Button</label>
<div class="radio">
<label>
<input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios"> Option one.
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="option2" id="optionsRadios2" name="optionsRadios"> Option two.
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="option3" id="optionsRadios3" name="optionsRadios" disabled="disabled"> Option three disabled.
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="option4" id="optionsRadios4" name="optionsRadios" disabled="disabled" checked> Option four Disabled & Checked
</label>
</div>
</div>
<!-- Radio Button Green using iCheck Plugin -->
<div class="form-group col-md-8">
<label>Radio Button Green using iCheck Plugin</label>
<div class="radio">
<label>
<input type="radio" class="flat" checked name="iCheck"> Checked
</label>
</div>
<div class="radio">
<label>
<input type="radio" class="flat" name="iCheck"> Unchecked
</label>
</div>
<div class="radio">
<label>
<input type="radio" class="flat" name="iCheck" disabled="disabled"> Disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" class="flat" name="iCheck3" disabled="disabled" checked> Disabled & Checked
</label>
</div>
</div>
<!-- Radio Button Horizontal using iCheck Plugin (Required) -->
<div class="form-group col-md-8">
<label>Radio Button Horizontal using iCheck Plugin*</label>
<p>
M: <input type="radio" class="flat" name="gender" id="genderM" value="M" checked="" required />
F: <input type="radio" class="flat" name="gender" id="genderF" value="F" />
</p>
</div>
<!-- ///////////////Text Area/////////////////////// -->
<!-- Text Area Resizable -->
<div class="form-group col-md-12">
<label>Resizable Text Area</label>
<textarea class="resizable_textarea form-control" placeholder="This text area automatically resizes its height as you fill in more text courtesy of autosize-master it out..."></textarea>
</div>
<!-- CKEditor Full Package-->
<div class="form-group col-md-12">
<label>CKEditor</label>
<textarea class="form-control" placeholder="This is CKEditor" name="CKEditor" id="CKEditor" rows="10"></textarea>
</div>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'CKEditor' );
</script>
<!-- Buttons -->
<div class="form-group col-md-12">
<button type="submit" class="btn btn-success btn-md">Submit</button>
<button class="btn btn-primary btn-md" type="button">Cancel</button>
<button class="btn btn-primary btn-md" type="reset">Reset</button>
</div>
</form>
</div>
<div class="clearfix"></div>
<br />
<!-- ///////////////Date Pickers/////////////////////// -->
<h4>Date Time Range Pickers</h4>
<!-- Date Range Picker -->
<div class="well col-md-12" style="overflow: auto">
<div class="col-md-4">
Date Range Picker
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<div class="controls">
<div class="input-prepend input-group">
<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
<input type="text" style="width: 200px" name="reservation" id="reservation" class="form-control" value="01/01/2016 - 01/25/2016" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
<!-- Date and Time Range Picker -->
<div class="col-md-5">
Date and Time Range Picker
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<div class="controls">
<div class="input-prepend input-group">
<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
<input type="text" name="reservation-time" id="reservation-time" class="form-control" value="01/01/2016 - 01/25/2016" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<!-- Date Picker Calendar -->
<h4>Date Time Pickers</h4>
<div class="col-md-12 calendar-exibit well">
<div class="col-md-3">
<!-- calendar dropdown - Replace picker_1 with picker_2, picker_3 or picker_4 in class to get more display color options -->
<div class="calendar right" style="display: none;">
<div class="daterangepicker_input">
<input class="input-mini form-control" type="text" name="daterangepicker_end" value="" style="display: none;">
<i class="fa fa-calendar glyphicon glyphicon-calendar" style="display: none;"></i>
<div class="calendar-time" style="display: none;">
<div></div>
<i class="fa fa-clock-o glyphicon glyphicon-time"></i>
</div>
</div>
<div class="calendar-table">
<table class="table-condensed">
<thead>
<tr>
<th></th>
<th colspan="5" class="month">Nov 2016</th>
<th class="next available">
<i class="fa fa-chevron-right glyphicon glyphicon-chevron-right"></i>
</th>
</tr>
<tr>
<th>Su</th>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
</tr>
</thead>
<tbody>
<tr>
<td class="weekend off available" data-title="r0c0">30</td>
<td class="off available" data-title="r0c1">31</td>
<td class="available" data-title="r0c2">1</td>
<td class="available" data-title="r0c3">2</td>
<td class="available" data-title="r0c4">3</td>
<td class="available" data-title="r0c5">4</td>
<td class="weekend available" data-title="r0c6">5</td>
</tr>
<tr>
<td class="weekend available" data-title="r1c0">6</td>
<td class="available" data-title="r1c1">7</td>
<td class="available" data-title="r1c2">8</td>
<td class="available" data-title="r1c3">9</td>
<td class="available" data-title="r1c4">10</td>
<td class="available" data-title="r1c5">11</td>
<td class="weekend available" data-title="r1c6">12</td>
</tr>
<tr>
<td class="weekend available" data-title="r2c0">13</td>
<td class="available" data-title="r2c1">14</td>
<td class="available" data-title="r2c2">15</td>
<td class="available" data-title="r2c3">16</td>
<td class="available" data-title="r2c4">17</td>
<td class="available" data-title="r2c5">18</td>
<td class="weekend available" data-title="r2c6">19</td>
</tr>
<tr>
<td class="weekend available" data-title="r3c0">20</td>
<td class="available" data-title="r3c1">21</td>
<td class="available" data-title="r3c2">22</td>
<td class="available" data-title="r3c3">23</td>
<td class="available" data-title="r3c4">24</td>
<td class="available" data-title="r3c5">25</td>
<td class="weekend available" data-title="r3c6">26</td>
</tr>
<tr>
<td class="weekend available" data-title="r4c0">27</td>
<td class="available" data-title="r4c1">28</td>
<td class="available" data-title="r4c2">29</td>
<td class="available" data-title="r4c3">30</td>
<td class="off available" data-title="r4c4">1</td>
<td class="off available" data-title="r4c5">2</td>
<td class="weekend off available" data-title="r4c6">3</td>
</tr>
<tr>
<td class="weekend off available" data-title="r5c0">4</td>
<td class="off available" data-title="r5c1">5</td>
<td class="off available" data-title="r5c2">6</td>
<td class="off available" data-title="r5c3">7</td>
<td class="off available" data-title="r5c4">8</td>
<td class="off available" data-title="r5c5">9</td>
<td class="weekend off available" data-title="r5c6">10</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="ranges" style="display: none;">
<div class="range_inputs">
<button class="applyBtn btn btn-sm btn-success" type="button">Apply</button>
<button class="cancelBtn btn btn-sm btn-default" type="button">Cancel</button>
</div>
</div>
Date Time Picker Calendar
<fieldset>
<div class="control-group">
<div class="controls">
<div class="col-md-11 xdisplay_inputx form-group has-feedback">
<input type="text" class="form-control has-feedback-left" id="single_cal1" placeholder="First Name" aria-describedby="inputSuccess2Status">
<span class="fa fa-calendar-o form-control-feedback left" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<!-- Add following script in footer to Initialize datetimepicker
<script>
$('#myDatepicker').datetimepicker();
$('#myDatepicker2').datetimepicker({
format: 'DD.MM.YYYY'
});
$('#myDatepicker3').datetimepicker({
format: 'hh:mm A'
});
$('#myDatepicker4').datetimepicker({
ignoreReadonly: true,
allowInputToggle: true
});
</script> -->
<!-- End of Date Time Picker Calendar -->
<!-- ///////////////FORM UPLOADS/////////////////////// -->
<h4>Multiple File Upload using Dropzone Plugin</h4>
<!-- Multiple Upload using Dropzone Plugin -->
<div class="col-md-12">
<p>Drag multiple files to the box below for multi upload or click to select files. This is for demonstration purposes only, the files are not uploaded to any server.</p>
<form action="/upload" class="dropzone" id="myDropzoneUpload">
<!-- fallback to default if javascript is not present -->
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
<!-- Add following script in footer to configure accepted file types options
<script type="text/javascript">
Dropzone.options.myDropzoneUpload = {
acceptedFiles: ".jpeg,.jpg,.png,.gif,.pdf,.doc"
};
</script>
-->
</div>
Kontol Shell Bypass