CHG: Update form elements doc

1 files changed, 120 insertions, 2 deletions

diff --git a/index.html b/index.html
index 667ef5b..5360102 100644
--- a/index.html
+++ b/index.html
@@ -725,6 +725,103 @@
 &lt;<span class="tag">/form</span>&gt;
 </pre>
 
+            <div class="columns">
+                <div class="column col-6 col-sm-12">
+                    <form class="form-horizontal" action="#forms">
+                        <div class="form-group">
+                            <div class="col-3">
+                                <label class="form-label" for="input-example-8">Email</label>
+                            </div>
+                            <div class="col-9">
+                                <input class="form-input" type="email" id="input-example-8" placeholder="Email" value="spectre@example.com" />
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-3">
+                                <label class="form-label" for="input-example-9">URL</label>
+                            </div>
+                            <div class="col-9">
+                                <input class="form-input" type="url" id="input-example-9" placeholder="URL" value="http://www.github.com/">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-3">
+                                <label class="form-label" for="input-example-10">Search</label>
+                            </div>
+                            <div class="col-9">
+                                <input class="form-input" type="search" id="input-example-10" placeholder="Search" />
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-3">
+                                <label class="form-label" for="input-example-11">Tel</label>
+                            </div>
+                            <div class="col-9">
+                                <input class="form-input" type="tel" id="input-example-11" placeholder="Tel" value="1-(888)-888-8888" />
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-3">
+                                <label class="form-label" for="input-example-12">Password</label>
+                            </div>
+                            <div class="col-9">
+                                <input class="form-input" type="password" id="input-example-12" placeholder="Password" value="123456789" />
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-3">
+                                <label class="form-label" for="input-example-13">Number</label>
+                            </div>
+                            <div class="col-9">
+                                <input class="form-input" type="number" id="input-example-13" placeholder="00" value="66" />
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-3">
+                                <label class="form-label" for="input-example-14">Date</label>
+                            </div>
+                            <div class="col-9">
+                                <input class="form-input" type="date" id="input-example-14" value="2016-12-31" />
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-3">
+                                <label class="form-label" for="input-example-15">Color</label>
+                            </div>
+                            <div class="col-9">
+                                <input class="form-input" type="color" id="input-example-15" value="#5764c6" />
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-3">
+                                <label class="form-label" for="input-example-16">File</label>
+                            </div>
+                            <div class="col-9">
+                                <input class="form-input" type="file" id="input-example-16" value="" />
+                            </div>
+                        </div>
+                        <div class="form-group hide">
+                            <div class="col-3">
+                                <label class="form-label" for="input-example-16">Progress</label>
+                            </div>
+                            <div class="col-9">
+                                <progress class="progress" value="50" max="100"></progress>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-3"></div>
+                            <div class="col-9">
+                                <select class="form-select" multiple>
+                                    <option>Slack</option>
+                                    <option>Skype</option>
+                                    <option>Hipchat</option>
+                                </select>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
             <section class="notes">
                 <p>To use form validation styles, add <code>is-success</code> and <code>is-danger</code> to the controls or add <code>has-success</code> and <code>has-danger</code> to parent elements. You can use the class <code>form-input-hint</code> to provide form validation success and error messages.</p>
             </section>
@@ -820,6 +917,27 @@
             <div class="columns">
                 <div class="column col-xs-12">
                     <div class="input-group">
+                        <span class="input-group-addon addon-sm">slack.com/</span>
+                        <input type="text" class="form-input input-sm" placeholder="site name" />
+                    </div>
+                </div>
+                <div class="column col-xs-12">
+                    <div class="input-group">
+                        <input type="text" class="form-input input-sm" placeholder="username" />
+                        <span class="input-group-addon addon-sm">@slack.com</span>
+                    </div>
+                </div>
+                <div class="column col-xs-12">
+                    <div class="input-group">
+                        <span class="input-group-addon addon-sm">slack.com/</span>
+                        <input type="text" class="form-input input-sm" placeholder="site name" />
+                        <button class="btn btn-primary input-group-btn btn-sm">Submit</button>
+                    </div>
+                </div>
+            </div>
+            <div class="columns">
+                <div class="column col-xs-12">
+                    <div class="input-group">
                         <span class="input-group-addon">slack.com/</span>
                         <input type="text" class="form-input" placeholder="site name" />
                     </div>
@@ -841,8 +959,8 @@
             <div class="columns">
                 <div class="column col-xs-12">
                     <div class="input-group">
-                        <span class="input-group-addon addon-sm">slack.com/</span>
-                        <input type="text" class="form-input input-sm" placeholder="site name" />
+                        <span class="input-group-addon addon-lg">slack.com/</span>
+                        <input type="text" class="form-input input-lg" placeholder="site name" />
                     </div>
                 </div>
                 <div class="column col-xs-12">