Guidline & Master HTML Admin

This is guidline and sample sample form for admin page

Starter Wrapper

Get started with Master HTML Admin

Quickly and easily get started with Master HTML Admin, you must wrap your form with code like below 

                                    
<section class="cx-admin-form">
    <div class="box-head-admin">
        <div class="container CX-wrapper">
            <!-- This is for title form -->
            <h2 class="title">Guidline & Master HTML Admin</h2>
            <!-- This is for description form -->
            <p class="desc">This is guidline and sample sample form for admin page</p>
        </div>
    </div>
    <div class="box-content-admin">
        <div class="container CX-wrapper">
            <!-- Put your form here -->
        </div>
    </div>
</section>
Sample Form
@
Example Multiple Select
mohon-upload-jpg-pdf-max-1MB 
                                        
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">Sample Form</div>
            <div class="panel-body">
                <aui:form name="fm" method="post" action="" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-md-6">                                   
                        <!-- This is form input text -->
                        <aui:input label="First Name" name="firstName" type="text" required="true" />
                        <!-- This is form input email -->
                        <aui:input label="Email" name="emailsimple" type="email" required="true">
                            <aui:validator name="email" errorMessage="format-salah"/>
                        </aui:input>
                        <!-- This is form input number phone -->
                        <aui:input type="text" required="true" name="phone">
                                <aui:validator name="rangeLength" errorMessage="Please Enter 11 digit's">[11,11]</aui:validator> 
                                <aui:validator name="digits" ></aui:validator>
                        </aui:input>
                        <!-- This is form input date (for full docs in here https://flatpickr.js.org/getting-started/) -->
                        <aui:input label="Birth Date" name="birthDate" type="text" cssClass="flat-date" helpMessage="jangan-salah-pilih-tanggal" />
                        <!-- This is form input Radio -->
                        <div class="form-group">
                            <label class="control-label d-block">Gender</label>
                            <aui:input label="Laki - laki" name="gender" type="radio" inlineField="true" />
                            <aui:input label="Perempuan" name="gender" type="radio" inlineField="true" />
                        </div>
                        <!-- This is form input Radio Inline -->
                        <div class="form-group">
                            <label class="control-label d-block">Gender</label>
                            <div class="form-check form-check-inline">
                                <aui:input label="Laki - laki" name="gender" type="radio" inlineField="true" />
                            </div>
                            <div class="form-check form-check-inline">
                                <aui:input label="Perempuan" name="gender" type="radio" inlineField="true" />
                            </div>
                        </div>
                        <!-- This is form input select -->
                        <aui:select label="Status" name="status">
                            <aui:option value="0" label="Select Status" />
                            <aui:option value="1" label="Single" />
                            <aui:option value="2" label="Married" />
                        </aui:select>
                    </div>
                    <div class="col-md-6">
                        <!-- This is form input group -->
                        <aui:input label="Username" name="username" type="text" prefix="@" />
                        <!-- This is form input email with Regex Validation -->
                        <aui:input name="emailRegex" type="text" label="Input email with RegExp">
                                <aui:validator name="email" />

                                <aui:validator errorMessage="Only emails from @example.com are allowed."   name="custom">
                                    function(val, fieldNode, ruleValue) {
                                            var regex = new RegExp(/@example\.com$/i);

                                            return regex.test(val);
                                    }
                                </aui:validator>
                        </aui:input>
                        <!-- This is form input multiple select -->
                        <div class="form-group">
                            <div class="control-label">Example Multiple Select</div>
                            <div class="autocomplete-select"></div>
                        </div>
                        <!-- This is form input textarea -->
                        <aui:input label="Message" name="message" type="textarea" />
                        <!-- This is form input file -->
                        <clay:label label="mohon-upload-jpg-pdf-max-1MB" style="info" />
                        <aui:input label="File" name="file" type="file"  accept="image/jpg, image/jpeg, image/png" required="true">
                                <aui:validator name="acceptFiles" errorMessage="only-accept-image-or-pdf">'jpg,png,tif,jpeg,pdf'</aui:validator>
                        </aui:input>
                        <!-- This is form input checkbox -->
                        <aui:input label="Vestibulum ac diam sit amet quam vehicula elementum" name="check" type="checkbox" />
                        <!-- This is sample button -->
                        <aui:button-row>
                            <aui:button id="submit-check"  type="submit" cssClass="btn cx-btn btn-sm btn-round btn-primary" value="Submit"/>
                            <aui:button type="button" cssClass="btn cx-btn btn-sm btn-round btn-default" value="Cancel"/>
                        </aui:button-row>
                    </div>
                </div>
                </aui:form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    //Function for datepicker
    $(".flat-date").flatpickr();
    //Function for multiple select
    var autocomplete = new SelectPure(".autocomplete-select", {
    options: [
        {
        label: "Barbina",
        value: "ba",
        },
        {
        label: "Bigoli",
        value: "bg",
        },
        {
        label: "Bucatini",
        value: "bu",
        },
        {
        label: "Busiate",
        value: "bus",
        },
        {
        label: "Capellini",
        value: "cp",
        },
        {
        label: "Fedelini",
        value: "fe",
        },
        {
        label: "Maccheroni",
        value: "ma",
        },
        {
        label: "Spaghetti",
        value: "sp",
        },
    ],
    value: ["sp"],
    multiple: true,
    autocomplete: true,
    icon: "fa fa-times",
    onChange: value => { console.log(value); },
    classNames: {
        select: "select-pure__select",
        dropdownShown: "select-pure__select--opened",
        multiselect: "select-pure__select--multiple",
        label: "select-pure__label",
        placeholder: "select-pure__placeholder",
        dropdown: "select-pure__options",
        option: "select-pure__option",
        autocompleteInput: "select-pure__autocomplete",
        selectedLabel: "select-pure__selected-label",
        selectedOption: "select-pure__option--selected",
        placeholderHidden: "select-pure__placeholder--hidden",
        optionHidden: "select-pure__option--hidden",
    }
    });
});
</script>
Sample Table
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Doris Wilder Sales Assistant Sydney 23 2010/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000
Michelle House Integration Specialist Sydney 37 2011/06/02 $95,400
Suki Burks Developer London 53 2009/10/22 $114,500
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675 
                                
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">Sample Table</div>
            <div class="panel-body">
                <div class="table-responsive">
                    <table id="example" class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Position</th>
                                <th>Office</th>
                                <th>Age</th>
                                <th>Start date</th>
                                <th>Salary</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Tiger Nixon</td>
                                <td>System Architect</td>
                                <td>Edinburgh</td>
                                <td>61</td>
                                <td>2011/04/25</td>
                                <td>$320,800</td>
                            </tr>
                            <tr>
                                <td>Garrett Winters</td>
                                <td>Accountant</td>
                                <td>Tokyo</td>
                                <td>63</td>
                                <td>2011/07/25</td>
                                <td>$170,750</td>
                            </tr>
                            <tr>
                                <td>Ashton Cox</td>
                                <td>Junior Technical Author</td>
                                <td>San Francisco</td>
                                <td>66</td>
                                <td>2009/01/12</td>
                                <td>$86,000</td>
                            </tr>
                            <tr>
                                <td>Cedric Kelly</td>
                                <td>Senior Javascript Developer</td>
                                <td>Edinburgh</td>
                                <td>22</td>
                                <td>2012/03/29</td>
                                <td>$433,060</td>
                            </tr>
                            <tr>
                                <td>Airi Satou</td>
                                <td>Accountant</td>
                                <td>Tokyo</td>
                                <td>33</td>
                                <td>2008/11/28</td>
                                <td>$162,700</td>
                            </tr>
                            <tr>
                                <td>Brielle Williamson</td>
                                <td>Integration Specialist</td>
                                <td>New York</td>
                                <td>61</td>
                                <td>2012/12/02</td>
                                <td>$372,000</td>
                            </tr>
                            <tr>
                                <td>Herrod Chandler</td>
                                <td>Sales Assistant</td>
                                <td>San Francisco</td>
                                <td>59</td>
                                <td>2012/08/06</td>
                                <td>$137,500</td>
                            </tr>
                            <tr>
                                <td>Rhona Davidson</td>
                                <td>Integration Specialist</td>
                                <td>Tokyo</td>
                                <td>55</td>
                                <td>2010/10/14</td>
                                <td>$327,900</td>
                            </tr>
                            <tr>
                                <td>Colleen Hurst</td>
                                <td>Javascript Developer</td>
                                <td>San Francisco</td>
                                <td>39</td>
                                <td>2009/09/15</td>
                                <td>$205,500</td>
                            </tr>
                            <tr>
                                <td>Sonya Frost</td>
                                <td>Software Engineer</td>
                                <td>Edinburgh</td>
                                <td>23</td>
                                <td>2008/12/13</td>
                                <td>$103,600</td>
                            </tr>
                            <tr>
                                <td>Jena Gaines</td>
                                <td>Office Manager</td>
                                <td>London</td>
                                <td>30</td>
                                <td>2008/12/19</td>
                                <td>$90,560</td>
                            </tr>
                            <tr>
                                <td>Quinn Flynn</td>
                                <td>Support Lead</td>
                                <td>Edinburgh</td>
                                <td>22</td>
                                <td>2013/03/03</td>
                                <td>$342,000</td>
                            </tr>
                            <tr>
                                <td>Charde Marshall</td>
                                <td>Regional Director</td>
                                <td>San Francisco</td>
                                <td>36</td>
                                <td>2008/10/16</td>
                                <td>$470,600</td>
                            </tr>
                            <tr>
                                <td>Haley Kennedy</td>
                                <td>Senior Marketing Designer</td>
                                <td>London</td>
                                <td>43</td>
                                <td>2012/12/18</td>
                                <td>$313,500</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        //Function for datatables
        $('#example').DataTable();
   });
</script>
Layout

With Coloumn 70-30

                                
<div class="row">
    <div class="col-md-8">
        <!-- This is form input text -->
        <aui:input label="First Name" name="firstName" type="text" />
        <!-- This is form input email -->
        <aui:input label="Email" name="firstName" type="email" />
        <aui:button-row>
            <button type="submit" class="btn cx-btn btn-sm btn-round btn-primary">Submit</button>
        </aui:button-row>
    </div>
    <div class="col-md-4">
        <!-- This is form input text -->
        <aui:input label="First Name" name="firstName" type="text" />
        <!-- This is form input email -->
        <aui:input label="Email" name="firstName" type="email" />
        <aui:button-row>
            <button type="submit" class="btn cx-btn btn-sm btn-round btn-primary">Submit</button>
        </aui:button-row>
    </div>
</div>

With Coloumn 50-50

                                
<div class="row">
    <div class="col-md-6">
        <!-- This is form input text -->
        <aui:input label="First Name" name="firstName" type="text" />
        <!-- This is form input email -->
        <aui:input label="Email" name="firstName" type="email" />
        <aui:button-row>
            <button type="submit" class="btn cx-btn btn-sm btn-round btn-primary">Submit</button>
        </aui:button-row>
    </div>
    <div class="col-md-6">
        <!-- This is form input text -->
        <aui:input label="First Name" name="firstName" type="text" />
        <!-- This is form input email -->
        <aui:input label="Email" name="firstName" type="email" />
        <aui:button-row>
            <button type="submit" class="btn cx-btn btn-sm btn-round btn-primary">Submit</button>
        </aui:button-row>
    </div>
</div>

With Coloumn 30-70

                                
<div class="row">
    <div class="col-md-4">
        <!-- This is form input text -->
        <aui:input label="First Name" name="firstName" type="text" />
        <!-- This is form input email -->
        <aui:input label="Email" name="firstName" type="email" />
        <aui:button-row>
            <button type="submit" class="btn cx-btn btn-sm btn-round btn-primary">Submit</button>
        </aui:button-row>
    </div>
    <div class="col-md-8">
        <!-- This is form input text -->
        <aui:input label="First Name" name="firstName" type="text" />
        <!-- This is form input email -->
        <aui:input label="Email" name="firstName" type="email" />
        <aui:button-row>
            <button type="submit" class="btn cx-btn btn-sm btn-round btn-primary">Submit</button>
        </aui:button-row>
    </div>
</div>

Full Coloumn

                                
<div class="row">
    <div class="col-md-12">
        <!-- This is form input text -->
        <aui:input label="First Name" name="firstName" type="text" />
        <!-- This is form input email -->
        <aui:input label="Email" name="firstName" type="email" />
        <aui:button-row>
            <button type="submit" class="btn cx-btn btn-sm btn-round btn-primary">Submit</button>
        </aui:button-row>
    </div>
</div>