diff options
Diffstat (limited to 'docs/elements.html')
| -rw-r--r-- | docs/elements.html | 117 |
1 files changed, 74 insertions, 43 deletions
diff --git a/docs/elements.html b/docs/elements.html index b80e9f7..9ee3cef 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -1103,7 +1103,7 @@ <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="" /> + <input class="form-input" type="file" id="input-example-16" /> </div> </div> </form> @@ -1199,47 +1199,70 @@ </section> <div class="columns"> <div class="column col-6 col-xs-12"> - <div class="form-group"> - <label class="form-label" for="input-example-17">Name</label> - <input class="form-input is-error" type="text" id="input-example-17" placeholder="Name" /> - <p class="form-input-hint">The name is invalid.</p> - </div> - <div class="form-group has-success"> - <label class="form-label" for="input-example-18">Email</label> - <input class="form-input" type="email" id="input-example-18" placeholder="Email" /> - <p class="form-input-hint">The email is available.</p> - </div> - </div> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <select class="form-select is-error"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - <p class="form-input-hint">The option is invalid.</p> - </div> - <div class="form-group has-success"> - <select class="form-select"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - <p class="form-input-hint">The option is available.</p> - </div> - </div> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <label class="form-label" for="input-example-21">Email</label> - <input class="form-input" type="text" id="input-example-21" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" /> - <p class="form-input-hint">The name is invalid.</p> - </div> + <fieldset> + <legend>form-input</legend> + <div class="form-group"> + <label class="form-label" for="input-example-17">Name</label> + <input class="form-input is-success" type="text" id="input-example-17" placeholder="Name" /> + <p class="form-input-hint">The name is valid.</p> + </div> + <div class="form-group has-error"> + <label class="form-label" for="input-example-18">Password</label> + <input class="form-input" type="password" id="input-example-18" placeholder="Password" /> + <p class="form-input-hint">Passwords must have at least 8 characters.</p> + </div> + <div class="form-group"> + <label class="form-label" for="input-example-21">Email</label> + <input class="form-input" type="text" id="input-example-21" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" /> + <p class="form-input-hint">The Email address is unavailable.</p> + </div> + </fieldset> + <fieldset> + <legend>form-select</legend> + <div class="form-group"> + <select class="form-select is-error"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + <p class="form-input-hint">The option is invalid.</p> + </div> + <div class="form-group has-success"> + <select class="form-select"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + <p class="form-input-hint">The option is available.</p> + </div> + </fieldset> + <fieldset> + <legend>form-checkbox, radio and switch</legend> + <div class="form-group"> + <label class="form-checkbox is-error"> + <input type="checkbox" checked /> + <i class="form-icon"></i> I'm not a robot. + </label> + </div> + <div class="form-group has-error"> + <label class="form-radio"> + <input type="radio" name="gender" checked /> + <i class="form-icon"></i> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender" /> + <i class="form-icon"></i> Female + </label> + </div> + <div class="form-group"> + <label class="form-switch is-error"> + <input type="checkbox" /> + <i class="form-icon"></i> Send me emails with news and tips + </label> + </div> + </fieldset> </div> </div> @@ -1258,6 +1281,14 @@ <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input is-success"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invalid.<<span class="tag">/p</span>> <<span class="tag">/div</span>> + + <span class="com"><!-- form validation example for checkbox, radio and switch --></span> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-checkbox is-error"</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Remember me + <<span class="tag">/label</span>> + <<span class="tag">/div</span>> <<span class="tag">/form</span>> </code></pre> @@ -1674,7 +1705,7 @@ <div class="columns"> <div class="column col-12"> <div class="video-responsive"> - <iframe width="560" height="315" src="https://www.youtube.com/embed/BzMLA8YIgG0" frameborder="0" allowfullscreen></iframe> + <iframe width="560" height="315" src="https://www.youtube.com/embed/BzMLA8YIgG0" allowfullscreen></iframe> </div> </div> </div> |