Formelemente

---

Login Form

Source Code

<div class="align-self-center tx-center wd-300 mg-t-10">
	<div class="input-group mg-b-5">
		<a href="#" class="btn btn-light btn-icon cta-sm" role="button">
			<div><i class="glyphicons-halflings-12-search"></i></div>
		</a>
		<input type="text" class="form-control ht-30 mg-x-8" placeholder="Admin">
		<a href="#" class="btn btn-primary btn-icon cta-sm" role="button">
		<div class=""><i class="glyphicons-halflings-185-log-in"></i></div>
		lt;/a>
	</div>

	<div class="input-group mg-b-5">
	.. 
	</div>
	..
</div>
				

Dropdown Single Select

Source Code

<select name="" class="form-control">
	<option value="0">Option auswählen</option>
	<option value="30421">Option A</option>
	<option value="30391">Option B</option>
</select>

Dropdown Single Select mit active Status

Select mit Label integriert

Für Selectelemente in Modals --> Modalforms

Für Selectelemente in Datatables --> Datatables mit Select

Class Reference

CSS Class	Erklärung
class="LA-dd-active"	Aktiver Status

Source Code

					
<!-- form-group without label -->	
<iv class="form-group row">
	<div class="col-auto pd-r-0  d-inline-flex ">
		<select name="Bearbeiten" id="bearbeiten" class="form-control form-control-sm">
			<option value="all">Label</option>  
			<option value="10980">Option A</option>
			<option value="10982">Option B</option>
			<option value="11109">Option C</option>
		</select>
	</div>
</div> 
<!-- /form-group -->					

<!-- form-group with label -->
<div class="row form-group">
	<div class="col-auto align-center d-inline-flex ">
	<span class="mg-r-10">Label</span>
	<select name="Bearbeiten" id="bearbeiten" class="form-control form-control-sm">
		<option value="all">Label</option>  
		<option value="10980">Option A</option>
		<option value="10982">Option B</option>
		<option value="11109">Option C</option>
	</select>
</div>
</div><!-- /form-group -->		

				

Dropdown Multi Select

work in progress

Source Code

Checkbox

Radiobuttons

Source Code

	
<!-- checkbox -->
<div>
	<label for="val1" class="checkbox">
		<input type="checkbox" name="" id="val1" value="1" class="hidden-xl-down"/>
		<span class="label"></span>Option 1
	  </label>
</div>
<div>
	  <label for="val2" class="checkbox">
		<input type="checkbox" name="" id="val2" value="2" class="hidden-xl-down"/>
		<span class="label"></span>Option 2
	  </label>
	</div>
<!-- /checkbox -->

<!-- radiobutton -->
<div>
	<label for="opt1" class="radio">
		<input type="radio" name="rdo" id="opt1" class="hidden-xl-down"/>
		<span class="label"></span>Option 1
	</label>
</div>
<div>
	<label for="opt2" class="radio">
		<input type="radio" name="rdo" id="opt2" class="hidden-xl-down"/>
		<span class="label"></span>Option 2
	</label>
</div>
				

Inputbox und Textbox

Source Code

<div class="row">

<!-- Inputbox -->
	<div class="col-auto">
			<input type="text" class="form-control mg-y-15" placeholder="Ich bin eine Inputbox">
	</div>

<!-- Textbox -->
	<div class="col-12">
	<textarea id="textinput" rows="10" name="en[text]" class="form-control">
Ich bin eine Textbox</textarea>
	</div>
	<span class="txtcnt" id="count"></span>
	
</div>


<script>
//text input word count
var maxchar = 200;
var i = document.getElementById("textinput");
var c = document.getElementById("count");
c.innerHTML = maxchar;		
i.addEventListener("keydown",count);
						
function count(e){
	var len =  i.value.length;
	if (len >= maxchar){
	e.preventDefault();
	} else{
	c.innerHTML = maxchar - len;   
	}
}
</script>
				

Datei Upload

Form & Icon Button

Drag and Drop & Button

Source Code

<!-- File Upload -->
<div class="custom-file wd-300 ht-30 mg-b-8">
	<input type="file" name="logo" class="custom-file-input ht-30"> 
	<label class="custom-file-label ht-30 mg-r-10">Durchsuchen...</label>
</div>

<!-- File Upload per Drag&Drop -->
<div id="drop-area">
	<form class="my-form">
	  <p>Datei(en) hier reinziehen</p>
	  
	  <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
	  <label class="mg-t-15 btn btn-primary" for="fileElem">Oder auswählen</label>
	</form>
	<progress id="progress-bar" max=100 value=0></progress>
	<div id="gallery" ></div>
  </div>	
				

Color Picker

Source Code

<div class="row">
	<div class="col-md-6">
		<input type="color" name="set_color" value="#00b39e" class="form-control"> <!---->
	</div>
</div>