mikit-framework

<!DOCTYPE html> <html> <head> <title>Mikit</title>  <link rel="stylesheet" type="text/css" href="../dist/css/mikit.min.css"/> <script type="text/javascript" src="../dist/js/jquery.min.js"></script> <script type="text/javascript" src="../dist/js/mikit.min.js"></script> <style> .component-index-box { counter-reset: count; max-width: 400px; margin: 30px auto 60px; padding: 32px; background: #fbfbfb; border: 1px solid rgba(0, 0, 0, 0.08); } .component-index-box li { line-height: 40px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); margin-right: 24px; counter-increment: count; } .component-index-box li a { display: block; text-decoration: none; position: relative; padding-left: 10px; } .component-show { width: 1180px; margin: 0 auto; } @media (max-width: 768px) { .component-show { width: 100%; } } .section-head { padding-top: 80px; } .example { border: 1px solid rgba(0, 0, 0, 0.07); padding: 32px; margin-bottom: 16px; } </style> </head> <body> <div class="component-index-box"> <ol> <li><a href="#h-base">Base</a></li> <li><a href="#h-inputs">Inputs</a></li> <li><a href="#h-search">Search</a></li> <li><a href="#h-checkboxes">Checkboxes & Radio</a></li> <li><a href="#h-fieldset">Fieldset</a></li> <li><a href="#h-small">Small</a></li> <li><a href="#h-big">Big</a></li> <li><a href="#h-width">Width</a></li> <li><a href="#h-states">States</a></li> <li><a href="#h-required">Required</a></li> <li><a href="#h-descriptions">Descriptions</a></li> <li><a href="#h-disabled">Disabled</a></li> <li><a href="#h-append">Append & Prepend</a></li> <li><a href="#h-append-button">Button Append</a></li> <li><a href="#h-more-examples">More Examples</a></li> </ol> </div> <div class="component-show">  <h3 class="section-head" id="h-base"><a href="#h-base">Base</a></h3> <p>This is the most basic form with all the basic inputs.</p> <div class="example demo-forms"> <form method="post" action="" class="mi-form" autocomplete="off"><input type="hidden" name="authorize-token" value="-"> <div class="mi-form-item"> <label>Email</label> <input type="email" name="email" class="mi-w50"> </div> <div class="mi-form-item"> <label>Country</label> <select> <option value="">---</option> </select> </div> <div class="mi-form-item"> <label class="checkbox"><input type="checkbox"> Check me</label> <label class="checkbox"><input type="radio"> Radio me</label> </div> <div class="mi-form-item"> <textarea rows="6"></textarea> </div> <div class="mi-form-item mi-form-buttons"> <button>Log in</button> <button class="button secondary outline">Cancel</button> </div> </form> <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">action</span>=<span class="hljs-string">""</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Email<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-w50"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Country<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">select</span>></span> <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span>></span>---<span class="hljs-tag"></<span class="hljs-name">option</span>></span> <span class="hljs-tag"></<span class="hljs-name">select</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> Check me<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span>></span> Radio me<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"6"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span>></span>Log in<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button secondary outline"</span>></span>Cancel<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span> </pre> </div>  <h3 class="section-head" id="h-inputs"><a href="#h-inputs">Inputs</a></h3> <p>Here's a standard input field with type set as text. Label serves as input's label, and the following div with class desc serves as an optional description.</p> <div class="example demo-forms"> <form class="mi-form"> <div class="mi-form-item"> <label>City</label> <input type="text"> <div class="mi-form-desc">This information helps us deliver orders on time.</div> </div> </form> <pre class="code skip"><form <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form"</span>> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>City<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> </pre> </div> <p>Here are two text input fields, one with a placeholder and another one disabled, both set to be 6 grid columns wide.</p> <div class="example demo-forms"> <form class="mi-form"> <div class="mi-row mi-gutters"> <div class="mi-col mi-col-6"> <div class="mi-form-item"> <input type="text" placeholder="Email"> </div> </div> <div class="mi-col mi-col-6"> <div class="mi-form-item"> <input type="text" disabled="true" value="Disabled"> </div> </div> </div> </form> <pre class="code skip"><form <span class="hljs-built_in">class</span>=<span class="hljs-string">"mi-form"</span>> <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"mi-row mi-gutters"</span>> <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"mi-col mi-col-6"</span>> <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"mi-form-item"</span>> <input type=<span class="hljs-string">"text"</span> placeholder=<span class="hljs-string">"Email"</span>> </<span class="hljs-keyword">div</span>> </<span class="hljs-keyword">div</span>> <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"mi-col mi-col-6"</span>> <<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"mi-form-item"</span>> <input type=<span class="hljs-string">"text"</span> disabled=<span class="hljs-string">"true"</span> value=<span class="hljs-string">"Disabled"</span>> </<span class="hljs-keyword">div</span>> </<span class="hljs-keyword">div</span>> </<span class="hljs-keyword">div</span>> </form> </pre> </div> <p>Here's how you denote required fields with req class, and add descriptions to labels using span with class desc.</p> <div class="example demo-forms"> <form class="mi-form"> <div class="mi-row mi-gutters"> <div class="mi-col mi-col-6"> <div class="mi-form-item"> <label>City <span class="mi-form-req">*</span></label> <input type="text"> </div> </div> <div class="mi-col mi-col-6"> <div class="mi-form-item"> <label>City <span class="mi-form-desc">Just curious.</span></label> <input type="text"> <div class="mi-form-desc">This information helps us deliver orders on time.</div> </div> </div> </div> </form> <pre class="code skip"><form <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form"</span>> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-row mi-gutters"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-col mi-col-6"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>City <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-req"</span>></span>*<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-col mi-col-6"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>City <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span> </span></pre> </div>  <h3 class="section-head" id="h-search"><a href="#h-search">Search</a></h3> <div class="example demo-forms"> <form class="mi-form"> <div class="mi-form-item"> <input type="text" class="mi-form-search"> </div> </form> <pre class="code skip"><form <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form"</span>> <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form-item"</span>> <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form-search"</span>> </div> </form> </pre> </div>  <h3 class="section-head" id="h-checkboxes"><a href="#h-checkboxes">Checkboxes & Radio</a></h3> <p>Mikit features full variety of stylish checkboxes and radio buttons. You can feature them on your pages by defining input type as checkbox or radio. There's also a neat option to place checkboxes inline by adding <code>.mi-form-checkboxes</code> class to the container (works for both checkboxes and radio buttons)</p> <div class="example demo-forms"> <form method="post" action="" class="mi-form"><input type="hidden" name="authorize-token" value="x"> <div class="mi-form-item mi-form-checkboxes"> <label class="checkbox"><input type="checkbox"> Check 1</label> <label class="checkbox"><input type="checkbox"> Check 2</label> <label class="checkbox"><input type="checkbox"> Check 3</label> <label class="checkbox"><input type="checkbox"> Check 4</label> </div> </form> <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form"</span>> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item mi-form-checkboxes"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> Check 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span> ... <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> </pre> </div> <div class="example demo-forms"> <form method="post" action="" class="mi-form"><input type="hidden" name="authorize-token" value="x"> <div class="mi-form-item mi-form-checkboxes"> <label class="checkbox"><input name="check" type="radio"> Check 1</label> <label class="checkbox"><input name="check" type="radio"> Check 2</label> <label class="checkbox"><input name="check" type="radio"> Check 3</label> <label class="checkbox"><input name="check" type="radio"> Check 4</label> </div> </form> <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form"</span>> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item mi-form-checkboxes"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span>></span> Check 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span> ... <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> </pre> </div>  <h3 class="section-head" id="h-fieldset"><a href="#h-fieldset">Fieldset</a></h3> <p>Fieldsets in Mikit are nicely pre-formatted and ready to go. Just wrap your form in a fieldset tag and you're good to go.</p> <form method="post" action="" class="mi-form"><input type="hidden" name="authorize-token" value="x"> <fieldset> <legend>Login data</legend> <div class="mi-form-item"> <label>Email</label> <input type="email" name="user-email" class="mi-w50"> </div> <div class="mi-form-item"> <label>Password</label> <input type="password" name="user-password" class="mi-w50"> </div> </fieldset> <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">fieldset</span>></span> <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Login data<span class="hljs-tag"></<span class="hljs-name">legend</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Email<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-w50"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Password<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-password"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-w50"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span> </pre> <fieldset> <legend>About</legend> <div class="mi-form-item"> <textarea name="user-about" rows="5"></textarea> </div> <div class="mi-form-item"> <button>Submit</button> </div> </fieldset> </form> <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">fieldset</span>></span> <span class="hljs-tag"><<span class="hljs-name">legend</span>></span>About<span class="hljs-tag"></<span class="hljs-name">legend</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-about"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"5"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span> </pre>  <h3 class="section-head" id="h-small"><a href="#h-small">Small</a></h3> <p>Simple class <code>.mi-form-small</code> makes your selects and fields, well, smaller.</p> <div class="example demo-forms"> <form class="mi-form"> <div class="mi-form-item"> <input type="text" class="mi-form-small" placeholder="Title"> </div> <div class="mi-form-item"> <select class="mi-form-small"> <option>Choose me</option> </select> </div> </form> <pre class="code skip"><form <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form"</span>> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-small"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Title"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-small"</span>></span> <span class="hljs-tag"><<span class="hljs-name">option</span>></span>...<span class="hljs-tag"></<span class="hljs-name">option</span>></span> <span class="hljs-tag"></<span class="hljs-name">select</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> </pre> </div>  <h3 class="section-head" id="h-big"><a href="#h-big">Big</a></h3> <p>Simple class <code>.mi-form-big</code> makes your selects and fields, well, bigger.</p> <div class="example demo-forms"> <form class="mi-form"> <div class="mi-form-item"> <input type="text" class="mi-form-big" placeholder="Title"> </div> <div class="mi-form-item"> <select class="mi-form-big"> <option>Choose me</option> </select> </div> </form> <pre class="code skip"><form <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form"</span>> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-big"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Title"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-big"</span>></span> <span class="hljs-tag"><<span class="hljs-name">option</span>></span>...<span class="hljs-tag"></<span class="hljs-name">option</span>></span> <span class="hljs-tag"></<span class="hljs-name">select</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> </pre> </div>  <h3 class="section-head" id="h-width"><a href="#h-width">Width</a></h3> <p>Following framework-wide rules, it is very easy to manipulate form fields sizes. Just use <code>mi-w50</code> class to make a field 50% wide or <code>mi-w25</code> to a 25% wide.</p> <div class="example demo-forms"> <form method="post" action="" class="mi-form"><input type="hidden" name="authorize-token" value=""> <div class="mi-form-item"> <input type="text" class="mi-w25" value=".mi-w25"> </div> <div class="mi-form-item"> <input type="text" class="mi-w50" value=".mi-w50"> </div> <div class="mi-form-item"> <input type="text" class="mi-w75" value=".mi-w75"> </div> <div class="mi-form-item"> <input type="text" value="100% by default"> </div> </form> <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form"</span>> <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form-item"</span>> <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-w25"</span>> </div> <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form-item"</span>> <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-w50"</span>> </div> <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form-item"</span>> <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-w75"</span>> </div> <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form-item"</span>> <input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> value=<span class="hljs-string">"100% by default"</span>> </div> </form> </pre> </div>  <h3 class="section-head" id="h-states"><a href="#h-states">States</a></h3> <p>By default, Mikit features two different states: success and failure.</p> <div class="example demo-forms"> <form method="post" action="" class="mi-form"><input type="hidden" name="authorize-token" value="x"> <div class="mi-form-item"> <label>Your height <span class="mi-color-success">Looks like a valid value</span></label> <input type="text" class="mi-form-success"> </div> </form> <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form"</span>> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Your height <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-color-success"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-success"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> </pre> </div> <div class="example demo-forms"> <form method="post" action="" class="mi-form"><input type="hidden" name="authorize-token" value="x"> <div class="mi-form-item"> <label>Enter your weight <span class="mi-color-error">No negative numbers, please</span></label> <input type="text" class="mi-form-error"> </div> </form> <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form"</span>> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Enter your weight <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-color-error"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-error</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> </pre> </div>  <h3 class="section-head" id="h-required"><a href="#h-required">Required</a></h3> <p>Along with making a field actually required, you can add a visual clue for the users using a span with req class.</p> <div class="example demo-forms"> <form method="post" action="" class="mi-form"><input type="hidden" name="authorize-token" value="x"> <div class="mi-form-item"> <label>Email <span class="mi-form-req">*</span></label> <input type="email" name="user-email"> </div> </form> <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form"</span>> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Email <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-req"</span>></span>*<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-email"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> </pre> </div>  <h3 class="section-head" id="h-descriptions"><a href="#h-descriptions">Descriptions</a></h3> <p>Descriptions are simple: as long as form's element has desc class, Mikit will treat it as a description.</p> <div class="example demo-forms"> <form method="post" action="" class="mi-form"><input type="hidden" name="authorize-token" value="x"> <div class="mi-form-item"> <label>Name <span class="mi-form-desc">Always nice to feel important.</span></label> <input type="text" name="user-name"> </div> <div class="mi-form-item"> <label>Email</label> <input type="email" name="user-email"> <div class="mi-form-desc">Please enter your email.</div> </div> </form> <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form"</span>> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Name <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-name"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Email<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user-email"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-desc"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span> </span></pre> </div>  <h3 class="section-head" id="h-disabled"><a href="#h-disabled">Disabled</a></h3> <p>Not only text inputs can be disabled, but checkboxes and radio buttons as well. Just add <code>disabled</code> attribute or <code>.mi-form-disabled</code> class to the input.</p> <div class="example demo-forms"> <p><input type="text" value="Text" disabled=""></p> <p><input type="checkbox" class="mi-form-disabled"></p> <p><input type="radio" disabled=""></p> <p><textarea disabled="">Text</textarea></p> <p> <select disabled=""> <option>Item</option> </select> </p> <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> <span class="hljs-attr">disabled</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"disabled"</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">disabled</span>></span> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">disabled</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">disabled</span>></span> <span class="hljs-tag"><<span class="hljs-name">option</span>></span>...<span class="hljs-tag"></<span class="hljs-name">option</span>></span> <span class="hljs-tag"></<span class="hljs-name">select</span>></span> </pre> </div>  <h3 class="section-head" id="h-append"><a href="#h-append">Append & Prepend</a></h3> <p>You can prepend or append certain elements within your input fields, such as currency characters.</p> <div class="example demo-forms"> <form method="post" action="" class="mi-form"><input type="hidden" name="authorize-token" value="x"> <div class="mi-form-item"> <label>How much is it?</label> <div class="prepend mi-w50"> <span>$</span> <input type="text"> </div> </div> </form> <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form"</span>> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>How much is it?<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prepend mi-w50"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>$<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> </pre> </div> <div class="example demo-forms"> <form method="post" action="" class="mi-form"><input type="hidden" name="authorize-token" value="x"> <div class="mi-form-item"> <label>It is much how?</label> <div class="append"> <input type="text"><span>$</span> </div> </div> </form> <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form"</span>> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>It is much how?<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"append"</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span>></span>$<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> </pre> </div>  <h3 class="section-head" id="h-append-button"><a href="#h-append-button">Button Append</a></h3> <p>Appending works for buttons as well. Here you can see a button that has been appended and included withing a text input field.</p> <div class="example demo-forms"> <form method="post" action="" class="mi-form"><input type="hidden" name="authorize-token" value="x"> <div class="mi-form-item"> <label>Label</label> <div class="append mi-w50"> <input type="text" name="mi-form-search" placeholder="mi-form-search"> <button class="mi-button mi-button-outline">Go</button> </div> </div> </form> <pre class="code skip"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">""</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"mi-form"</span>> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-form-item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Label<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"append mi-w50"</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"mi-form-search"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"mi-form-search"</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button outline"</span>></span>Go<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> </pre> </div>  <h3 class="section-head" id="h-more-examples"><a href="#h-more-examples">More Examples</a></h3> <p>The examples below are quite self explanatory and they cover multiple selections, selecting dates, filling in phone numbers, a ready feedback form template and more. Feel free to use any of these examples as templates for your sites.</p> <div class="example demo-forms"> <form method="post" action="" class="mi-form"><input type="hidden" name="authorize-token" value="x"> <div class="mi-form-item"> <label>Select multiple</label> <select class="mi-w50" multiple="multiple" size="10"> <optgroup label="Group 1"> <option value="1">Some text goes here</option> <option value="2">Another choice could be here</option> <option value="3">Yet another item to be chosen</option> </optgroup> <optgroup label="Group 2"> <option value="4">Some text goes here</option> <option value="5">Another choice could be here</optio