Forms

<!-- Form Wraper -->
<form class="form-ui">
   <!-- Label Title -->
   <label for="firstname">First Name</label>
   
   <!-- input Element -->
   <input type="text" name="firstname" placeholder="First Name">
   
   <!-- Feilds Validate -->
   <input type="text" name="lastname" placeholder="Last Name" class="success">
   <input type="email" name="email" placeholder="Email Address" class="error">
   <input type="password" name="password" placeholder="Password" class="warning">
   
   <!-- Autocomplete Feild -->
   <input type="text" name="autocomplete" placeholder="Contries Names" class="autocomplete" data-val="dataValueName" data-url="data-file.json">
   
   <!-- Select Element -->
   <select>
      <optgroup label="Group Label">
         <option value="Select Test">Select Test</option>
         <option value="Select item 2" selected>Select item 2</option>
         <option value="Select item 3">Select item 3</option>
         <option value="Select item 4">Select item 4</option>
      </optgroup>
   </select>
   
   <!-- Multi Select Tags -->
   <input type="text" name="multiselect" value="Tage#1,Tag#2" class="tags-input">
   
   <!-- Date Picker input -->
   <input type="text" class="datepicker" name="date" placeholder="Date Picker">   
   
   <!-- File input -->
   <div class="file-input">
      <input type="file">
      <span class="btn secondary">Browse</span>
      <input class="file-path" placeholder="File Upload">
   </div>
   
   <!-- Range Slider -->
   <div class="range-wraper">
      <input type="hidden" class="range-slider" data-min='5' data-max='20' value='10'>
   </div>
   
   <!-- Range Slider Multi Value -->
   <div class="range-wraper">
      <input type="hidden" class="range-slider" data-min='0' data-max='200' value='10,100'>
   </div>
   
   <!-- Elements with icon -->
   <div class="icon-field ti-calendar-io">
      <input type="date" name="datepicker" placeholder="Date Picker">
   </div>
   
   <!-- Elements with Labeled icon -->
   <div class="icon-field-label ti-calendar-io">
      <input type="text" class="datepicker" name="datepicker" placeholder="Date Picker">
   </div>
   
   <!-- Textarea Element -->
   <textarea placeholder="Textarea Message"></textarea>
   
   <!-- Buttons Elements -->
   <input type="submit" class="btn primary" value="Submit Button">
   <input type="reset" class="btn secondary" value="Reset input">
   <input type="button" class="btn success" value="input Button">
   
   <!-- Checkbox Element -->
   <label class="checkbox"> 
      <input type="checkbox" name="checkbox">
      <span>Check Box Normal</span>
   </label>
      
   <!-- Switch Element -->
   <label class="checkbox-switch"> 
      off
      <input type="checkbox" name="switch">
      <span class="switch"></span>
      on
   </label>
   
   <!-- Radio Element -->
   <label class="radio-button"> 
      <input type="radio" name="radio1">
      <span>Radio Button</span>
   </label>
</form>
<!-- Form Wraper End -->

<div class="alert success">
    <strong>Well done!</strong> You successfully read this important alert message.
    <span class="close-alert ti-clear"></span>
</div>

<div class="alert info">
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
    <span class="close-alert ti-clear"></span>
</div>

<div class="alert warning">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
    <span class="close-alert ti-clear"></span>
</div>

<div class="alert danger">
    <strong>Oh snap!</strong> Change a few things up and try submitting again.
    <span class="close-alert ti-clear"></span>
</div>

<form class="form-ui">
    <div class="form-clone">
        <div class="clone">
            <div class="file-input">
                <input type="file">
                <span class="btn secondary">Browse</span>
                <input class="file-path" placeholder="File Upload">
            </div>
        </div>
        <button class="btn ti-plus-io clone-btn"></button>
    </div>
</form>